Scoutly

Human-Centered Design & UI/UX Project
Grocery Shopping during COVID-19
Due to the pandemic, people have been forced to quickly adapt and find ways to stay safe while carrying on with daily life. With the majority of people spending more time at home, attaining groceries is extremely important.  As a result, many customers face frustration with long lines, anxiety surrounding their health and safety, and disappointment when products are out of stock.

As a team, we wanted to further explore the grocery shopping experience during the COVID-19 pandemic and address some of the most pressing pain points. Our solution increases transparency surrounding the shopping experience by providing the status of stores, which lets users mentally prepare and plan out their trip.
Project Overview

Roles:

UX Research, UI/UX Design

Time:

9 Weeks

The Challenge
Grocery shoppers feel uncomfortable and unsafe due to the unexpected amount of people in and at grocery stores during COVID-19.

How might we increase transparency to create a more comfortable grocery shopping experience in high traffic areas during COVID-19?
Our Solution
An app that centralizes local grocery store information and aids in decision making towards grocery shopping. Users can plan trips, create grocery lists, and find ideal shopping times all in one interface.

Design Process

Researching the Problem

In order to better understand the current grocery shopping experience, we conducted user research via a digital survey and user interviews. In the digital survey, we asked 102 participants where they live and grocery shop as well as how they feel about grocery shopping during the pandemic. In the user interviews, we dove a bit deeper into 6 individual’s personal experiences and gauged their feelings regarding their current grocery shopping experiences.

From 102 Respondents:

79.4% had to wait in line to enter the grocery store during the COVID-19 pandemic

Most felt indifferent, bored, uncomfortable, anxious, or frustrated when waiting in line

38.2% felt that stores were not doing enough to keep them safe during COVID-19

Notable quotes from interviews:

“One time I visited Trader Joes around 5–6pm… I had to wait in such a long line, and once I got in, there were still so many people inside. I was really confused… Ever since then, I never go at 5–6pm.”
— Jess, 20 yrs old

“Grocery shopping is always a guessing game” — Jessica, 20 yrs old

Understanding the Problem

Affinity Mapping

After receiving all of our responses and conducting our interviews, we wanted to better organize all the information we’ve collected so that we can have a more concrete understanding of the user’s pain points and an overall problem statement to tackle. We decided to do this by generating an affinity map of all our interview responses and categorizing them into groups. From this, we were able to discover overarching pain points at different parts of the user journey, from deciding where to shop to checking out.

User Personas

With a better understanding of users, we were able to create user personas based on the information and insights we obtained through affinity mapping.

Pain Points & Problem Statement

After discussing our findings as a team, we realized that the root of all these pain points were the amount of people in and at the store(s). For example, before entering the store, many people have to wait in line because the store is already at max capacity. While shopping, people feel frustration and anxiety about their health and safety due to the amount of people inside of the store. After obtaining all their items, users must face the checkout process, which is confusing due to the large number of people trying to maintain 6ft distance while still staying in line. Thus, the negative feelings associated with the grocery shopping experience during COVID-19 are largely caused by the unexpected amount of people in and at the store.

Once we had a better understanding of the problem space and user pain points, we generated numerous “How Might We” statements addressing each point to help us ideate solutions.We then were able to combine our statements into our final problem statement:

How might we increase transparency to create a more comfortable grocery shopping experience in high traffic areas during COVID-19?

Sketching for a Solution

Before digitizing our prototype, we each created sketches of how we envisioned our mobile application to look like. This helped us develop our ideas further without the constraint of following a design system. From ideas like a live capacity viewer to a grocery list checker to an expandable store view, we talked about different ideas that we wanted to implement in our low fidelity prototypes. We then integrated our individual ideas into a more refined set of sketches for our low-fidelity prototype.

It was in this stage that we identified the need for these features:

My Stores → Shows the bookmarked stores that the user favorites

Nearby → Allows users to look at stores close to their current location

Grocery List → Checks the item stock of the user’s inputted list items

Showing Times → Users can look at current times or have the option to look at popular times to help them determine when they want to go to the store

COVID-19 Safety → Identify the safety measures of each store to help users determine their COVID-19 safety

Digitizing Our Solution

Mid-Fidelity Prototype

After discussing our sketches, we began to digitize our prototype using Figma. Each one of us was assigned a different page based on our interests and strengths. Instead of being “pixel-perfect”, we focused more on getting our ideas across. We wanted our dashboard to include a horizontal scroll for favorited stores and a list format for nearby stores. To show store capacity, we used bar graphs to reduce cognitive load and make decision making more intuitive. Item stock checker was a feature available to the user once they clicked on a store’s expanded view.

Testing our Solution

Usability Testing

After creating the mid-fi prototype, we wanted to test if our app actually made an impact on users’ decision making process surrounding the grocery shopping experience. We wanted to learn what other factors are taken into account when deciding to visit a certain grocery store. We conducted user testing with six participants. We used affinity mapping again to categorize the user feedback into frameworks that we felt guided user decision making: WHAT, WHERE, and WHEN.

WHAT relates to the actual target product, or item that the person is shopping for.

WHERE relates to the location and physicality of the store.

WHEN relates to the time constraints involved in the grocery shopping experience.

WHAT:

We learned that one of the primary factors of the decision making process is the actual target item itself. For example, one user stated that if he needs herbs, he visits an Asian market regardless of how busy or far away it is since he knows that the item is practically guaranteed to be offered at that type of store.

Following this mental model, users identified the item stock feature as extremely helpful, but wished to see the prices of items because it could directly impact whether they visit one store over another. To address this, we provided price information on each of the products in the item stock checker feature.

Item Availability Iterations (Mid-Fi→Hi-Fi)

WHERE:

We discovered that users tend to rank distance higher than store capacity/busyness levels when choosing where to shop. For example, one user shared that if he knew Costco was on the way home, he would prefer to visit it over a less busy store that was farther away. Distance plays a key role in determining how convenient the experience is.

Thus, users wanted to know the distance, or how far away a store is since it is an important factor in the decision making process. To address this, we included information such as “123 Street, Davis — 1.2 mi” so that users can quickly see the address of the store and also how far away it is from their current location.

Store Information Iterations (Mid-Fi→Hi-Fi)

WHEN:

Time is another important factor in deciding to visit a store. Users were confused by the verbiage of “slightly busy”, and “OPEN” as they were vague. Users wanted to know store hours, such as “Open until 8pm” rather than the current open/closed state.

To address this, we changed the “OPEN” into “Open until 8pm”, and presented the graph information as percentages instead of “busy”, “slightly busy” or “not busy”. Colors corresponded to a certain threshold of busyness.

Store Information Iterations (Mid-Fi→Hi-Fi)

We also received feedback regarding the visibility of certain elements in our visual design, such as making the “back” button and capacity graph larger, presenting the COVID-19 regulations as a checkbox so that users can see what the store enforces and what they fail to enforce, and presenting the store information in a consistent format on the dashboard. All these changes were implemented in the final prototype.

High-Fidelity Prototypes

Design System

In addition to creating components on Figma to help us maintain consistency, we created a design system to help illustrate our product’s aesthetic. Our interface mainly consists of white and shades of gray, however we also use accent colors to highlight important information. For example, the color blue is used for the action button, and the color red is used to show a store’s busyness.

Our team didn’t have too much experience with logo design but we wanted to showcase a logo that embodies our mission to help users scout for live store capacity and check for grocery item stock. The name “Scoutly” was suggested by one of our team members and we wanted the “c” and “o” to resemble a character looking through binoculars.

High-Fidelity Prototype

Dashboard View

Users have the option of scrolling through favorited stores or nearby stores in the dashboard view. The favorited stores show quick information such as a live update of the store’s capacity, what time it opens and closes, and how far away it is from the user. Users can also select a different day of the week.

Store Capacity Graph

See a timeline of the store’s anticipated capacity for the day to help plan your next grocery trip. The bars are intuitively sized to allow for easy comparison of busyness at a glance and users can scroll horizontally to see a timeline of the entire day. Users can then easily determine the best time for them to shop at certain grocery stores and can easily plan their future trips. By clicking on the star icon, users can add the store to favorited stores.

Check Item Availability

Once the user clicks on “Item Stock”, they have the option of checking the item availability. The user can click on past searches or enter the item name. Information such as the item picture, the name, the price, and stock availability are also displayed to help the user find what they are looking for. Users can “Add to List” to add an item to their grocery list, which they can view later.

List Feature

Users can compile and organize a digital grocery list that connects with items you previously checked stock for. Items that were added via the item stock checker will show the stock status and aisle number of that specific item. Users may also manually add items to their list, and optionally search for a store to associate with the item. The list can be filtered by store(s).

Reflections

Heavy User Research

This project was very research heavy which allowed us to get very detailed perspectives of users to help us identify our target audiences and pain points. Having multiple user interviews revealed a wide range of diverse personalities and types of users. We gained a lot of practice with synthesizing data and pinpointing overarching pain-points with the user experience.

Insightful Usability Testing

User testing revealed a second layer of depth about how users think and make decisions that could ultimately impact their health and safety during COVID-19. Integrating user perspectives and opinions throughout the design process provides valuable insight that might not have been discovered in the initial user interviews.

Future Steps