Grocery Store App
Treehouse UX Project

Overview

This is the second project of a series of UX projects done for the Treehouse UX program. The task was to design a mobile app for a grocery store to solve pain points in users' grocery shopping experiences.

I started with research to figure out what direction I wanted to take with this app, which involved interviewing people on what their overall experiences were with grocery shopping. I interviewed those who were within my target audience -- those who were within their early 20s and above, and living on their own and/or goes grocery shopping regularly.

After gathering information from all the interviews, I analyzed the common pain points and began prototyping and generating mockups.


Role: Research, strategy, design

Team: Solo project

Length: April to May 2020

Tools: Adobe XD, Illustrator, Photoshop

Introduction

Grocery shopping experiences tend to be either a neutral or unpleasant experience for most people. With the introduction of COVID-19, not only has it made some of these issues worse, but new problems like products going out-of-stock arose. I sought out to identify the 1-2 most pressing problems that people have with grocery shopping, and design my app in order to solve them.

Research

Key areas of Inquiry

First, I wanted to discover what kind of issues people experience when grocery shopping. Since asking people directly what those issues are could bias their responses, I came up with a list of 5 areas of inquiry that I would ask my interviewees about, in order to identify trends and patterns among my audience. Since this project was done during the height of COVID-19, I also wanted to focus on people's experience with quarantine.

  • Overall experiences with grocery shopping
  • Lifestyle, before and after quarantine
  • In-store shopping process
  • Shopping logistics: difficulties and pain points
  • Experiences using a grocery app

Interview

Five people were interviewed over video/voice calls, who were all within the target audience.

Questions

  1. What are your thoughts on grocery shopping?
  2. How often do you do your grocery shopping? When was the last time? (before and after quarantine)
  3. How do you grocery shop? What’s your process?
  4. What part of grocery shopping do you find difficult in general?
  5. Have you used a grocery app before? How was your experience? Or would you consider using one especially during this time?

Takeaways

  • Majority of my participants see grocery shopping as a chore, and do it mostly out of necessity.
  • There were many aspects of grocery shopping that they found frustrating, such as needing to take time out of their day to get groceries, which contributed to this negative feeling.
  • Most people felt this especially during this quarantine, when they could not find desired items due to limited stock, and needing to resort to substitutions or giving up entirely.
  • On the other hand, I found that some parts of grocery shopping were actually seen as enjoyable -- for example, some participants enjoyed using that time to just go outside and spend time with family and friends.
  • Participants responded most positively when they were able to search for and purchase items that they really enjoyed, such as their favorite snacks.
  • Regarding using a grocery app, I found that most have not used a grocery app or service before, and that there are mixed opinions on whether to try it out or not.

Pain Points

The most important pain point I identified was that too much time is wasted by hunting down specific items that may be unavailable. This is a concern that is more apparent during this pandemic, because a lot of time is required to search for that item, or having to research alternatives if it is out-of-stock. Throughout all my interviews, this issue was definitely the most common, and so solving this would greatly improve the target audience’s grocery shopping experience.

Affinity Diagram

I took each major point and noted them in a diagram to get a better sense of what issues arose during each conversation I had with each of my interviewees. I also took the opportunity to get to know what their top three items when shopping were, just for fun.

Solution

To solve the pain point, I wanted to make an app that shows exactly where an item is in the store if it is in-stock, and similar alternative items if that exact item is not in-stock. I want to make this information easily found in the app, either in the shopping list or by browsing individual items in the catalog.

For example, when looking at the shopping list, it will show items that are in stock and their in-store location, and show items that are out-of-stock and similar options. Another feature I’d like to implement is to show users whether an item is low on stock and how many remain, and an estimated date it’ll be restocked.

Inspiration

I took inspiration from popular shopping apps like Target, Shipt, and Instacart during my ideation phase. I also looked at Pinterest and Dribbble for design inspiration for my features, layouts, and colors.

User Flows

