Grocery Subscription — UI/UX Case Study for buying grocery online

Making the online grocery shopping experience hassle-free and addressing challenges due to Covid-19

Not feeling like reading the entire case study? Watch the highlight video below:

Covid-19 has challenged the norms of society in various manners. In similar concern, the online e-commerce grocery market has witnessed a +233% rise in sales post Covid-19 because people are less willing to visit grocery stores in person.

Witnessing the changes that are here to stay due to Covid this project is focused on understanding the pain points, the journey of user buying grocery online and design a subscription plan that will reduce the hassle a user has to go through.

But before we begin, a little journey of how I came on this subject!

I recently took part in a Design hackathon conducted by Growth Schoolwhich aimed to execute UX research and come up with a feasible solution in just 48 hours! Crazy ins’t it?

We were divided into teams of 5 members. We were supposed to choose a problem from a set of problems that were given to us. We discussed and chose one. And we named our Team “Wonder Women”!

We were connected with each other on discord and zoom call for straight 48 hours. We used two platforms primarily for working:
1. For brainstorming we used Figjam
2. For designing UI we used Figma

Now we are going to dive deep into the project reflecting on our process and essentially covering a lesson for each one of us to work in a team while leveraging each other’s strengths.

Our Problem Statement

Due to the pandemic, there has been a high rise in ordering groceries online but users generally don’t remember all of the items available at their residence. Design a subscription model for a popular grocery delivery app to keep track of the regular items they might want so that it becomes easier for the user to place an order in one go with all the necessary items.

Plan of Action

We divided our roles initially as follows

This was our timeline and division of roles yet to tested with how practically things roll out for us once in action.

Figjam helped us to keep a track of our individual contribution using the colours of sticky notes and other tools. That also made it easy for us to track back and fourth easily without creating any mess. You can notice that most of my insights are in the grey coloured sticky note with my name at the bottom.

Why we chose this problem statement?

We all agreed that this problem needs to be addressed. It’s better to order groceries online than step out in this pandemic. Many new users have started using this service so it will be easy to reach more users. We thought that it would be a good problem to solve and we could also get good research insights within the time we have on our table.

Understanding the Problem Statement

Each one of us wrote our own understanding of the problem statement and then we discussed it in the team.

Not all users are tech-savvy, but the current scenario has converted most of the users into buying groceries online. As users are ordering on a regular basis online, they need a platform where they can keep track of the groceriesUsers are stockpiling groceries during this pandemic especially necessary items as they are afraid they won’t be able to order them again.

Sub Problems

We broke down the problem statement into multiple individual statements which we thought could be a problem individually.

We identified quite a few sub-problems but then voted on which of these problems come more under the problem statement and scoped down the problems.

  1. Users might not know how long a product would last and when would they need to re-purchase it and find it difficult to keep a track of their groceries like how much is left, what have they run out of.
  2. Due to the high rise of online orders, people don’t find all their necessary items in stock at one go and then forget if they ordered it or not.
  3. Users have to choose all the items again when reordering.
  4. Buyers are unable to buy fresh seasonal fruits or vegetables.

Assumptions

We then made assumptions of users and the industry around the subproblems in order to help in the brainstorming exercise as well as to dig deep inside the problem and think of it from every perspective.

  • Users find it time-consuming to elect the same products every month and only happen to add or remove 1–2 items
  • They find it difficult to keep a track of the rate of consumption of a product at their home
  • Users rarely switch the brand of the items
  • Users miss ordering the items that are out of stock and forget to even add them to their next order
  • Users most often aren’t aware of the deals and offers
  • Most users that order online are young as they are familiar with technology and don’t find it a hassle

Designers always feel confident about the user and think they know them until they actually sit and talk with their users. Wait for a little more time with me because in upcoming phases our assumptions are going to be challenged!

 

Brainstorming

After getting multiple assumptions, we then choose a few which we thought were the most important. This helped us in focusing on fewer problems and keeping up with the time.

Based on this a rough user flow was created and we all wrote down our hypothesis statements.

Hypothesis Statements

