Case Study: Optimizing Users' Online Grocery Shopping Experience
Role
UX Designer
Methodology
Contextual Inquiry, Competitive Analysis, Affinity Mapping, Persona Creation, Wireframing, Prototyping, Usability Testing
Overview
The digital economy exploded during the Covid-19 crisis. The lockdown restrictions, combined with a desire to avoid close interpersonal contact with strangers, have resulted in a massive increase in online grocery shopping. This project aims to identify users’ pain points, frustrations, and journeys when purchasing groceries online to create a mobile app that provides shoppers with a smooth, hassle-free experience, satisfying their everyday grocery needs.
Other Contributors
Interviewees & testers for the concept designs - Theya Ahuja, Jeena Nagrani, Twisha Rathi, Varun Bathija
Storyboarding participants - Amogh Hassija, Sarthak Bhatnagar, Saurabh Bhandari, Manasi Ghutukade
STAGE ONE
Research
Goals
This study aims to discover the pain points and roadblocks that a specific demographic group encounters while grocery shopping online / in-store.
Competitive Analysis
The mobile app interfaces of two major Indian grocery chains - Big Basket and Big Bazaar - were compared. The report outlines the main features, target audience, strengths, weaknesses, and customer perception of both brands and their associated products/services. This step was critical as it helped identify the existing market gaps and new opportunities.
Contextual Inquiry
The interviewee was asked a set of standard questions and then observed and questioned while he shopped for groceries on the BigBasket App to get a better idea of how users interact with current products and services offered by grocery store providers. Some of the challenges are summarized below:
-
Address switching isn't seamless and very glitchy.
-
The Save for Later feature only appears on the checkout page. It is confusing to use and has no real purpose.
-
The Smart Basket feature is impractical as it recommends items based on past purchases but won't allow users to curate their list.
-
It is time-consuming to search and select the same products every week/month except for one or two.
-
The home page is very cluttered. Too many sections of advertisements are often distracting.
-
The categories page is very text-heavy.
STAGE TWO
Define
Data collected from the user interview is put into data models in this phase to unpack all of the information from the previous stage to break down the problem into multiple steps and combine it to obtain deep insight into user requirements.
Affinity Mapping
First, I analyzed my research findings and consolidated all interpretations into comparable patterns and commonalities, following a bottom-up approach. An affinity diagram was employed to discover emerging trends and themes within users’ behaviors and experiences while navigating the BigBasket app, which yielded more actionable insights to take forward.
User Persona
Based on the user interview and research findings, I compiled an overview of the target users, their personalities, motivations, and pain points.
STAGE THREE
Ideate
-
How Might We assist the user in finding items more efficiently and accurately?
-
How Might We encourage users to buy fresh fruits and vegetables online?
-
How Might We reduce the users’ lead time and ensure a seamless experience with fewer clicks?
HWM Questions
UX Visioning
Based on the previous stages, I devised three scenarios –
-
Quick and Easy Item Selection
-
Buying fresh fruits and vegetables online
-
Reduced lead time
Next, I conducted a collaborative brainstorming session to capture product, service, and feature ideas. Some solutions addressing the first scenario are listed below -
- An Add to Favorites feature is to be introduced. On clicking the heart-shaped button, the respective products will be stored and displayed on the Favorites Page, accessed from the home screen.
- A Buy It Again page - accessed by clicking a button on the home screen - features past purchases and allows for quick and hassle-free selection in case of repetitive orders.
- Users will be allowed to curate their own lists. An Add-to-List button on the product card/page will store the select products in an index. All items can be dropped from the list into the cart through the Add All button. The user can access and add individual list items as well.
Storyboarding
Using ideas and scenarios from the UX Visioning session, I created the following three storyboards to highlight design ideas and better understand existing scenarios of interaction, as well as to test design concepts and hypotheses about potential scenarios.
Use Case (a) Easy Item Selection
Use Case (b) Simplifying Shopping Experience
Use Case (c) Buying Fresh Fruits and Vegetables Online
STAGE FOUR
Design & Test
Paper Prototypes
After finalizing the features of the app and a solid structure, I drew some rough ideas for the screen design to visualize how the app will appear. Hand sketching enabled rapidly and efficiently iterating on layouts.
Although there were many design opportunities, I focused on one- Quick and Easy Item Selection - to optimize usability and functionality. After reviewing the storyboard created in the previous stage, I made a list of all screens I needed to test out all scenarios.
Then I sketched a rough wireframe to map out all pages, pop-up windows, icons and other details that would be included in the low fidelity prototype.
Interpretation
I then tested the prototype through an in-person interview where I acted as facilitator and human-computer. I assessed and observed the tester’s movements and reactions as they interacted with the prototype, performed the pre-defined use cases, and asked multiple questions to determine whether their mental model matched the conceptual model.
All feedback and user notes were recorded in a tracking sheet and scrutinized to ascertain whether a feature/screen needed redesigning.
Sketching for Iteration
A significant design issue faced by the user was their inability to locate the order tracking feature/screen. New concept designs and rough sketches were generated to solve this problem using the ten-plus-ten approach. Finally, the most appropriate and feasible idea (which was creating a new screen and adding a Track Your Order button to the nav bar/hamburger menu) was selected.
UX Flow Diagramming
The user feedback was incorporated into the paper prototype, and areas that needed redesigning were built from scratch and converted into wire flows to see how they might work and impact the users' experience. Here's the flow diagram of the envisioned app idea -
Digital Prototype
An interactive high-fidelity digital prototype was designed using Figma. The prototyping functionality involves:
Navigating the home page → Finding/selecting a product → Adding to the cart → Reviewing the cart → Tracking the order
Responsive Prototype Link - https://www.figma.com/file/p32f1c7tIsA1zlulzl14R2/grocery-app?node-id=0%3A1
Usability Testing
Next, I conducted a moderated digital prototype in-person and remote testing to ensure the product was convenient and easy to navigate.
The test strategy was to understand user preferences and identify potential issues. I observed the user's behavior, body language, facial expressions, and emotions while using the app and encouraged them to think aloud as they performed the assigned tasks. I studied qualitative and quantitative data during this exercise to determine the product's usability issues.
A section of the tracking sheet with the proposed changes is shown alongside.
Future Scope
The digital prototype depicted above is only a section of the overall app. In the next iteration, I’d like to address issues uncovered during in-person and remote user testing. I’d also like to work on designing other website sections such as check-out and payment pages, recommended sections, recipe and blog pages, etc. Some other ideas I wish to explore are the following-
-
Design a solution for users to keep track of their groceries, such as what they are running out of, and have the products automatically added to their cart based on their shopping preferences.
-
Ascertaining the brand user previously purchased and had a negative experience, so it does not appear in the recommendations section again.