UI/UX Case Study: Making Amazon Fresh a recipe assisted grocery buying service

Maithili
7 min readJul 13, 2021

In this Case Study, we are going to articulate our design process for creating a recipe-assisted grocery buying feature in Amazon Fresh.

Problem Definition:

A large number of Indians have started switching to order groceries online. However, after conducting open-ended research and encountering a situation ourselves, we discovered the need to provide good curated recipes with the option of shopping for required ingredients and getting same-day delivery, all of this provided on a single platform.

Overview:

“Shop by Recipe ‘’ is a new feature we added to the AmazonFresh App wherein customers can shop for ingredients recipe-wise as well as get delivery on the same day at the comfort of their home. A great collection of recipes have been curated by expert Chefs suiting the Indian taste palette which helps people trust and try a variety of recipes as well.

⚖️ Competitive Research:

Amongst the several grocery apps we researched, Amazon Fresh is the only app providing a 2-hour delivery service. Its competitor BigBasket does have shopping recipe ingredients as a feature, however, they do not provide timely delivery and they lack a good user experience as well.

Upon evaluating our survey response, it was noted that 95.8% of our participants would prefer shopping ingredients of a recipe along with delivery in 2 hours. Hence, Amazon Fresh seemed like the perfect fit to facilitate this feature.

Comparing popular grocery apps with respect to the Recipe Feature and Delivery Time

📊 User Research:

We surveyed 48 people from age groups varying from 18–55 who are either students or employees or homemakers, actively trying to cook and buy groceries themselves.

We asked questions about:

  • Their thoughts about offline grocery shopping
  • Features they would like to add to our recommended service
  • Is it easy to find recipes online
  • How often do they lack ingredients for a particular recipe
  • Their likeliness to use a feature facilitating these experiences and getting delivery on the same day

🧐 Insights:

“Most of the time when I cook a fancy dish, I lack an ingredient or two. So I have to go down again to buy the same.”

👤 User Personas:

We considered 3 user personas, widening our use cases from employees having different scenarios and requirements. These in turn give us an insight into how the ‘Shop by Recipe’ feature can bridge the gap between offline groceries and end-users.

User 1
User 2
User 3

User Flow:

Below demonstrated is a generic user flow wherein a user starts from the Amazon Fresh homepage, selects the ‘Shop by recipe’ option, and then searches for a recipe or filter recipe, or just selects a recipe from the displayed options.

🏛 Information Architecture:

🖼 Wireframes:

We iterated on the wireframes for the app to come up with the best possible layouts that serve the essential purpose without hampering the user experience.

After making a few low-fidelity sketches, we designed it on a wireframe tool and then moved on to Figma, wherein we iterated several layouts for the screens as well as screen components.

WireFrames

🎨 Visual Design:

Amazon Fresh Homepage

  • From the Amazon Fresh Homepage, users can either choose to go to ‘Shop by Recipe’ from the Header image or choose from the Category option for the same.
  • We wanted to include a brief description of how the feature works. Hence, users can choose the option of ‘See how it works’ from the Header image itself which leads them to a pictorial cum text representation about the working of the feature.

Shop by Recipe Homepage

  • The Shop by Recipe feature has top chefs curating recipes for the Indian audience. The landing page has several features from a Veg/Non-veg toggle button for a user who wants to only have a particular section of recipes as well as indicators for the same.
  • Users can choose to Filter from various options and only have a certain set of recipes/categories displayed.
  • For someone who has cooking time as a criterion, a glance of Time Duration indicators is present.
  • Name of the chef and user ratings are present for the users concerned with how popular the recipe is.
  • There is an option to directly buy the ingredients for a user who is not interested in going through the recipe but directly wants to shop ingredients for a particular recipe.
  • We wanted to include a brief description of how the feature works. Hence, users can choose the option of ‘See how it works from the Header image itself which leads them to a pictorial cum text representation about the working of the feature.

Recipe Page

  • The Recipe Page starts with the title of the recipe, an attractive header image with a carousel of images as well as the functionality to Share and Wishlist the recipe.
  • To modify the Serving Size, an option from the drop-down menu can be selected, and accordingly, the recipe quantities are modified.
  • The level of Difficulty ranges from Easy to Hard and the time duration increases as well.
  • All the ingredients required for the recipe along with an easy button to add the ingredients to the cart.
  • Also, there is a button below to directly shop for ingredients required for the particular recipe.
  • All the recipes have directions organized in a neat and easy to understand manner.
  • Lastly, verified users can view/add recipe images, reviews and rate the recipe.

Search & Filter recipes

  • One can search for recipes from the search bar and a list of recipes from the same or various categories is displayed.
  • There is also an option to filter out recipes after which only the most relevant recipes are displayed. Filter options include choosing from the category, cuisine, difficulty level, and customer rating.

Amazon Fresh Cart

  • Above seen is a detailed list of all the items that the user has added from the recipe page. Users can either update the quantity of the items or delete any item.
  • Another feature added is to shop ingredients for multiple recipes at a time. In the example above, there are 2 recipe ingredients displayed, and user can modify their requirements accordingly.

Prototype:

After completing the visual design, we prototyped the feature in Figma.

Future Scope:

This being the first app we designed, in hindsight, there a bunch of things we can add to the existing app for greater functionality.

  • Adding a Random Recipe Picker which works by spinning the wheel. This feature is helpful for people who are confused about which recipe to choose and it acts as a nice fun element in the app that can draw good user attention.
  • A Voice Assistant that would guide users to follow the directions of the recipe step by step. This feature can also be linked to Voice-controlled devices such as Apple Home Pod, Google Home, and Amazon Echo that will help in improving all kinds of user experiences.
  • We can add a Collection feature wherein users can save recipes in their customizable categories. It can include their set of healthy recipes, recipes for kids, desserts, etc.

Team Members:

Maithili Bhuta & Devanshu Pipalia

👋Hey there! Thank you for reading till the end. Means a lot to me.

🤝Do feel free to reach out to me on LinkedIn for any feedback, discussions, or collaborations, I’d be more than happy to have a chat with you!

Did you know? You can hold the clap button for a few seconds to give a maximum of 50 claps. I would really appreciate it.

--

--

Maithili

Computer Engineering Undergrad with a knack for User Interface & Design!