Shop Smart
Overview: Shop Smart is a grocery shopping and delivery app that aims to eliminate some common complaints of many other online grocery shopping experiences. By focusing on providing an efficient and accurate shopping experience, Smart Shop ensures customers can find their items quickly and have peace of mind that they will have the items they need when it’s time to throw dinner together.
Client: N/A
Roles: UX Researcher, UX Designer
Methods: Directed Storytelling Interview, Think Aloud Usability Test, Affinity Diagramming, Wire framing, Prototyping
Tools: Figma, Google Slides
Deliverables: Research Report, Wireframes, Clickable Prototype, Usability Report
The Problem
The experience of shopping in person at grocery stores is challenging for many people, for a variety of reasons.
Whether someone has a physical disability that makes in store shopping difficult or impossible, or they simply dread the meandering through crowded isles and dodging other customers after a long day at work, many people need an alternative to in person shopping.
Grocery delivery apps aim to solve this problem, but they aren’t without flaws.
The use of grocery delivery Apps soared during the Pandemic, and many of us now have experiences, both good and bad, with using these services. I have my own hypothesis, based on my experiences and that of friends and family. As we know, good design comes from thoughtful research, so thats what I set out to do.
Research Revealed
Research Method: Directed Storytelling
To truly determine my users’ needs, I began with Directed Storytelling Sessions. Interview participants (3) were asked to tell about a time that they used an app for delivering groceries. I included open ended questions that probed the user to speak in more detail about their experiences, how they felt, and what they need. Sessions were recorded and notes were taken to aid in the synthesis process.
By creating an affinity diagram, I was able to discover patterns and gain insights into the common themes among my users’ experiences.
Insights: Efficiency & Easy Navigation
Users complained of difficulties while navigating the apps and finding the groceries they needed. Some stated that while shopping from their couch was nice, it still took significant time to search and add each grocery item they needed. Unintuitive navigation sometimes further lengthened the shopping experience and added unnecessary frustration.
Insights: Accuracy & Communication
Users shared that they stopped using grocery delivery altogether due to incomplete and/or incorrect orders. Having to make a trip to the store to pick up a missing item defeated the purpose of paying for delivery in the first place.
User Quote about communicating with the shopper:
“Usually you can message with the person doing the shopping, but half the time I’m running around and I miss the opportunity because I didn’t notice my order was being shopped. It would be nice if there was a super obvious way to know your order is being shopped, if there’s any problems and easily talk with your shopper in cases where things are sold out or something”
User Goal
Through the synthesizing process I was able to draw out the most common and important themes among their experiences, to create a user goal.
My user is a busy, working adult who wants to save time and effort by efficiently and accurately shopping for groceries online in order to feel happier and less stressed with more time in the day to accomplish other tasks and enjoy hobbies.
Wireframes & Prototypes
Design: Sketched & digital wireframes
I started with some brainstorming, creating a list of what screens are important in a grocery delivery app. Keeping the goal in mind of efficiency and accuracy, I began creating sketched and digital wireframes that included components that would:
Help customers quickly find the groceries they need (Efficiency)
Easily add them to their cart in bulk and check out (Efficiency)
Know when their order is being shopped (Accuracy)
Easily communicate with their shopper to prevent missing items or discuss solutions to problems (Accuracy)
Design: Architecture Diagram & Clickable Prototype
While preparing to create my clickable prototypes, I began thinking more deeply about the path my user would take as they navigated through their grocery shopping experience. Creating an architecture diagram helped me determine what additional screens would be needed, the content of those screens and the overall organization of the app.
Evaluation
Think Aloud Usability Test
Think aloud usability testing was conducted to determine the usability of the app.
3 test participants (1 in person, 2 on zoom)
30 minute sessions (approximately)
Users shared thoughts aloud while navigating app & completing tasks
Sessions were recorded & notes were taken
Users liked the “quick shop” options on the main screen such as “saved recipes”, “find new recipes” and “frequent items”
Evaluation Results
Users disliked the number of buttons on the main screen & the inability to scroll as they expected.
“It’s a lot of buttons and a lot to read”
Users were also unsure of the app’s purpose upon viewing the main screen.
Users liked the ability to quickly check the needed ingredients and then “add to cart” at the bottom (in bulk)
Users disliked the checkboxes themselves. 2/3 users didn’t recognize them as checkboxes and instead went straight to the qty. drop down.
Users liked The ability to add instructions and choose a backup item prior to the order being shopped.
Users disliked the overall design of the screen and felt overwhelmed.
Users liked the prominent (pop up) message that their order was being shopped.
They liked the options to manage their order or message the shopper.
Users disliked the X button, as they felt unsure if they clicked it whether they could get it back.
They felt unsure about how to tell if they had a new message from the shopper.
Revised Solution
From the revised main screen, users can more easily identify the purpose of the app through use of a logo, background image and view of food items. They are also able to scroll for food on the main page.
The revised cart is simplified and balanced through better use of white space and hierarchy.
The revised recipe item page has smaller check boxes with black “select” text below to more clearly indicate a check box
The revised pop up screen has a minimize icon v. the X, indicating more clearly the ability to review it.
Shoppers see a green indicator showing the number of new messages.
Revised Clickable Prototype
Next Steps & Learning
Next Steps
With additional time, I would like to create additional screens and advance the clickable prototype to include other functions, such as searching for and selecting a new recipe. I would also like to run additional usability tests to confirm the success of the revised changes.
Learning
Grocery apps are an important and convenient option for many people. For them to properly serve the community, they need to be intuitive, efficient, and provide proactive opportunities to ensure an accurate order delivery.