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.
First, we looked at different examples of search from different websites and apps, trying to determine what works and what ZOZI should use.
- 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
- shows images of products as suggestions
- big and clear
- small icon when not activated
Etsy iOS App
- search specifically in a section
- categories accessible in Items
- no general search
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.
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.
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.
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.
When there is no results, search proposes another related search and the user sees popular local experiences, travel getaways and gear.
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.
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.
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.
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.
We also worked on wireframes for the application that completes the project.
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.
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.
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.
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...
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.
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.
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.
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
OLO and Fox VS Duck
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.
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.
When a player finds an item, small animations will play, enhancing the fun experience.
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.
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.
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.
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
The Collection by NY Times and dn&co
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.
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.
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.
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.