Kevin Ye - Entrepreneur & Product designer
Kevin Ye - Entrepreneur & Product designer
dribble2.png

Tap to view: Amazon prime now (Restaurants)

 

Amazon Prime Now app redesign (focus on Amazon restaurants portion)

Type of project: Personal Project redesign

My role:UI/UX (not affliated with amazon).

Website: Apple store

 
 
 

Amazon has three main delivery brands (not including amazon.com). The three are : Amazon prime NOW, Amazon Local and Amazon Restaurants ; each with their own unique branding and websites. These platforms Mobile presence on other hand is a little different: all three of these brands are merged into one on the Amazon Prime Now app

 

 

Who uses the Prime Now App?

 
 

The audience: Each of these products have their own branding and market.

1. Amazon Restaurants: This brand is a food delivery platform directly competing against UberEats, Caviar, Grubhub etc. This product targets men and women between the ages of 18-40. The two main markets are college students and employees at companies. Employee's to use Restaurants multiple times a week for lunches while College students tend to use it for both lunch and dinner. There is a trend where millennials and younger users are using delivery as a substitution for meal prep and eating out. Users of Restaurants use the service frequently.

2. Amazon Local: This brand is mainly focused on delivering fresh groceries and ingredients. They partner with local grocery stores to provide their goods. Amazon also recently acquired Whole Foods meaning that this brand will continue to grow. This product targets families and college students. Users that use this platform are also more frequent users and may even use it habitually for groceries and supplies.

3. Amazon prime now: This brand is focused on same-day delivery of selected amazon products. The use case for this product isn't habitual or daily and is used more for emergency or special occasions/products.

 

Problem: Lack of focus

 

Problem: Amazon has three amazing brands but the only one taking the spotlight on the app is Amazon Prime Now. Amazon restaurants and Amazon local are hidden within the oversaturated UI and UX. As you can see you have to click into the hamburger menu to find them and even then they're branded as part of prime now rather than as their own services.

hidden features.png

Research: After talking to users of the app I found that many of them didn't even know that Amazon restaurants was part of the Now app. Out of the ones that were aware of the delivery service, many thought it was part of NOW brand. I believe that this under-utilizes the powerful brands Amazon has already built while also detracting from the Prime now app experience (there's too much going on with no spotlights on any of the main features).

 

Solution: I'm going to focus this redesign on rebranding and redesigning the app by highlighting the unique use cases and benefits of each of Amazons 3 brands. During this redesign I will be focusing on Amazon restaurants.

 

Solution 1: Navigation 

Current flow.png
 

Problem: As mentioned above I believe the first problem to tackle is Amazon Prime's brand's and it's navigation. As it is right now Restaurants and Local don't stand out with both brands mixed in with Now. This makes the Now brand extremely messy while making the other two very hard to find. 

Solution: I decided that the best way to separate and accentuate each of the brands was through navigation. This gives amazon the flexibility to create three unique experiences focusing on each brand within their own respective sections. It also makes it easier for users to understand that restaurants and local are separate brands while highlighting them/making is easier to navigate and see.

brand 1.png
 

Redesign 1: Restaurant home page

 
Restaurant homepage image.png

Problem: Users that go to this page are either in the discovery phase or know what they want (and in that case they would use the search bar). This means that this page should be focused on accentuating different discovery categories and enticing customers with immersive images.

On the contrary, there seemed to be a lot going on in the Restaurant homepage and over 50% of the homepage is wasted with the "search restaurants" hero image.

 

Solution: I wanted to focus this page on the food and discovery, by utilizing large compelling images i'd clean up the UI while also making it easier to navigate.

Screen Shot 2017-10-13 at 4.41.34 PM.png

Removing UI elements: First I removed the hero image on the top as it's a complete waste of space and doesn't add to the experience/product.

Because most users are either using the search bar or are in the discovery phase I feel like the small navigation is redundant thus I removed the bar.

Hero image: As shown above almost all delivery platforms focus heavily on images and discovery. I wanted to keep the "popular products" section but also make it the focus of the page. I decided to make the hero image a scrolling "trending restaurants" section.

Categories: Users usually know what type of food they want to eat but not exactly what restaurant they want to go to. This is why my  focus was to make categories stand out and using the space efficiently to display as many restaurants as possible. Scrolling down shows you different categories of food (mexican, chinese)

Delivery location: As shown above with other delivery platforms, the delivery location is extremely important as it decides what restaurants a user may see. Currently, Amazon's homepage has no way of showing what users their delivery location. User might spend 20 minutes finding the perfect restaurant to realize that they don't have the right location, thus completely wasting their time. 

Prime resturant page analysis.png
 

Redesign 2: Category page

 
flow 2.png

