Case Study
Easy Grocery
Fun and fast in-store shopping
My role: UX/UI Designer
Marketing research
〰️
Competitive analysis
〰️
User survey
〰️
Personas
〰️
Wireframes
〰️
Flow diagrams
〰️
High-fidelity UI
〰️
Prototype
〰️
Mini usability study
〰️
Accessibility evaluation
〰️
Marketing research 〰️ Competitive analysis 〰️ User survey 〰️ Personas 〰️ Wireframes 〰️ Flow diagrams 〰️ High-fidelity UI 〰️ Prototype 〰️ Mini usability study 〰️ Accessibility evaluation 〰️
Why I made this project
This app has a purpose of allowing people to save time on a daily grocery shopping. Using this app shoppers can scan the barcodes of the products and pay online without using cash.
Market Research
On average, the Canadian consumer visits a grocery store 5.43 times a month, or 1.29 times a week. These visits typically last 43 minutes, excluding time spent in line to pay and commuting to and from the store.
This translates to approximately 55-60 hours of grocery shopping per year. When making a purchasing decision, consumers consider four key factors: convenience (34%), freshness (34%), price (22%), and availability (10%).
Grocery shopping can be a stressful chore for everyone. Several factors contribute to this, including planning, choosing products from a wide range of brands, finding discounts and coupons, selecting fresh produce, navigating through crowded aisles, and enduring the long lines at checkout.
Competitive analysis
I analyzed 3 most popular apps in the space - looking both at the in-store shopping and the negative app store comments to find patterns.
Pros
All apps allows users to shop by scanning QR code on a product and spend less time at the checkout.
Cons
Not free and for ‘select delivery subscribers only’ (W+, Safeway), works only in certain store chain (IKEA). You must buy weighed produce and alcohol and coupons are not applicable (W+).App may glitch (W+)
Problems from the comments
I conducted a quick survey among people who are buying grocery on day-to-day basis.
What is the most important factor you take into account while shopping for grocery?
14 participants
User survey
Problems from the comments
Initial research shows
•60% of customers want to get in and out of the store as quickly as possible
•50% of customers want to use a one-stop-shop rather than chasing the lowest price across multiple stores
•40% of households men have taken on the responsibility for grocery shopping.
Mintel Global Market Research & Market Insight Company study
Personas
I created personas based on users interviews and non-participant observation.
Time to start designing!
Once I went through all my research data, it was time to sketch out the first flows and the initial low-fidelity wireframes.
Flow Diagram
To outline all the necessary functionality I created a simple flow diagram of main tasks the user can do. One of the flows is shown below. Fail state flows were also created, but are not shown due to space constraints.
Happy Path Flow
Low-fidelity wireframes
Once the flow diagram established I started creating the low fidelity wireframes of the main flows.
High-fidelity UI Designs
Once the flow diagram established I started creating the low fidelity wireframes of the main flows.
35 high-fidelity UI designs were created
I created two different navigation patterns: a tab bar and a hamburger menu. These could be used as A/B testing in further design stages.
Alignment and grid
I picked an 8-point grid for the project and set margins for within group at 8 and 16, with margins between group 24, 32 and 48.
High-fidelity prototype
I connected my high-fidelity designs into a clickable prototype. That will allow me to test the app on a first group of users.
Prototype validation
I validated my prototype with 3 users. The prototype was tested over a zoom call, where I introduced the user to the app and asked them questions. The questions were dedicated to finding out if it is simple to scan product and to add to the shopping cart.
Study results
66% of users (2 of 3) were successful with completing the task. They quickly undestood how to add a product to the cart, but complained that there were not option to delete an item from the cart.
Prototype Update concept
Because of time constraints, I wasn’t able to run a second usability study on the updated prototype. However, I have updated it by adding a swipe option to the item card on the “Your cart” screen to delete it.
Accessibility check
The app has been evaluated for contrast to match the AA standards of WGAG. In some cases I found that the contrast can be improved.
A couple of specific examples: the product description, tags and main CTA button. The choice of colour proved to be not fully accessible. If the final version the background colour, description text colour and font weight were modified.
