UX Case Study: creating a more niche grocery shopping experience

How might we support people in finding and buying the groceries for their specific dietary needs in a time-saving, cost-saving way?

erika harano
May 24, 2018 · 8 min read
Image for post
Image for post
As part of research for the project, I tagged along during a person’s grocery shopping trip to learn more about what they look for, what they encounter, and what they hate about grocery shopping.

Goals:

  • Identify potential target users for a new online grocery shopping product; learn their motivations, needs, and attitudes about grocery shopping
  • Identify challenges and frustrations that people encounter in grocery shopping, both in person and online, as well as opportunity areas for improving the shopping experience
  • Design a research-informed solution that addresses people’s specific needs and goals for a satisfactory grocery shopping experience, with a focus on clear interaction design and user interface design
  • Identify and design the desired branding for the new product to enhance the user experience

The Design Brief

There are a number of online grocery shopping platforms on the market which aim to provide busy people with a time-saving, cost-effective way to purchase the groceries they want. However, online grocery shopping products often take away customers’ ability to select their own fresh produce, and many online grocery services do not adequately support people with very specific dietary needs. For example, customers with gluten allergies, vegan customers, paleo customers, and customers who only purchase local organic produce are often unable to find exactly what they need when trying to buy groceries online. This project sought to address these challenges by proposing a research-informed grocery shopping experience for specific dietary needs.


Phase 1: User Research

Primary Research: Surveys and Interviews

I began research by conducting targeted user surveys and interviews with people in order to learn more about their experiences with grocery shopping, both online and in person. Through initial secondary research, I identified three groups of potential target audience members to recruit for surveys and interviews:

  1. people who already engage in online shopping, but not for groceries; and
  2. people who do not yet engage in any online shopping, but are looking for alternatives to going grocery shopping in person.
Image for post
Image for post
Quotes from user interviews. Text version of the quotes can be found here.

User Personas

Through the research phase, three key user groups emerged: the busy single parent, the activist with a food allergy, and the source-conscious recent college graduate. Each user group had specific beliefs, attitudes, and goals for grocery shopping, but they all shared some common characteristics, including the willingness to try new grocery options, the desire to save time and money, and the desire to eat healthy, nutritious foods.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
The first persona represented a recent college graduate with a passion for local food and food justice.

Secondary Research: Competitive Analysis

I also conducted a competitive analysis of three popular online grocery shopping platforms: Instacart, Peapod, and Jet. Through the analysis, I identified common features that the competitor products had, as well as gaps and opportunity areas for innovation. Commonly existing features included product search, marking products as favorites, and free delivery, whereas missing features included item ratings, item recommendations based on customer data, and saved shopping lists.

Image for post
Image for post
Screenshot of competitive analysis. Full spreadsheet can be viewed here.

Design Strategy

I synthesized research findings to develop a matrix comparing business needs against customer needs. In order for the business to meet customer needs, it would need to provide a time-saving, wallet-friendly way to purchase fresh, high-quality foods and ingredients, and to adequately meet customers’ unique needs, especially customers looking for culturally specific foods, allergen-safe products, and affordable local items. Many people are willing to try online grocery shopping, so long as online options meet their specific dietary needs, their budgets, and their ethical values, including environmentally sustainable business practices and fair wages for employees.

Image for post
Image for post
Business goals mapped against customer goals.

Phase 2: Interaction Design

Card Sorting

Grocery shopping offers plenty of ways to organize contents; while there are many patterns in the ways that grocery stores categorize and store products, there is no universal solution. I conducted a card sorting exercise to learn how people might expect to see products arranged in an online grocery shopping experience, in order to design interactions that would meet customer expectations of finding products efficiently and intuitively.

Image for post
Image for post
Image for post
Image for post
Screenshot of card sorting results.

Information Architecture: App Map and User Flows

I used the core groupings that emerged from the card sorting exercises to generate an application map proposing initial information architecture.

Image for post
Image for post
The app map (above) outlines the proposed app architecture, with a focus on the ability to browse, search, and filter by culture, dietary need, local sources, and special deals.
Image for post
Image for post
User flow representing a sample journey of a customer seeking and purchasing vegan snacks.

Phase 3: Wireframing and Prototyping

I reviewed my user flow and selected six screens to sketch with pen and paper. I then used the sketches to guide the design of mid-fidelity, digital wireframes of mobile app screens.

Image for post
Image for post
Some mid-fidelity wireframes of the app.

Phase 4: Usability Testing

Once I had designed a set of prototypes, I was ready to conduct usability testing to evaluate how users would engage with the proposed product. It was important to test with mid-fidelity, greyscale wireframes to gather honest, critical feedback from potential customers, and to solidify the function of the product before integrating visual design.

Image for post
Image for post
Highlights from usability testing. Text version of the highlights available here.
  • A clear option for quickly re-ordering from past purchases (with small modifications as needed.)
  • A subscription grocery service in which users select their dietary preferences and receive automatic deliveries of select goods that meet their preferences.

Phase 5: Logo and Branding

Based on both the initial user research and the usability testing showed that people wanted a product that was convenient, easy to use, reliable, and trustworthy. Users wanted to feel that the new product was truly helping them by making their grocery shopping experiences simpler and more enjoyable, and wanted a product that seemed to care about customer satisfaction over revenue. I designed three style tiles highlighting variations for the product’s visual design, with an emphasis on simplicity, reliability, and clarity.

Image for post
Image for post
Style tile options.
Image for post
Image for post
Updated style tile, including logo.

Phase 6: UI Design

With a plan for the product’s branding and visual design, I iterated on mid-fidelity wireframes to design high-fidelity mockups of onboarding screens, the home screen, and product screens. Based on feedback from user testing into the onboarding screen, I designed additional screens where users could indicate dietary needs during onboarding and subsequently see products according to their preferences.

Image for post
Image for post
Sample high-fidelity composites of onboarding screens.

Key Takeaways

This case study represents the start of a bigger design process for the development of this online grocery shopping experience. It would be necessary to conduct additional usability testing with multiple user flows in order to better understand how people engage with the product, identify more features to improve, and design an even more user-friendly product.

Image for post
Image for post
Sample high-fidelity composites of dashboard and product description screens.

about erika harano

erika harano (she/they) uses design co-create a more just, interconnected, and inclusive world. erika is an independent designer, design educator, & strategist who works with individuals & teams looking to reshape design.

everything is design(ed)

examining power in, and of, design

erika harano

Written by

independent designer + educator + facilitator. designing meaningful, multimodal experiences that inspire critical thought and action. www.erikaharano.com

everything is design(ed)

examining power in, and of, design

erika harano

Written by

independent designer + educator + facilitator. designing meaningful, multimodal experiences that inspire critical thought and action. www.erikaharano.com

everything is design(ed)

examining power in, and of, design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store