Roughly, I imagined the following steps for how a user would use the app. The actions that the users would take roughly aligned with the individual screens I would create for the app.

  1. Browse items: The homepage of the app will display the products that are available at the store, so that users can scroll through them to find an item they’re interested in.
  2. Access the shopping list: The user can view the items that they’ve added to their shopping list to reference what they need to search for. There are a couple ways to access this:
    • Swipe to the left or press on the menu icon on the top left to show the menu. Click on “my list” to go into the shopping list page.
    • Press on the list icon on the bottom navigation menu to access the shopping list.
  3. Check if desired items are in-stock: The shopping list would show all items that are in stock, as well as a separate list of items that are out of stock.
  4. Find item in-store: Clicking on each in-stock item will show the physical location of the item in-store, with information like section, aisle, and map.
  5. Find alternatives to items: Clicking on out-of-stock items will show similar items and the estimated restock date.

Sketches and Iteration

Sketches

I tried to sketch out at least 2 different layouts for each screen, so that it would force me to come up with a variety of designs.

Wireframes

With the sketches complete, I looked over each screen and identified the best characteristics and ideas from each sketch, and incorporated them into the wireframe for that screen.

User Tests

I conducted user tests after selecting five users within the target audience, and asked them to test out the wireframes version of the prototype. For each test, I encouraged my users to think aloud and say whatever comes to mind, so that I could collect a lot of feedback and thoughts. After completing all the interviews, I combed through the feedback to summarize what people liked about the design, and what areas to improve.

The Good

  • Very straightforward, easy to use UI.
  • The functionality seems useful, such as the map and location, notification options, estimated restock time, and recommendation list.
  • Overall, enjoyed how informative and potentially time-saving this app could be.

Areas to improve

  • Font sizes for some of the text are too small and hard to read, such as some of the text on the shopping list.
  • It wasn't clear how to specify a store location. It would be nice to set a default store location somewhere outside of the shopping list.
  • The location of the “+” and “-” buttons on the quantity picker were not intuitive, and could be bigger.
  • Missing the option to remove an item from the shopping cart and shopping list.
  • Add more information to the checkout page, such as coupon code input, and delivery or pickup information.

Design Principles

Elements

As this was my first time designing for mobile, I decided to take a straightforward approach. I used an official UI template kit from Apple and downloaded their SF font to use directly with Adobe XD.

For colors, I went with a set of colors that were similar to primary colors but easier on the eye, since many in my target age range are adults. I wanted a color set that I could use as an accent, to emphasize certain areas, rather than an all-around color for each page.

In terms of shapes, I went with curved edges with all boxes and buttons to create a sense of friendliness when using the app, and to make it easier on the eyes.

Final Mockups

After gathering feedback from my user tests, I made some adjustments to the mockup before creating the final version of my prototype.

Adjustments

  • Created more pages - search, account/profile, and checkout.
  • Added the ability swipe to delete an item in the shopping list and checkout.
  • Fixed minor design flaws such as font sizes, quantity pickers, location settings, etc.
  • Added a screen where users can input their dietary restrictions and preferences, as this came up a lot in my interviews. This was also inspired by my own issues with being lactose intolerant, and growing up around vegetarians.
Home screen

Easily explore categories and new deals of the day! Items personally selected and featured, so you’re one click away from adding a favorite to your cart.

Quick add

Add an item to your list or cart without leaving the screen by clicking the add icon on the product, making it easy to add multiple items.

Shopping list

View everything on your list that is in-store, and know where it is exactly in real-time. You can also know what’s out of stock that day so you don’t waste time looking for it in store. Removing an item and editing the quantity is also easy.

Diet restrictions

Vegetarian? No problem. Mark down what you can’t consume in your personal profile and you won’t see those items recommended to you. You can even set an option to never see certain products or just see a warning on their description.

Sitemap

Summary

In this project, I learned how to design mobile apps - and honestly, I actually enjoyed this more than designing website pages for desktop. It's been a dream for me to be able to learn how to do this, and I really like how nice and clean this came out for my first time designing for mobile.

I also learned about pain points of users and how much I need to know about my users before designing. I learned how to create something that actually addresses their needs, rather than what I assume they need.

I also took the opportunity to use this project to learn how to design on Adobe XD after using Sketch in the previous project.

Future Improvements

Though I took inspiration from apps like Instacart, Target app, and Shipt in designing this app, for next time, I would spend more time on looking at similar apps from competitors. I would make thorough comparison notes to see what each excel at and what could be improved, and use it to make my app even better.

Back to Portfolio