Forager
Client
Graduate Course Project
Year
2020
Duration
1 Month
Platform
Mobile App
Tools
Figma, Bluetooth
The Challenge
COVID-19 changed our lives forever
The global pandemic brought on by the coronavirus of 2019 created sudden, dramatic changes in the way we perceived and carried out in-person interactions. These changes undoubtedly affected shopper behavior in terms of browsing for, selecting, and purchasing groceries. During the start, and extension of COVID-19, the need for groceries and food has not decreased, yet the safety of visiting a grocery store has, and significantly so. The changing and evolving context of the pandemic offered a compelling opportunity for our team’s responsive design endeavor to address.
My Role(s)
UX Designer
I created wireframes, mockups, and interactive prototypes.
Content Writer
I created and tested written content for the mobile and watch face application, Forager. I finalized most language, voice, and tone of the app to ensure cohesion and effective/clear communication of our product's purpose and value to users.
Executive Summary
Goal:
Mitigate the negative feelings of uncertainty and risk associated with grocery shopping during a global pandemic.
Solution:
Forager is a responsive web service that uses Bluetooth technology to generate optimized in-store paths, providing customers with a seamless and safe shopping experience.
The Users
Pop-Up User Research
I conducted 2 out of 8 pop-up interviews with shoppers via Zoom. Our target audience ranged from 21 to 30 years of age with diverse living situations (i.e. living alone, with parents, roommates, college students, etc.). I helped co-write our interview guide which centered around 3 main stages of grocery shopping: the planning (before), the shopping (during), and the return (after). Our questions prompted participants to speak about their experiences, particularly their pain points and the implications of COVID-19 on their grocery shopping behavior.
Research Insights
My customer journey map (seen below) highlights some of the findings I was able to gather from the interviews I conducted.
Affinity Diagramming for Consolidation
Our affinity diagram was useful in understanding how to distill the insights we gained from our interviews into key customer goals and actions, of which we represented in a single customer journey map.
To synthesize our data into a cohesive model, we consolidated the themes from the affinity diagram into clear phases of action. These phases describe common goals, actions, thoughts, and experiences during the process of grocery shopping during a pandemic.
User Research Insights
- People do not make formal lists every time they plan to grocery shop.
- When people do make lists, they tend to use any medium that is close by and available (i.e., their phone or a loose piece of paper).
- Shoppers are willing to do extra prep to minimize the risk of contracting COVID-19 while in-store.
- When in-store, shoppers would rather head directly to desired food items rather than browse freely.
Unexpected Research Findings
- Regardless of age, every shopper interviewed made sure to bring along safety supplies such as face masks, sanitizing wipes and gloves, to protect themselves against COVID-19.
- If shoppers later realized they forgot an item after leaving the grocery store, they did not feel inclined to return and purchase the forgotten item. Rather, shoppers chose to wait until their next trip because returning felt too big of a hassle.
Design
Where does innovation fit in?
There is tension between the effort, safety, and priorities of customers when grocery shopping. Shoppers prioritize staying safe when shopping during the COVID-19 pandemic, and are willing to take extra precautions in order to do so.
Innovation might help in rethinking how customers can feel safe when planning their journey. Customers should feel at-ease and less fearful when shopping for groceries.
Majority of shoppers focus on speed and efficiency and tend to go directly to relevant sections/aisles rather than wander around. Common pain points such as shopper frustration experienced when searching for or forgetting items, are exacerbated during a pandemic, requiring shoppers to stay in stores for longer periods of time, or even return to stores.
Innovation might help in reducing the pain points customers experience while grocery shopping and in setting them up for successful shopping experiences.
Solution
Forager
Forager is a responsive design concept that helps shoppers feel safe during the COVID-19 global pandemic and sets up shoppers for a safe and efficient experience well after a global pandemic as well. Shoppers can create their grocery lists within the app and when in store, generate the safest and most efficient path to navigate through the store aisles. Forager uses bluetooth technology to collect crowd size or in-store visitor numbers to create less traveled routes for users. Grocery store establishments also participate in the data used by Forager by providing inventory and store layout information for the service to accurately provide in-stock items to shoppers. Forager provides value for store owners and companies by giving their customers the confidence to shop safely and quickly in their stores– allowing for more visitors and constant business operation.
Design System
Prototype 01
Creating our first interactive, low fidelity prototype was a great team effort. Our goal was to create a service that guides shoppers through the store safely and efficiently.
A few user and peer feedback points we received:
- There is no feedforward that alerts users to tap the item icon on the map to indicate that they have picked up the selected item.
- If their grocery list is very long the item icons could be overwhelming and take up a lot of the map. We resolved this by having one icon that indicated the number of items in that area of the store.
- What does the interface show once a user has collected all of the items on their grocery list? Ideally, our design would lead shoppers to the checkout areas. However, we needed to be mindful of the user’s agency and decide whether to design for the interface to automatically generate a path to the checkout areas once all items on the list were checked as complete, or provide the user with a choice to be directed to checkout or continue shopping. We decided to go with the latter.
Prototype 02
We designed individual prototypes in order to involve everyone in the design process and brainstorm various means to reach our project goal. Each prototype contributed key concepts to our next, cohesive prototype. This teammate’s prototype rendition (below) introduces a zoom-in function that clarifies specific grocery items that may be found in a single location.
My prototype rendition (below) provides the user with navigation by way of gradation without overstepping the bounds and technological capabilities of the grocery store data (and operational team), as well as the mobile telephone.
Prototype 03
(Mid-Fidelity Prototype)
We incorporated various aspects from our different prototypes into our mid-fidelity prototype. For example, a shopper would initially view the entire route overview and see the entire store map. As the shopper advances to each section of their route, the map would zoom into that upcoming aisle or section to allow for a more detailed view of food items. This, along with the decision to remove the number of items as an indicator/icon improved the user experience by alleviating the feelings of confusion experienced by users. This prototype iteration allowed for users to clearly see the step or route to the item next on their list.
Prototype 04
(High Fidelity Prototype)
A few considerations I was able to contribute to our high fidelity prototype were the need for ergonomic design specs as well as clear feedforward indicators for users to understand the design more intuitively.
We redesigned the call-to-action items so that signifiers for our button affordances were clear (i.e. highlighting the shopper's current location in the map, using distinguishing colors for higher-prioritized buttons and function, etc.). In order to streamline a user’s transition to various stages of the app (i.e. picking a grocery list, to generating a route, to beginning a route), the new “Map it!” button was added to provide feedforward indicators that a route will be generated once the button is tapped. We took into consideration our instructors’ feedback and designed a modal screen that displayed skipped items the user can access anytime before heading to checkout. This gives the shopper the opportunity to reroute themselves to pick up items missed during their first pass through the store.
Responsive Design
The results from our user research suggested that shoppers visit the same few grocery stores when shopping and therefore, are very familiar with the location of items within the store. Because of this, our design was not intended to guide first-time store visitors throughout the aisles, rather to lead them along an optimized path generated for efficiency and safety.
In thinking of other ways shoppers could use and benefit from our service, we decided to create a responsive design for a smartwatch. The use cases that grounded our decision included shoppers who would not want to frequently pick up their phone for access when moving to their next item. Ergonomically thinking, pushing a shopping cart, carrying a shopping basket, and picking up food items can require more than one hand. Having a grocery list on a wearable device allows for more freedom when navigating and collecting such items.
Benefits (and Features) of a Watch Face Design
Designing our solution to function on a smartwatch and provide shoppers with a unique but beneficial experience would mean creating innovative features and values the mobile phone version does not offer. On a watch, (1) a shopper’s grocery items and corresponding locations are shown in the most direct and efficient order, which helps the shopper move quickly through the store without needing to frequently reference a map. It also (2) saves the shopper time and energy when building their grocery list; they would not need to worry about adding or organizing their items in a specific order. Last but not least, when using our watch version of Forager, (3) shoppers can use voice commands to mark off items as complete or collected and further minimize touch interactions, keeping their hands free. This can be helpful particularly when they only have a few items and want to carry them without a hand-basket or cart.
Redesign
I conducted a few more rounds of feedback and gave Forager a facelift.
My justification for redesigning this project was to exercise and practice UX Design skills and tools.
Process
Redesign goals:
- Reduce amount of/and simplify use of high contrast colors in order to guide user's eye gaze and create distinct hierarchy
- Follow common design patterns when determining button placement
- Make interactions ergonomically easier
How I achieved this:
- Used one main color (green) and various shades of it to make app more cohesive
- Placed most buttons towards the bottom of the screen in order for shoppers' fingers to easily reach them
- Made clear call-to-actions (solid green buttons and highlights) that make app easier to use
Redesign goals:
- Modernize user interface
How I achieved this:
- Used common design standards when creating buttons that are encouraged to be tapped vs. discouraged by differentiating them with colors (i.e. the "Let's go!" CTA is solid green while the less prioritized "Cancel" CTA is a majority all-white button)
- Reduced the amount of color used on a single page by removing the gradient header
- Created information hierarchy by using bold, green, and outlined (i.e. '20 mins') font
Redesign goals:
- Enable easier access to entire shopping list
- Design for on-the-go and fast-moving shoppers who have little time to look at their devices
How I achieved this:
- Enlarged the map (map takes up more of the screen which allows for easier view if a shopper quickly glances as the map)
- Changed the scroll direction of the in-progress shopping list to horizontal (a user is able to navigate the app with a single hand and easily view their entire shopping list, as well as upcoming items, without changing hands)
Reflection
Design toolkit
Our design concept effectively addressed the user’s need: to complete their shopping experience quickly and efficiently, while maintaining their safety. I was able to learn why and practice how to implement various types of design affordances, signifiers, and indicators within our design.
Intentional design
I was also able to learn about why intentional responsive design decisions are vital to the success of such design, as well as the need to provide specific value and a different/unique experience for different types of digital interfaces.
Inclusivity
This project allowed me to push myself and think about diverse use cases, and how our design might be able to address similar needs in dynamic circumstances and then adapt our design accordingly. In doing so, our team was able to increase the value of Forager to not only the user, but the client as well.
Further exploration
Our project restrictions were to design with intent of using only existing technology. Without such a restriction, it would have been interesting to think about Extended Reality (XR) technology and how this could have future implications for the safe shopping experience. I would have also liked to explore how our design concept could have been made more accessible to users who have different abilities (i.e. blind, hard of hearing, etc.) and/or may need shopping assistance.
No items found.
