UX/UI | March 2020 – May 2020
Case Study
InSupply
InSupply aims to assist users in locating essential items during COVID-19.
Project Overview
InSupply was developed as a response to current events related to the COVID-19 pandemic and the result of essential items becoming difficult to find. Across the country there has been a consistent shortage of items and many people find themselves driving to 4+ stores to find all of their supplies. Yet sometimes, even after driving to several different stores near and far, people are left only to be disappointed by the new normal of empty shelves. InSupply aims to save the user time locating essential items during this uncertain period. The concept of the platform makes it easy to determine which stores have goods in stock. .
Roles
UX Researcher, Visual Designer, Usability Tester
Problem
Due to COVID-19, it has become difficult to locate essential goods because of panic buying, resulting in a shortage in supplies around the United States.
Target Audience
Those who grocery shop two to four times a month, ranging from 18 to 31 years old.
Constraints
1. Since this project began at the end of March, inspired by recent events related to the pandemic, all research and testing was conducted remotely for safety purposes
2. No budget for user incentives to participate in surveys or testing usability session.
Process
01
Research
Competitor Research
Surveys
User Interviews
02
Define
Affinity Map
Empathy Maps
Personas
Problem Statements
Use Case Scenerios
03
Ideate
Information Architecture
User Flows
Sketching
Wireframes
Wireflows
Animations
Branding
Style Guide
04
Prototype
Wireframes
Hi-Fi Designs
05
Test
Remote Moderated Sessions
01. Research
1. Secondary Research
Began by conducting secondary research related to the problem and seeking out any current competitors. At this point I discovered that 10 days prior, a group of college students in Utah had already executed this initial concept. There was no iOS app but they had launched an app for Android. From here, I recruited 10 participants to commit to interacting with the site and filling out a questionnaire to discover what the competitor was doing well and what the pain points are.
User Feedback
%
Easy to Use
%
Small Images
%
Search Functions
2. Primary Research
To understand the behavior shift towards grocery shopping during COVID-19, I organized a user survey to assess demographics and properly screen individuals to invite for an interview. After collecting and analyzing the data, I reached out to the top five participants and conducted user interviews.
Insights
New Shopping Methods
Bulk Buying
Save Money
02. Define
Synthesis
After conducting interviews, I organized the data received through affinity mapping and empathy maps. Both of these techniques influenced how I crafted and defined my personas.
I discovered two main personas with the main differentiating factor being those who continue to shop in stores using preventative methods (masks, gloves, etc.) and those who order groceries online for home delivery.
HMW Statements and User Stories
Once enough data was collected and synthesized, I began writing numerous “how might we…” statements to narrow my studies/my research down to two specific problems to solve:
- How might we improve the shopping experience during COVID-19?
- How might we alert people when items will be in stock?
After narrowing down my focus to design solutions for improving the grocery shopping experience due to COVID-19, several user stories were crafted and I chose the top two for MVP.
- As a user I need to determine what stores have items in stock so I can prioritize where I drive to shop.
- As a user I need to filter search results in order to determine the best store to travel to for grocery shopping.
Information Architecture
When developing the structural design regarding the flow of the platform, it was important to have the search page be the prime focus. Having a hamburger menu to easily navigate to manage notifications, update account information, and read more about the origin of the concept.
03. Ideate
Sketching and Guerilla Usability Testing
For all sketches, I used the Matthew Stephens iPhone template as a size guide. I began generating step by step design ideas for the process of my two user flows, search results and signing up for alerts.
Once they were complete, I uploaded images of the sketches in Marvel to create a clickable prototype. Five participants were recruited to test these sketches to determine if the initial screen layouts were intuitive, confusing, and what I should completely scrap. All users were asked to complete the following tasks:
- Search for an item
- Create alerts for an item
- Remove an item
- Update your email address
All participants talked through what they would do if they had a developed product in front of them and no major red flags were discovered. The most confusing aspect was that it was not an interactive digital pro
Wireframing
After completing one round of testing of the sketches, I created wireframes for the two user flows in Adobe XD that developed the concept more realistically. Everything was gray scale to illustrate the initial desired solution.
.
User Search Wireframe
User Notifications Wireframe
Moodboard
Color Palette
Branding
I wanted to focus on a color scheme that evoked relaxation since this is a stressful, uncertain time. Pulling hues of greens and blues from nature was my prime inspiration. The psychology of blues and greens have powerful effects. Blue represents trust and security while green stimulates stability, growth, security and abundance. Even though there may not be an abundance of products on the shelves, I want the user to feel that they have an abundance of options all located within one seamless platform. Brown is used as an accent color since it radiates warmth and comfort yielding honesty. Using these blue, green and brown hues together, I aimed to communicate a fresh, calming brand.
04. Prototype
High Fidelity MockUps
After locking down the branding, it was time to apply the elements to bring the concept to life. At this stage I began incorporating the color scheme, icons, graphics, and images to bring it to life. Additionally, I tweaked some UI components from the initial wireframes.
05. Test
Prototype and Test
I conducted two rounds of moderated usability testing. All sessions were conducted remotely due to social distancing guidelines still in place around the country due to COVID-19. This allowed for geographical locations to not be a limiting factor regarding who could participate. Screen sharing technology, such as Zoom, was used to complete each session. Participants were selected based on the initial survey during the research phase and by seeking people who shop two to four times a month, aged 20 – 30 years old, via social media outreach. The goal was to gather initial impressions to the product and assess usability issues for red routes.
Outcomes and Lessons
Both rounds of testing resulted in critical feedback to refine the design and function of InSupply. The most critical problem discovered from the first round of usability testing was that all participants were unable to complete the fourth task of updating their email address. The second round of usability testing proved successful with all participants successfully completing the fourth task with the updated “account settings” in menu design. It is challenging getting stuck on one idea and then having it not be intuitive during testing, but that is why this step is critical for building successful applications. Innovation should be designed in a straightforward manner, increasing efficiency.