Close
Overview
Gourmet was designed as the companion app to the Echo Gourmet, an exploratory concept based around leveraging Amazon’s vast network of services.
Forgoing a screen on the Echo device meant that an app was needed to handle task like device setup, meal planning, and advanced user feedback.
The app was designed after running mock user tests with the Echo Gourmet concept prototype which you can read about here. Initially the app was going to be a simple device setup and recipe app, but further research revealed that we had a larger set of problems to solve.
This is a personal project that does not reflect any products or concepts from Amazon. All content by me unless noted.
Role
UX / UI Designer
Teammates
Dustin Chan
Duration
Spring 2018
Deliverables
User research, System architecture, User testing, UI Design, & System Prototype.
**Note
Some research content is designed for desktop viewing.
The Problem
Millenials are pressed for time in the hectic, modern world. Most of them are not able to find the time to research recipes, plan meals, shop, and cook every single night of the week.
How might a company like Amazon imagine a new grocery delivery service to help users plan meals and save time and money?
up to 44%
of millennials food dollars, an average of $2,921 a year, are spent on eating out.
< 20min.
are spent daily prepping food and cleaning up by Americans ages 15-24.
Online
Groceries
Interestingly enough only 3% of groceries in the US are purchased online and delivered to customers. Customers come in with a wide range of complaints as to why this is, but two reasons stand out above the rest. The number one reason is that people like to see and pick the perishable items they buy like fruit, veggies, and meat. The second is that a lot of people don’t like to plan ahead or don’t have the time to make a shopping list.
Keeping these things in mind we thought about how we might craft a new experience that seeks to eliminate pain points for customers, while trying to benefit Amazon as well. We came up with 3 goals to help guide our process.
Encourage users to purchase ingredients as meals to combat food waste, reduce time spent planning & focus on teaching people new cooking techniques.
Allowing users to select their preferred dietary needs, brands they like, and other things makes the experience feel more like shopping at a real store.
Using Amazon curated in-app articles, users can learn about green food trends, kitchen gadgets, and more to help market goods and services on Amazon’s platform.
Crafting
Personas
Using a 10 question survey on shopping habits and home food prep we figured out a core audience and used their answers to develop potential features . We broke down our core audience and mixed them with our demographic data to create a cross section of users through 3 distinct personas.
Design
Concept
Using already existing user experience metaphors allowed us to quickly prototype and test our app. Amazon’s overuse of the hamburger menu in its apps made us want to try something different.
We decided on a 5-tab menu to make it easy for user to navigate one-handed. 5-tab apps tend to be information dense which led us to implement a card-based information hierarchy.
The card metaphor is universally known and allows lots of data to be packed into one view.
The final decision was to use Apple’ iOS human interface guidelines as an interaction model to help us quickly prototype and create an experience a lot of users would be familiar with.
System
Architecture
Creating a system architecture helps map out the application before getting too deep into creating screens. It helped us reason through the flow a user might take as they move through the app.
Our focus was first and foremost having a “homescreen” that allowed a user to easily glance at info like deliveries and upcoming planned meals without having to make too many clicks. The weekly overview could be dismissed to access 5 tabs that gave the user a deeper level of control and information related to their meal planning, purchasing and Echo device settings.
Wireframes
& User Testing
Creating quick grey wireframes let us test our system architecture and quickly make tweaks so that important information is more easily found by users. We created a very simplified version of the interface with large text based navigation items using Sketch’s prototyping tools. We then used the prototype to run a quick validation session.
Sketch Prototype
User Testing
Protocol
We gathered 6 participants to help us review our wireframes. 5 of the 6 participants owned smart phones and 2 of the 6 owned an iPhone. Participants all reported that they were very comfortable using technology.
After we ran the participants through the test we showed them our system architecture and had a conversation about what features they would value the most and how they should be accessed.
Testing Insights
Our wireframe testing revealed a few shortcomings with our first system architecture. We also got feedback about how the system interacted with the Echo hardware and how we should handle visual design to help emphasize certain information. Our insights can be summed up in 3 ideologies.
All of the users were confused at the homescreen being a splash page that was accessible only via a button later on. They wanted it to be its own tab.
Users didn’t know if the app could be used if you didn’t also purchase the Echo Chef. Focussing on recipe discovery and meal planning allowed for more people to use the app.
Users commented on the lack of “interesting” interactions and wanted something more fun. We brainstormed a few features that would set our app apart.
System Architecture V2
We updated our system architecture to reflect the feedback from the wireframing user testing.
At first glance it is mostly the same, but creates a fundamental difference in how the final app would operate. Giving the overview its own tab means that another tab had to go. We decided to consolidate the Echo Chef sensor tab and combine it with the settings. This change allows for the app to function without the need for an Echo Chef, while still allowing users to access settings that may only be used every now and then.
Brand &
Visual Design
Choosing a visual design direction that worked for Amazon and still felt familiar to people who have used Apple products was a challenge that we wanted to take on.
We ended up borrowing heavily from flows that Amazon uses in its main shopping app while applying iOS style layouts that would allow the app to work across multiple device resolutions.
The Echo Gourmet branding is based on Amazon’s current Echo branding with its punchy solid colors and simple iconography.
Logo & Typography
Starting with with a basic cylinder we went through a few rounds of form development that ended with a complex blended form. The rounded square dish at the top acts as a tactile touchpoint, while the curved aluminum body lends a style that looks great in the kitchen and is easy to clean as well.
Final Design System
The design system was created using Apple’s iOS layout design as a base and creating new component’s to more closely match Amazon’s traditional user flows. Below you’ll find the custom elements that were created for this project.
Conversational
Onboarding
The onboarding flow has been designed as a casual conversation with Alexa. The system takes the time to learn a bit about your food preferences and cooking ability before helping you set up your Echo Gourmet.
Info at
a Glance
The homescreen has been designed to allow users to quickly check on an upcoming meal, see when their next delivery is and access more in-depth weekly information.
Discover Rich
Recipes
Discover new recipes for snacks, meals, desserts and everything in between. User can find similar recipes, read reviews from other users, and learn new techniques along the way.
Meal Based
Ordering
Ordering is based around buying ingredients for meals. Products are automatically selected using customers budget info gathered in onboarding, but allow for users to swap brands to find something they’ll enjoy.
Final
Thoughts
The Gourmet App really tested my skills at every turn. It made me fall in love with the process of User Experience design and cemented the fact that I am a process-driven designer.
I look forward to being able to compare this project with the work I am able to do in 1, 5, and 10 years time.
