Coralie Sabin – Product Designer at ZOZIYou can find me in the lovely city of San Francisco, CA.
To learn more about my experience and methodology, here is my resume. Feel free to contact me for any opportunity or just to say hi!

Search on Zozi.com

Next

As a Product Designer at ZOZI, I have been working along with Jason Perez on adding a search feature for the website. The main goal was to ensure that our customers can quickly and intuitively find the items they are looking for.

One of the constraint is that ZOZI’s offering already include experiences and products but people, collections and editorial content should also be easy to find through search.

Research

First, we looked at different examples of search from different websites and apps, trying to determine what works and what ZOZI should use.

Designinspiration.net

Research
  • just start typing to search
  • big search when open
  • suggestions as you type
  • maybe too tech-savvy oriented
  • suggests only one word at the time

Urbanoutfitters.com

Research
  • shows images of products as suggestions
  • big and clear
  • small icon when not activated

Etsy iOS App

Research
  • search specifically in a section
  • categories accessible in Items
  • no general search

Concept

We used sketching and wireframing to explore where the search could be on desktop, tablet and mobile. We also worked on the flow and the way that filters would work.

Concept Concept

Recommendation

First look

No matter the device, search is always visible and available for the user. It has a white background on desktop and tablet so it draws the attention and looks like a text field for the user to know he can start typing. On mobile we decided to have it dark blue not to draw the attention to much as the screen is much smaller.

First look

Activation and suggestions

When the user activates search, he sees recent searches, categories and popular searches to guide him. As the user starts typing, the suggestions are divided between categories, experiences and products making them easier to scan.

Activation and suggestions

Results and filters

The results are presented in a grid sorted by relevance. The user sees number of results, can sort differently and filter the results.

Each time the user refines with the filters, we reduce the options creating a simple path he can always go back to. Size and color are only available when there is no more level of filters left, keeping it simple.

Results and filters

No results

When there is no results, search proposes another related search and the user sees popular local experiences, travel getaways and gear.

No results

Mobile and tablet

Search is available on mobile and tablet and presents the same features with small adaptations, e.g. the filters are not visible upfront with the results.

Mobile and tablet

Critique

Search is going to add to the experience on zozi.com but this is only the first version. As it is being used, we will get data on how well it is performing, how much people are using it and we will be able to change accordingly.

It might become the first way that people browse the site, in this case the main links in the navigation will potentially be reduced to an icon and search will be in the main nav, always expanded. Or we might realized that people only use it in few cases and search might be reduced to an icon in the navigation.

Moods

Previous Next

While exploring new ways that design can connect people, Guillaume Faure and I realized that the members of a household have different lifestyles and rythmes. Each person needs privacy and wants shared moments but those phases might not concur with the other's.

Time is money

Concept

Our concept is an object that lives in the center of the house and will be use by everyone to help them spend quality time together.

We started by drawing what the object would look like. After that we did a physical prototype to understand better the size, where it will be in the house and the way that users will interact with it.

Drawings Prototype

We also worked on wireframes for the application that completes the project.

Wireframes

Recommendation

We created Moods, which promotes dialogue by allowing people to synchronize their shared moments according to their wishes and availabilities. The object has a simple shape and works like a clock, giving it a central place in the house.

It shows the different phases for each member of the household. Those phases or moments are created by users, directly on the object or via the app, to let the others know when they are available and what they feel like doing.

Moods

Energy

Closest to the current trend as much as those to come, the object has the distinction of being self-powered: by rotating the needle around the object, the energy is being stocked. Guillaume and I wanted Moods to be accessible and having an object that doesn't need a battery is a plus nowadays.

Energy

Application use

Moods comes with a smartphone application to fit the hyper-mobility that characterizes the human being. The main screen is a calendar showing the phases of everyone.

App screens

By double taping on his column, the user can modify or add new moment. He needs to give his availability and pick a color to represent his feeling for that time. Instead of going for icons that would represent what people can do during the time that they spend together, we decided to use colors and let the users decide what the colors mean to them. Red could be board game time, yellow outdoor activities...

