Case Study: Conceptual Grocery Store App
How to analyze and approach a saturated market with an appealing, stand-out product.
Studying the competition: their successes, failures, and what defines their brand.
Performing contextual inquiry on users: how do real people use real products?
Observing how users interact with prototypes: what’s working and what’s not.
Building a product: how does the user influence the creation of the product?
Team
(Myself) Daria Zadorozhnaya
Research & development
User Testing & Interface
Prototyping
Type
UC Berkeley Extension Course Project
Year
JAN 2023 - APR 2023
What Comes Before Launch
Before I could actually put my own product out into the world, I needed to learn about several key factors:
What is already on the market?
How do users interact with those and how would my own be the same or any different?
What’s the draw of my product versus what is already established and known about?
What makes my competitors successful and what can I learn from that?
What are users complaining about and how do I avoid it for my own product?
The Timeline
Week 1
Competitive Analysis
Week 2
Contextual Inquiry and Stakeholder Interviews
Week 3
Affinity Diagram and UX Persona
Week 4
Storyboards & UX Visioning
Week 5
Paper Prototype
Week 6
Interpretation and Redesign
Week 7
Build and Test a Digital Prototype
Week 8
Annotated Wireframes
Week 9
Final UX Resport
Weeks 10+
Iterations and Improvements
01 Scoping Out the Competition: Competitive Analysis
Before I could begin to plan my own app, I needed to understand what I was going up against. I started by conducting a competitive analysis on two major brands, their websites, and their respective delivery services. I broke down some key features, advantages, and disadvantages, and the public opinion for each.
Competitor 1:
Safeway Shopping Website and Delivery Services
Features:
Emphasis on coupons and deals
Ratings for each product
Nutrition table and other product information
Customer sets the time and place for delivery
The Appeal:
Saves time, energy, and travel costs
Greater selection online than in-store
Convenient
Minimizes exposure to Covid-19
Advantages:
Responsive and organized website
Many more options available online
Disadvantages:
General skepticism regarding grocery quality
No guest checkout, have to make an account
Online reviews are highly critical and openly discuss poor service experiences
Customer Perception:
Website: 1.73/5 stars
Delivery: 1.5/5 starsComplaints about a faulty coupon system
Inaccurate prices at checkout
Website responds slowly when adding to cart
Missing items from delivery
Products arriving in poor condition and/or rotten
Bad customer service experiences
Competitor 2:
Whole Foods Website and Delivery Services
Features:
Weekly sales advertised
Recipe logs and articles about meals
Emphasis on food quality and standards
Customer sets the time and place for delivery
The Appeal:
Saves time, energy, and travel costs
The organic, “healthier” option
Convenient
Minimizes exposure to Covid-19
Can set up recurring delivery service
Free delivery on $35+ orders
Advantages:
Website has a strong graphic identity
Increased chances of customer retention
“Healthy” is a strong branding tool
Disadvantages:
No general prize ranges, individual to location
Have to login with an Amazon account to view other locations and their prices
Expensive, both in practice and by reputation
Customer Perception:
Website: 3.43/5 stars
Delivery: 4.5/5 starsRecent reviews indicate a downward trend in product and delivery quality
Customers like organic and allergy-friendly options
02 Watching the Users at Work: Contextual Inquiry & Stakeholder Interviews
While I could find as many anonymous reviews online as I liked, I needed to witness an actual user attempt to navigate online shopping if I was going to truly understand their pain points and moments of success. I recruited Bryce, a 26-year-old graduate student attending the University of Oklahoma, who had no previous experience with online grocery shopping. By watching him interact with and attempt to carry out his normal shopping through the Walmart website, I was able to observe his unbiased and genuine reactions to his experience; with all the bumps and bruises along the way.
Contextual Inquiry Highlights:
User was immediately caught off-guard by too many options presented at once.
User noted that there were too many additional steps, such as having to select a department rather than immediately being taken to “shop all”; and that the departments he did explore did not align with his expectations.
The user interface loaded slowly, and the information architecture was tedious and “clunky” to navigate.
Frustrations emerged as it took too long to find what he was looking for.
User noted that there were no clear or accurate images for any of the products, which sowed doubt and skepticism.
User questioned how he was supposed to examine the quality of any of the goods he was receiving.
When attempting to check out, the website prompted him for his email 3 separate times.
“I don’t know how the experience can be improved on enough to get me to use it. It feels like it took up more time than it saved, it costs more, and I ultimately don’t even know what I’m getting. Seems easier to just get it in person.”
Stakeholder Interviews
In addition to the user’s perspective, I also wanted to approach the product from how it would be presented to stakeholders and subject matter experts (SMEs). I considered their wants, needs, what levels of management might need to be consulted, and what kinds of questions would need to be asked in order to cover as many concerns and pain points as possible.
-
Firstly, I would make sure to clarify the measurements of success for the product so that everyone is on the same page.
Extending the offer to observe user-testing is a very important opportunity for further understanding, but I would also make sure to first explain the processes involved and correct any preconceptions or misinterpretations they might have regarding the studies or participants.
Finally, I would also invite them to voice any questions, concerns, or specific points of interest that they would like explored during testing.
-
Before I can begin suggesting changes, it’s critical for me to understand the current arrangements and policies for their brick-and-mortar locations, curb-side pick-ups, and delivery services. This would help for me to better plan future implementations of new product without breaking or overwhelming what’s already in place.
Furthermore, in order for these services to be supported and carried out properly, I need the cooperation of these employees; which I am much more likely to get if they are consulted beforehand on what’s to come and how to best consider them during the process. With their expertise, new ideas can emerge as well.
03 Who is the User and Why: Affinity Diagrams & Personas
I then created an affinity diagram to further break down my user’s process of online grocery shopping and understand his steps, pain points, and habits. I especially noted:
Key events.
The regularity of certain actions.
The drawbacks of the experience as voiced by Bryce himself.
Using these, I also crafted a persona for further reference in the project. Skeptical Sean was created to represent those who would need to be won over, who were already set in their ways and found the whole experience daunting and tedious rather than a time-saving and convenient alternative.
Skeptical Sean
26 / Norman, OK
“Graduate Student on a Budget”
Biography
Sean has a million things to do and little time to do them. While working through a double masters, he needs a quick and easy way to carry out the bi-weekly grocery run for himself and his fiancee without hiking up the costs. He relies primarily on look and feel to make his food choices, and gets impatient when technology offers him three steps for what he’d rather do in one.
The shopping list guides but doesn’t control his choices.
Meal planning is a must, with new recipes every time.
Goals
Get groceries without breaking the bank.
Have a pleasant experience out of the house.
Minimize frustrations.
Find everything that’s needed for that trip’s meal plan.
Save some time, money, and mental energy.
Motivations
Budget
9/10
Convenience
8/10
Frustration
5/10
Experience
6/10
Taking a Break
3/10
“Why is everything so over-complicated? It’d be easier to just go to the store.”
04 Personas and People: Storyboards & UX Visioning
Skeptical Sean was then put to work when I crafted 3 storyboards to represent the persona’s potential uses of the grocery app. These included:
Planning an average grocery trip.
Planning groceries for an event.
Trying to order groceries online.
To gain some more outside perspectives, I also decided to do some UX Visioning. For this I met with Bryce again, this time accompanied by his fiancee, Annie. I presented them with two scenarios: #1 “Meal planning for a special event” and #2 “How do you plan your shopping in there being no food left in the house? (No cans, pastas, etc.) and asked them to consider some possible solutions. I sketched along as we went, providing some illustrations to accompany their answers.
This was especially valuable, because it allowed for me to gain a different perspective of the app and how it could ptentially be used. For example:
New reasons as to why people might choose online shopping.
The desire for more meal-prepping features to be implemented into shopping apps.
05 From Concept to Paper: Paper Prototyping
To effectively begin the prototyping process, I first created a “wireflow” (a series of wireframes connected together by arrows in the spirit and understanding of a user flow). This helped me to understand:
What basic frames I would need to create for user testing.
What scenarios I could present to my participants.
And how different screens could interact with one another.
From there, I crafted an outline of a phone for added effect and drew on different sheets of paper that I could switch out in response to certain scenarios and user input to simulate the experience of using a real app on a real phone.
I made screens representing the home page, different categories, individual products, the cart, selecting delivery options, and more. Then, I recruited a new user for testing and recorded their feedback.
06 Putting Paper to the Test: Interpretation & Redesign
This initial testing with the paper prototype provided invaluable feedback on the experience. The user was able to point out a number of pain points, particularly in regards to the navigation and sizing/location of certain features. I kept track of all of these through careful documentation and corrected each error in my next iteration: the digital prototype.
Some issues uncovered this round:
Scenario:
The user gave two options (to add more of added items to cart without leaving the page): One being to manually change the numbers by selecting it and then entering the desired amount. The other being to use the plus and minus located next to the numbers.
Solution:
Make the + and - icons more prominent, as they took the user a minute or so to locate. The number can be made more prominent as well.
Scenario:
The user successfully indicated the respective buttons for viewing delivery information and asking for assistance.
Solution:
Sizing and design of these options may be altered going forward.
Scenario:
The user indicated the map on the screen when asked how she would view the store location.
Solution:
Sizing of the map might be played around with.
07 Back to the Digital Drawing Board: Build & Test a Digital Prototype
Next, I moved from paper to Figma. I tried to fix all of the issues that were pointed out to me in the previous round of user testing, especially trying to clean up the visuals and allow for an easier navigating experience. My testers were now succeeding in the following tests: creating an account/signing in, navigating categories, finding a specific item and adding it to the cart, and editing the cart itself.
Some issues uncovered this round:
Users were confused that account creation and/or signing wasn’t the first step.
The options for username and password recovery were missing.
Header for “Categories” was not an obvious link.
I didn’t account for users trying to remove items from the cart by lowering the amount of the item to zero, rather than just clicking the “remove” option.
Needed more options for backtracking and returning to the home page.
Quantities are missing from the product page, and the ability to adjust them.
08 Building up the Prototype Further: Annotated Wireframes
With another round of feedback, I was then able to translate my low-fidelity wireframes into a mid-fidelity set. For these, I focused on three key screens for critical success: the product screen, signing into the app itself, and interacting with the checkout. I carefully documented what I changed and why in order to make a more successful design.
To Summarize:
This app still requires a great deal of work before it can be called a final product suitable for market release, but the experience and information it provided me with in regards to research, user interact (in both observation and testing), and how to put feedback into practice are invaluable. Trying to release a product into an existing, saturated market isn’t a simple task, and it requires a significant amount of preparation and planning in as many fields as possible.
Outcomes
A Figma (digital) prototype that allows for free-form exploration of the app.
Critical paths include:
Selecting items and viewing their information.
Adding new items to the cart.
Editing the cart in various ways.
Completing the purchase.
Selecting the method of product pick-up or delivery.
UX elements and deliverables.
Improvements in:
Using Figma.
Using UX methods effectively.
Creating paper prototypes and translating them digitally.
What I Learned
First-hand experience with a number of UX methods. This includes competitive analysis, contextual inquiry, affinity diagrams, crafting personas, storyboarding for UX, visioning, prototyping on different fidelity scales, wireframes, and more.
How to use Miro to create deliverables.
How to use Figma to create deliverables and prototypes.
Further understanding of how to interact with users and interpret their wants, needs, frustrations, and obstacles for using the product.
What Comes Next
Further improvement to the digital prototype, with incorporation of the rest of the project into the new style represented by the annotated wireframes.
Presenting said updated version for more user testing until the product is easy to navigate, helps users complete tasks, and provides a satisfying experience.