Amazon Go App | Concept Design
Best way to help people prepare their meal everyday
Background
For the past year, I learned general HTML, CSS, JavaScript, and Swift languages through a coding boot camp.
For the final project from Swift course, two of my team members and I decided to make a grocery shopping application for iOS.
Before we selected our MVP for the project, we brainstormed a couple of good ideas such as tracking expiration date, finds recipes based on the food in your fridge... However, we found that tons of grocery apps are already supporting these features.
“How can my app be competitive with other apps?”
We built features which users can add/delete items, and set an expiration date on the items so that it sends a notification to users. But I wanted to continue exploring this project to see what would be the best experience for grocery shopping app. Because I’m a designer, there is no limit to designing something better.
The start
Currently, my apartment is at Whole Foods Market in South Lake Union (Seattle, WA). Since the market is located in downtown Seattle, I see many single grocery shoppers. I’m going to mention single grocery shoppers a lot so I’m just going to call them SGS from now on.
Let’s define who SGS (single grocery shoppers) are.
- They are Millennials who live near downtown area
- They often work until 5–6pm and walk back home from work and ask themselves “what’s for dinner?”
- They look up online recipes but realize that those recipes are not helpful because they are usually for 4–5 people.
- They go to the store with a list of ingredients they got from online recipes and walk all over the store to find those ingredients.
- By the time they shopping it is almost 8'o clock, and think to themselves I won’t do this again…
Does that sound like you? Well… I was one of the SGS before I got married. I understood that pain. So I set my target users as SGS to design the app.
“How might we help SGS (single grocery shoppers) to enhance their grocery shopping experience?”
I wrote down target user’s scenarios and pain points, and then I ideated solutions. See the images below.
In this phase of brainstorming and ideation, I identified the problems and their pain points from target users. Since Amazon Go is designed for the checkout-free shopping experience, I merged those core functions of Amazon Go and Alexa to create an ideal grocery shopping app experience.
Here is the MVP list for Amazon Go App (version 1):
1. Users need to be able to add grocery items easily.
2. The app needs to provide recommended meals for users and be able to add ingredients directly to a grocery list.
3. Users can easily find items that they need to purchase and reduce as much time grocery shopping.
Information Architecture
I started creating IA (Information Architecture) first based on MVP list, so I could prepare how many screens to design.
Wireframe
Then I moved on to wireframing. I catch mistakes and generate better ideas quicker when I’m interacting with wireframes compared to staring at a static artboard. So I often work on my wireframe from Sketch and use the InVision plugin to export the artboard right away so that I can click through the flow screen by screen.
Mood Board + Color Palette
To speed up the visual process, I created a mood board to pick the color. The images below present targeting for SGS. I used this tone for the Millennials rather than green color like other grocery apps use.
Make it look like it’s real!
Once I felt confident with the UI and flows, I moved onto other programs to build an interactive prototype. Things I will be mentioning below will be based on the MVP list.
Users need to add grocery items easily
I think adding a list is an essential feature of this app, so I spent a lot of time to explore and test myself to find the best approach to adding items in visual and interactive ways.
So far, Framer is my favorite prototyping program to use because I can control interactions based on scroll behavior and position. The output from Framer almost looks like a finished product as well.
Note: I worked on the prototype before iPhone X was released. So all interaction animations were built on iPhone 7 (or iPhone 8?) device.
Micro-Interaction For Meal Card
Below the ‘Enter item here’ area, the app recommends meals (based on breakfast/lunch/dinner/occasional, etc…) to users.
They are displayed in cards so that users can swipe one to another to view. When a user clicks the meal card, it expands to show ingredients. Users can toggle each ingredient to add to their grocery list (or ‘add all ingredients’ to add all ingredients).
The image below is how the meal card interacts when it is clicked. In this the moment, the apps opens a new page to users, and I wanted to make sure the interaction was clear to helps users understand the page transition.
I used Principles to create the interaction because Principles works perfectly for multi-page interactions.
Enhance the In-store Experience
In the Uber app, you don’t see a driver’s route with their additional information unless you make a request. The in-store page works just like that. Users see this page only when users enter a store.
I researched how Amazon Go works. I watched videos, and read articles to see how it functionally works. And then I came up with couple questions before I moved on to design. Here are the questions and solutions I came up with below:
- How to help users to find items easily while they are shopping?
I came up with a couple of ideas. First one is obviously an AR experience, a hot topic nowadays. AR can simply create a virtual object to an existing space through the camera, which I thought would be fun to apply. Below is the sketch that I began with.
AR is a fun approach, but with an AR interface, users always have to stare at the phone screen while they are shopping. We all know the consequences that happened from Pokemon Go. I don’t want users to just rely on the phone while they are shopping. In another option, I had a map interface, where users don’t have to rely a phone as much as an AR interface. Also, users are more familiar with a map interface due to Uber and many other apps.
So, I developed more screens with a map interface and observed map app interfaces and their interaction animations. (After loading these apps, which elements appear first and last?)
With limited color, I wanted to make the map stand out. So I created a back-drop shadow so that the map almost looks like it is floating in the air (which works well if a store has multiple floors, too).
I used the blue color to emphasize the clickable elements or active elements, used a complementary orange, as the route color, and used green for a success message.
2. Would the interface make sense when a customer enters the store without creating a grocery list?
Now, I could define this app as Amazon Go app with the feature of creating a grocery list. That means the UI should make sense even without this task. So, I carefully thought how animations should work when an item is added, regardless of whether a user creates a grocery list.
Below is the comparison animations of when users have or don’t have grocery list.
3. What actions are allowed while users are shopping?
As I wanted to approach my goal of users easily finding items and quickly getting out of a store, I hesitated to add an extra button because it could confuse users. So the following question in my head was whether users can create a grocery list while they are shopping.
I decided not to let users create grocery list when they are shopping because it gets complicated.It would require extra add button for ‘add item’ and apps need to re-navigate the routes every time users add extra item. So, I added a search button to find grocery lists so that they could find an item right away.
As default action from iOS map list, they can toggle their full grocery list. See the interaction below.
4. What if grocery items are not available in store?
When users type ‘ice cream’, the app should know where the ice cream is located in the store. When users type ‘Ben & Jerry’, the app should be smart enough to know ‘Ben & Jerry’ is ice cream, and know whether inventory is available in the current store.
In case the item is out of stock, it is important to notify users at the beginning, right when they step into the store and and begin shopping. I used the iOS default alert message to deliver the message before users begin shopping; users can also see ‘Not in store list’ from full grocery list view as well.
Keep in mind, this is a use case for an in-store page. Ideally, users should know an item’s availability before they even go into a store which we will find out in the next version :)
What goes into version 2 or 3?
I completed the Coding Boot camp course in mid-September and since then, I spend my weekends and evening after work to work on this project. I set my scope (version 1) and visualized my idea here, but I’m just going to brefly explain other concepts I had in my mind.
- Shareable list: Ability to share/notify a grocery list to your roommates/spouse and add a list item from Alexa as well.
- Sales-items: I think this app has the potential for providing users with sales/promotion items. Even my wife and I often look at the sales lists and decide on items.
- Tracking your food in the refrigerator: If a fridge is smart enough to send information to the app about which items are inside with their expiration date, the app could provide a better-recommended meal for the target users.
That’s it! Thank you guys for taking the time to read this!
I would like to thank Eric and JJ for proofreading and providing excellent feedback.