Based on the sub-problems, assumptions, and solutions, we then came up with hypothesis statements to be validated by research. This gave us a base guideline that will help to direct our research.

  1. Our hypothesis is that connecting the local vendors to the users would help them as our assumption is that they don’t trust buying fruits and vegetables from the application directly.
  2. Our hypothesis is that the users are provided with a subscription plan which records their orders, then uses this order history to plan the future orders with a certain amount of automation because our assumption is that users forget and are not able to preplan the orders.
  3. Our hypothesis is that users need a separate tab for monthly and daily grocery subscriptions as our assumption is that they need different items at different times.
  4. Our hypothesis is that the users might want to re-order the previous order because our assumption is that most users repeat their previous order and this will save their time.
  5. Our hypothesis is that users need reminders for the items which are to be restocked as our assumption is that they tend to forget that they missed it last time.
  6. Our hypothesis is that users might need alternative recommendations for the items not in stock in their list because our assumption is that it would help them save time and effort.
  7. Our hypothesis is that the future of a grocery store is personalized, customer-oriented, available anywhere, emotional, flexible, connected, and uses the latest technologies in a pandemic situation as our assumption is that users need more help while ordering groceries online.
  8. Our hypothesis is that a feature of estimation of products soon to be over can be added or suggested because our assumption is that users may not remember to buy items.

Desk Research (Secondary Research)

I took responsibility to perform the desk research along with one another member using which we gained some insights into the increase in online grocery shopping and how people’s spending habits have changed.

Statistical Insights

  • 80% of people shopped for groceries online for convenience and not for the price.
  • 65% of consumers in this study were unable to buy the fresh food they wanted because it was out of stock during the pandemic
  • 44% replaced the item with alternative fresh food
  • 20% of users had more than 4 items running out-of-stock in their cart.
  • the token size for essentials, especially groceries online has increased to over 70% during the lockdown.
  • 64% of contemporary (younger families, more well-off, urban dwellers) consumers say it is important to buy Branded Fresh food but only 44% of conventional (Tend to be older, lower-income, and more rural) user rely on branded food.

Behavioural Insights

  • People are spending way more during the pandemic than they otherwise would on groceries.
  • Because of the pandemic, very few people tried to buy in alternative stores or to check out different store
  • Most of the users replace the item that is out of stock with another one and they might reconsider buying the replacement when making the same choice in future also.
  • Online grocery Shoppers turn to reviews
  • Users don’t want to put extra effort while searching for replacements for their out-of-stock items.
  • Call it convenience, smart shopping, or making the most of your time; grocery shopping through online mediums has become a preferred and viable option for those working from home.
  • Contemporary user is ready to pay more for fresh food in comparison to the conventional user.

Primary Research

Interview Guide:

After the Secondary research, my team members took over and prepared an interview guide based on desk research and our assumptions.

Warm-Up Questions:

  1. Name, Age
  2. How many members are there in your family?
  3. How many times do you order grocery items online in a month?
  4. From where do you buy your grocery items most frequently?

Understanding the interactions, behaviour, decision-making with respect to our hypothesis statements🔍:

  1. How do you plan for your grocery shopping?
  2. What kind of issues do you face while ordering grocery items?
  3. Do you find all the items you are looking for? If not, then what do you do?
  4. When you place an order, do you order the same items as your previous order?
  5. How do you decide on when to place an order online?
  6. What platform do you prefer ordering groceries on and why?

Understanding how the user takes actions while ordering

  1. What do you do when you have to re-order for any item?
  2. What steps do you take when a certain item is out of stock?
  3. Do you order fruits & vegetables online?
    If yes: What makes you confident about getting fresh fruits and vegetables?
    If No: Is there a reason behind it?
  4. On what basis do you order the quantity of an item?
  5. Would you like to save your base/typical order for every month?
  6. What do you think about a monthly order that would repeat itself?
  7. When do you pay for an order? while placing it or when it arrives?
  8. Do you make a shopping list before shopping for grocery items?
  9. What items do you reorder on a daily basis?
  10. Do you shop for all your grocery items from one platform?
  11. Which is your preferred payment method?
  12. What items do you buy the most?
  13. What items did you stop buying during the pandemic?
  14. Are there any items that you like to buy in bulk?
  15. What safety measures do you look for while buying?
  16. Has your spending increased or decreased during the pandemic?
  17. What do you spend the most amount of money on? (processed food/fresh foods/sanitization/bathroom products/cleaning products/)

Target Audience

Based on desk research my teammates set the target audience to not lost direction during our primary research.

  • Product/problem you are researching about: Food Grocery Product
  • Age groups, you want to target: 18 +
  • Gender ratio: 50:50
  • Occupation: Students, bachelors, married couples, mothers, senior citizens
  • Types of User :
    1. Users who order groceries online at least once or twice a month.
    2. Users having more than four family members

Top Insights from Primary Research

I used the interview guide prepared by teammates to interview two users. From which I observed that one user didn’t belong to the target audience that we had narrowed down to. So, I planned to add one of the user to Primary Research phase and keep aside the data of other one right now.

User 1

  1. Ordering habits like she likes to order when running low on items.
  2. Switch to online shopping due to the pandemic as she prefers buying the groceries from the stores directly
  3. Lack of information keeps her from trying new vendors.

