Grocery App Design

This was a design project for a grocery app called “Grocery Prime” that I completed in November 2020. The design goal was to analyze specific shopper pain points in order to create a grocery app that addressed these user concerns and needs.

 

User Research

Overview

To better understand users’ pain points when it comes to shopping online for groceries, I created a user research plan to gather feedback and data for my target audience. The goal of my user research plan was to analyze and Identify the shoppers’ most prevalent pain points that they were experiencing when shopping online, what they considered, and what they expected. I tried to reveal important information from the research that would help me better understand my users’ shopping needs and their overall shopping goals. 

Target audience

My target audience included users who:

  • Are familiar with online shopping

  • Live in urban areas

  • Busy with hectic work schedules and family commitments

  • Want to spend less time grocery shopping

  • Want to save money and find affordable healthy foods

User Persona

Empathy Map

User Interview

I found five interviewees who matched the target audience and then conducted the following interview in person or via Zoom video chat.

  • How often do you shop for groceries?

  • Where do you shop at?

  • What do you usually shop for?

  • Describe your last grocery shopping experience. What did you like and dislike about it?

  • Have you ever shopped from a grocery app and if so which ones? How was your experience?

  • What are the important factors you would consider when shopping online?

Analysis

  • Most of my participants have not shopped for groceries online before.

  • Some of my participants mentioned shopping for groceries online is a good option during the covid-19 pandemic.

  • Most of my participants do grocery shopping at least once a week.

  • Participants mainly shop for produce, meats, and dairy items.

  • My participants responded they prefer to shop in person so they can compare and select the best products.

  • There were many aspects of grocery shopping that they found frustrating, such as traffic, parking, shopping in crowds, waiting in line, and food being out of stock. 

  • Shopping for groceries online is more convenient, which saves time and energy, especially for people who are professionals and have families.

  • Sometimes customers can get good deals and discounts when shopping online.

  • My participants felt overall online grocery shopping is more expensive than in-store shopping due to additional service fees, tips, and delivery fees.

Pain Points

Based on the interview notes, I summarized the most important problem (pain point) I believed my client should tackle with their grocery shopping app.

  • Shoppers worry about the quality of the food that the grocery store employees picked for them.

  • Shoppers have a lot of choices to find cheap deals in physical stores, most people feel shopping online is more expensive.

  • Shoppers are busy with their daily life and want to spend less time exploring and picking food.

  • Shoppers would like to know how much they spend to qualify for free shipping ahead of time. However, this information is usually hard to find at the first time shopping on an App.

  • After adding food and get ready to proceed with checkout, shoppers are noticed that the food cannot be delivered to their locations by the grocery service.

  • Shoppers prefer to pick a delivery time and know when their food will be delivered.

Solutions

  • Provide a “worry-free, product guaranteed” “low price” and “easy return” label on the homepage.

  • Provide a “food bundle” for shoppers at cheaper prices, so shoppers can save money and time when shopping for groceries online.

  • Make it easy to select and add products, provide a quick add to cart feature
    Notice shoppers how much shoppers spend in order to get free shipping on the homepage.

  • Have shoppers type in their Zip Code and find if the App provides service for delivery.

  • Build a time slot for shoppers to take a look at the next delivery time and choose a delivery time.

Affinity Diagram

Sitemap

Wireframes

Desktop - 1.png

Prototypes

My participants believed that shopping online is more expensive than in-store shopping for groceries. In my design, I attempted to address the cost pain point by building a grocery app that focused on bulk food bundles that could be purchased at a discount.

I began by sketching my ideas on paper in order to iterate quickly. Out of the many variations created, I picked the sketches which best solved the design goal I was going for and used these sketches to create the wireframes seen below.

Once the wireframes were completed, I contacted five individuals to test out the entire grocery purchase flow and collected their feedback on ways to improve the current design.

Typography

Color Palette

Design Mockups

After creating the low fidelity wireframe prototypes, I got specific feedback from my participants during user testing. The feedback helped me discover some opportunities for improvement on certain screens which made things more clear and increased usability. I then started working on high fidelity design mockups and built some additional transition screens below: