Safe Shopper- UX Case Study On Designing For Essential Shopping During A Pandemic
By: Len Huynh
Tags: User Research, Product Design, UX Design, UI Design, Content Strategy

Design Domain

Our team’s core interest is to discover the relationship between health and lifestyle. To narrow down on our domain scope on what part of daily life COVID-19 was impacting, we conducted secondary research through social media, local news sites and competitive analysis of issues that have been frequently talked about.

During the lockdown stages, health authorities implored Metro Vancouver residents to follow social distancing guidelines and only to go outside unless it was ‘absolutely essential’. We were curious about how people were dealing with the challenges of accessing essentials products or services during the pandemic.

“Essential services are those daily services essential to preserving life, health, public safety and basic societal functioning. They are the services British Columbians come to rely on in their daily lives.” — COVID-19 essential services, BCGov website

Research

Our secondary research process included reviewing news, social media discussions of COVID-19 topics, local health authority updates and competitive analysis of how businesses were tackling the pandemic’s challenges.

This insight helped us to refine surveys and social-distance friendly 1-on-1 interviews for our primary research.

Our results had shown that those who went to retrieve essential goods for themselves or their household felt more stress with this daily task due to the uncertainty of their destination’s environment and whether they would be able to get what they needed. Challenges from the pandemic created limited hours and product shortages, which requires users to more time outside in line ups, increasing likelihood of contracting the virus as though outside exposure. The constant stress is due to concern for their personal health and the potential to spread it to their family.

Personas

While everyone needs the core necessities to survive, understanding who the people are who access these items on behalf a group helped us identify deeper into the needs, pain points and emotions that would convey our ideas abstract ideas into a tangible solution.

Persona 1: The Primary Homemaker (people who provide material products for their household which their family relies on for daily life)

Persona 1’s Overview

Persona 2: The Independent Young Adult (individuals who live alone, active and self-sufficient in day-to-day living)

Persona 2’s Overview

Initial Design Opportunity

“How might we help our users plan their essential shopping trips according to the external COVID-19 environment while keeping safe within their local economy?”

This initial design opportunity was the basis for the wireframes that would address the challenges in a user’s essential shopping journey that we’ve discovered in our research process.

Design Solution

We designed a mobile solution called Safe Shopper: an app that helps users tackle the challenges of their daily shopping caused by COVID-19. It provides a platform to simultaneously compare updated COVID-19 store data and health/safety plans to make informed decisions on how to approach their essential shopping trips.

At the time when we’ve worked on this project, there were some issues with ethics regarding health and information that could potentially identify users. To prevent users feeling violated during a vulnerable and difficult time, we made sure our features did not allude to solutions like contact-tracing or COVID-19 diagnosis.

Mobile App Features

Allow users to select two stores to compare data visually to help them decide how to approach their shopping trips

Encourage community engagement through health-centred reviews on their shopping experience

Add a filter prioritizing health-centred criteria into a user’s search process

Display a store’s profile through health promotion lens for users to scan

Provide simplified stats of COVID-19 in a dashboard with external links to update users of BC’s status

User Testing + Feedback Sessions

Testing Methods

Due to social distancing, we used 2 ways to conduct our research: user-managed sessions and remote observations. User-managed sessions were done when remote observations were unfeasible due to time and connectivity constraints. Users were given pre-test questions for first impressions, general context of the app, a simple lists of instructions and a post-test survey with additional questions on their experience. This was not an ideal method of testing as the user would split focus on their own impressions and the instruction’s tasks, but at least necessary to capture any potential data for our research.

Remote observations were our best option as we could observe their interactions through screen share and provide some verbal direction through the call. This was done through social media and Zoom depending on the connectivity. Users went through a post-test interviews where another team member and myself would ask qualitative questions before sending them a survey to capture other relevant data.

Key Insights From Feedback

We received lots of useful insight from our testing session. Our testers were individuals in our target audience. The following are the 2 key insights we brought into our new iterations and changes we made for the project.

Various Perceptions Of App’s Core Purpose

When asked for their first impressions, we learned that our testers perceived the initial design to as an e-commerce or shopping app for the first half of the session. The proposed features to help with the pandemic related challenges weren’t immediately recognized as a solution to help with their journey.

The focus of health promotion wasn’t noticed in onboarding and home page.

To solve this issue, we added a story element during the onboarding process to summarize how the features should be used through simplified microcopy and illustrations. (Onboarding was a single page with login option.) Some of our users suggested adding more health terminology throughout the app. We incorporated this suggestion with caution due to risk of implying that the app had solutions if the user contracted COVID-19.

Information Hierarchy Impacting User Expectations

This was primarily on the Store Profile page, where our content was grouped by proximity, contrast and color. While our users understood what the sub-section of Store Info would contain, they responded by pressing on the aqua-green boxes and expected to be led to a different page with more info.

Information hierarchy and contrast from visual design were causes on how users interacted with this page

However, the contrast affected the horizontal sub menu, where that option was provided. To help users distinguish which elements could be interacted with in order of importance, we’ve changed our color palette and its saturation and contrast, and changed some parts of the information hierarchy as to not overload the users.

Reframed Design Opportunity

“How might we help our users make informed choices for their essentials errands with consideration of their personal and community’s well being while they navigate the external COVID-19 environment?”

With this feedback, we reframed our design opportunity to better understand our user’s emotional landscape beyond the problem. We are able to look at it holistically, and refine not just new content, but how it’s presented to help users get most value out of it too.

Design Guidelines

A snapshot of our visual design guidelines that maintained the consistency and brand of our app through typeface and color. Tone of voice through copy is straightforward to build a sense of reliability, and simple like a conversation.

Style Guide For Safe Shopper

Safe Shopper — Refined Features

Click me to try the Safe Shopper Prototype

Safe Shopper Marketing Video

Home Page & COVID-19 Dashboard

Users will first login into the Home Page that displays Latest Store Updates in the form of cards and will see a link to the COVID-19 Dashboard underneath it. With most of the Home Page’s content revolving around COVID-19 updates it helps users differentiate it from a shopping app, provided a sense of reliability of keeping them informed of the external environment.

From Home Page to COVID-19 Dashboard. (More COVID-19 info is accessible with the BCDCC.ca link below)

Search & Health Filter Feature

For users who intend to search a store or browse what’s nearby upon first glance, this feature is accessible from the nav bar. There’s an option to search through List View, where the user can type a related word (ex. bakery) and see the most relevant results in the list. Or they may use Map View, to see stores close to their location. If users want to know what stores are active with promoting a healthy store experience, they can use the Health Filter Feature to filter store health ratings, mask policy and other health criteria too.

As we’ve reframed our design opportunity, we recognized that users needed a way to feel secure when it came to their decision making. With this, it can add some clarity to their situation based on their personal values.

Store Profile Pages

Users may access standard store info on the store’s profile page, COVID-19 Health & Safety Plans and Updated Store Hours with estimated wait times. Other sub-sections can be accessed by a horizontal swipe menu underneath consisting of Store Info, Reviews, Pictures and Coupons.

Showing the 4 sub-sections of the Store Profile Page.

Organizing this content through a health promotion lens preserves the ‘why’ behind Safe Shopper. We’ve provided reminders that reviews should be health-focused, rather than standard customer-service experience and pictures uploaded should reflect how the store takes initiative to protect their customers and employees.

Compare Store Feature

When users need to plan when and where to go to multiple essential locations during their day, they can use this feature to compare peak hours, health precautions and purchasing options with the data in front of them instead of having to recall information of multiple stores, or to repeat the process of researching this information.

Showing the 3 categories of the Compare feature between 2 stores.

Lessons Learned

The user research, testing and critique sessions was an important lesson to build on my listening skills- specifically towards the words that were and were not spoken during our design process. To have the design reach its full potential, it was important for us to be open to criticism, extend our empathy and also look at the problem landscape holistically.

Since the project was conducted during a time of relevance it helped me recognize how design is essential to solve problems and improve situations of users. If the opportunity comes up, I would like to further incorporate feedback from business owners and work it into their side of the app as well. Moving forward, I’d like to use my learnings and storytelling skills to support other user-centric based design solutions that leaves a positive impact for others.

Thanks for reading! Would love to hear what you think, so comment below!

Currently rebranding my portfolio — stay tuned! ✨

Want to chat? Shoot an email to 👉 itslenhuynh@gmail.com 🌙

Our project got 👀 at the Vancouver UX Awards 2020!

References/Sources

Illustrations — unDraw.co

Photos — unSplash.com