App

Critique

Moods is the result of a long thinking process on how can we connect people inside their house in a meaningful way. It is really experimental and could be easier to use as the needle is the only way to interact with the object.

Moods was exhibited in the competition Orange hands you the keys in October 2012.

Internship Smart Design

Previous Next

In 2013, I had the pleasure to work as a Brand and Communication intern at Smart Design in their californian office, in San Francisco. During 5 months, I had the chance to work on 5 different projects for international clients such as Samsung, Microsoft or HP. All those are confidential and can’t be shown.

That being said, my internship included user interviews and shadowing, concepts, wireframing, visual design, prototyping, user testing and animations. It was a great opportunity to use my skills and learn new ones.

Smart Design logo Few images of my work at Smart Design

Shades VS Staches

Previous Next

In April 2012, Nadim Raad and I decided to experiment around the idea of games both physical and digital. The goal for us was to use the interface to enhance the board game experience.

Research

Our inspirations were Battleship because it is a classic game that requires strategy, the Memory game which is fun and have endless possibilities of combinaisons. On the digital side, OLO developped by Sennep is a really simple game but with beautiful illustrations and Fox VS Duck made by Supermono Studios is excellent for the zen and subtle atmosphere.

Battleship and the Dutch Design memory game

Battleship and memory game

OLO and Fox VS Duck

OLO and Fox vs Duck

Recommendation

Well-known rules, new teams

Shades VS Staches is a two-player turn based game for tablet. And you already know the rules: two players, 6 items to place on your grid, now try to find your opponent’s items first. But we are not playing with boats here, we are playing with sunglasses and moustaches.

Shades VS Staches

Simple interface

We decided to keep the interface simple to make the game easy to understand and the playing time is short, allowing the user to play at home or in public transportations.

Shades VS Staches Shades VS Staches

Animations

When a player finds an item, small animations will play, enhancing the fun experience.

Razor gif Glasses being broken gif

Promoting the game

As a way to introduce the game, we created props used in a quick trailer video. The goal was to ask people to pick a pair of glasses or a moustache and do something in front of the camera to get them excited about Shades and Staches, even before they knew what it was. The video represents the playful universe of the game.

Critique

Shades VS Staches was a challenge because of the technology implied and it allowed us to experiment aspects of projects that we generally don’t pay attention to: the sounds and animations as well as the marketing around it. The user interface could be cleaner and simpler.

I would like to start another game project after playing with great games like Monument Valley, by ustwo, which uses geometry in a really smart way and have amazing visuals.

People with Shades and Staches props

Aperture NY

Previous

During my internship at Aperture Foundation, I was asked to work on Aperture New York, an app for tablet.

The concept is simple street by street, photographers describe the city in photographs and words. The goals are to tell the story of New York, engage 10 classic characters of New York photography as mentors and run the project as a movement.

Under the direction of Emily Lessard, I worked for two months on Aperture NY from finding inspiration, producing wireframes, creating visual screens and developing specifications and a set of icons.

Research

To start I looked at apps and websites that had interesting ways of displaying content, on map or grid.

MOMA AB EX NY and Irrland

Battleship and memory game

The Collection by NY Times and dn&co

OLO and Fox vs Duck

Concept

The app let you visualize on the map or on the gallery, you can filter by location or photographer, see the photographs in full screen, get more info and share. You can also log in and show your love for the pictures.

Wireframes

I explored a lot around the icons to make them consistent, easy to understand and recognizable and I also tried different font combinaisons to determine which ones were the most interesting for the app.

Icons, fonts and user interface exploration

Recommendation

Aperture NY is really simple. The user can decide between map or gallery view, clic on pins around him and learn more about NY through those wonderful photographs.

Screen of the app Screen of the app Screen of the app

Critique

Aperture NY will change with time. Aperture Foundation will add features according to feedback: including more filters (most visited and filter by time), add comments on pictures and profile page for users. Then the goal is to offer new possibilities focused on the community, like the creation of a journey and the access to other's profile page.

Making this app a strong photography movement is an always evolving process.