Problem: The main problem with this page is navigation, once you're stuck in a category (Chinese, burgers, Italian etc) you can't navigate to and from other categories without going back to the restaurant home page again. I also found the UI to be bland and off putting (especially the top filter bar).

Solution: Make the page look more immersive while adding navigation between categories (for the users that want to explore more). 

Group 2.png

Hero Image: I find it extremely important for the aesthetic to put a hero image on top. The best part of this decision is that this allows me to combine the hero image with the search and filter bar in order to make them stand out a little bit more.

Navigation bar: As you can see above the navigation between categories is nonexistent in amazon's current flow. I added a navigation bar that lets you swipe between different categories in a way that takes up very little space.

Restaurant images: This is the best way for restaurants to sell their product to users. They get one shot and I believe restructuring the UI to make each image as immersive as possible gives restaurants their best chance of attracting users.

Favorite feature: I added a favorite feature that allows users to favorite resturants they go to often (the heart). With this also added a new "favorite" category under navigation.

Category flow.png
 

Redesign 3: Restaurant menu page

 
menu flow.png

Problem: A menu is overwhelming especially during the discovery phase, this is why structure is key to the menu page. Images of the dishes are essential to a menu and can decide what someone buys. the focus of this page needs to be centered more on the dishes and photos.

Solution:  I want to focus on images by changing the navigation and UI, allowing the picture of the food to stand out more. This also gives more space for quick buy functions other misc information. 

flow menu.png

Navigation: I changed the navigation from pulldown menu's into a scrollable navigation between the different sections of the menu, this gives more space to focus on the menu items and not the navigation while also making it easier to go between menu sections. 

Quick Buy: For users that aren't in the discovery phase want to buy items asap I added a Quick buy that lets users buy any quantity of an item on the spot to add to their cart.

 Search bar: This feature is also for users that know what they want. A search bar allows them to parse through huge menus and find what they want. I added a hero image to this to balance out the UI and make the feature stand out more.

Menu items: I changed how menu items are organized and gave each it's own row. On the actual app it's organized oddly with 1-2 items per row, this doesn't give enough space for each item to stand out. The new design gives enough space for images, description and even a quick buy section

menu page flow.png
 

Redesign 4: Menu-item page

 
menu item flow.png

Problem: The page is bland and doesn't really tell you much about the dish, especially with the onset of more dietary restrictions and health conscious customers the information is just not enough. There's also no way to review or read reviews on specific dishes (which is something no platform does).

Yelp reviews: Yelp is known for it's review's and a great Yelp page is an amazing marketing and PR tool for restaurants and companies. Most people check yelp before even considering buying dishes at restaurants! The thing is Yelp's reviews are for the restaurant as a whole and finding reviews on specific items is tedious. 

Solution: I wanted to completely redesign this page to do what  a menu page should do: close the sale. This includes adding a review page and giving users more information on the dish.

reviews.png

Review System: I added a second section to the menu item redesign: reviews.  Amazon has an amazing and robust review system on amazon.com, why not utilize that and allow users to review specific dishes? 

This feature will also be verified only (must have purchased the dish in the past to review) which reduces the amount of untrustworthy reviews (which is something yelp can't do, verify that is). This helps Amazon restaurants become a powerhouse in the market, giving more power and information to both the users and restaurants. 

Pop-up: Rather than having this as a completely new page I made the page a popup. This makes the experience feel "quicker", it makes users feel like they haven't left the menu page at all. It also allows users to quickly purchase and go back to ordering more items.

Hero image: this hero image of the dish helps balance out the design and free up space.

New Cart system: Once you click add to cart on the menu item page it brings you back to the menu page. Here I added a view cart bar that follows you around once you have something in your cart. This gives you more information on what you're ordering and how much your meal is going to cost. This feature also gives you an easier way to check out without mixing with your Local and Prime Now cart (the shopping cart on the top navigation bar).

menu final.png
 

Final design:

 
final.png

Final thoughts

After a year and a half away from mobile design I wanted to get back into it and see how web design has affected my mobile design. I realized that going back to a limited format (space is very limited on mobile) is a bit hard to adjust to. I was constantly trying to fit more information than I could into each page. 

My de-facto style relies heavily on flat design, colors and flat graphics, more of a fun cheerful vibe. I wanted to try out a more image heavy and minimalist/professional style and see what that'd look like. It was a very different but eye-opening experience, it made me realize how much of an impact professionally shot photographs can have on the design and feel of the app. 

I plan on tackling the Local and Prime Now parts of this mobile design sometime in the future because I believe Amazon can benefit greatly from a more wholesome and structured app.

Overall I enjoyed this experience and will definitely explore more image heavy designs and mobile applications in the future.