User 2

  1. Items that get over early are ordered on a weekly basis and those which gets over after a month are ordered on a monthly basis.
  2. They are comfortable buying fruits and vegetables from the grocery stores and not necessarily from local vendors.

User 3

  1. If any item isn’t available, then he goes for alternative items instead of waiting for the item to get in stock.
  2. Don’t re-order from previous orders but go for searching for them all over again as he could look for alternatives too in that manner.

User 4

  1. Don’t re-order from previous orders but go for searching for them all over again as he could look for alternatives too in that manner.
  2. Orders 5 times a month by making a shopping list every week.

User 5

  1. Orders 3 times in a month from Amazon Pantry. Sometimes from Big basket.
  2. Scared what if the stock ends so buy products in bulk.

User 6

  1. Don’t get time to make a shopping list like to buy after scrolling ads.
  2. prefer to buy from the online platform due to office working hours

User Pattern Iterations

We observed a user pattern based on which I added a few categorries and started segregating the data. But then my other team members felt the need to reframe the user insights and iterated on how to place them under different patterns that were observed. I observered this step understanding their point of view and watched different iterations unfold.

Iteration 1

Iteration 2

Empathy Map

This task helped us know the user better and how they think, act and feel. We made Empathy Maps for two user sets the Planner and the Spontaneous.

User Persona

Based on the empathy maps, we created two user personas. This helped in defining our users and understanding their goals and frustrations.

Hypothesis Validation from Research

Various insights were discovered and some of the hypothesis statements were proved and disproved.

How might we question set

Based on research validations we listed down the following how might we questions. We discussed over them and scoped them down to a final list on the right side.

Ideation Phase

We set the timer for ideation and each one of us came up with our ideas. Then one by one we discussed every idea and performed voting.

Some ideas were really good but due to time limit we couldn’t implement them here. And thought that those ideas can lead the future scope of this app.

With relevant reasoning we moved ahead with the following solutions:

  1. Subscription Plan: It will allow users to subscribe to the delivery services weekly/monthly/daily dairy products.
  2. Order Subscription: It will allow users to subscribe to a set of items repeatedly getting delivered monthly/ weekly/bi-weekly.
  3. Make a List feature: This feature will help the users to create and save their list of items which can be used repeatedly for placing the order.
  4. Repeat Last Order: This feature will let users re-order past delivery items without the need of selecting them individually again.
  5. Notifications/ Reminders: This Feature will help users get the best deals. They would also be notified when a sold-out item is back in stock.

Wireframes

The Feature-led solutions were now converted into wireframes to see how they might work and impact the experience of the users.

Iterations of Subscription Plan

Order subscription

Make a list

Repeat Last Order

Notification/Reminder

User Flow Diagram

A User Flow was created to better explain the flow in which the solution would be working along with the features which were thought of in UI Screens.

After wireframing the solutions, UI Screens were made based on the selected wireframes.

 

 

High Fidelity UI Screens

We divided the UI screen designs among our team and worked in figma file together. I designed the UI screens for two solutions which are the reordering and restocking/deal updates feature while other members were preparing documentation and report of project

 
 
 
 
 
 
 
 

Future Scope

The future of online grocery shopping lies in more personalized and customized services while keeping it simple enough for all kinds of users to use. The future possibilities are endless with some of them mentioned below.

  • A tracking chip put on the containers of a few important groceries which tells the container refill status to the app automatically. And with a notification alert, we can order the stock required.
  • A bot that works in association with google assistant or Alexa and it will help us to make list items with simple narration.
  • An affiliate cross-platform facility for out of stock items with few partners based on possibility.
  • Helping users keep a track of their groceries like how much is left, what have they are running out of, and automatically add items to the cart using their previous shopping likes and dislikes.
  • Making sure that the brand they bought in past and had a bad experience with is not recommended to them and instead recommend them to try new alternatives if possible.
  • The future of a grocery store is personalized, customer-oriented, available anywhere, emotional, flexible, connected, and uses the latest technologies.

Key takeaways from Design Hackathon (to give you a perspective of value it added to my approach as a designer)

  1. Initially, I assumed it is not going to end well. But I got surprised how teamwork can transform the journey of working on a problem.
  2. I understood how to work in a time crunch because previously I felt the need to have enough time on my end for any project. But industry demands the solution in different time frames which can’t be challenged and we are bound to respond in it.
  3. Lastly, to handle the pressure under which we are expected to deliver an output.

Blog, Project, UI Design, UX Design

Harnoor Bhullar: Brand Identity Designer

” Design is a tool of communication, use it wisely.”

Design Resources

View all the resources and find the best to optimise your design process.