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?

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.

The Challenge: Current online grocery shopping methods don’t support the needs of customers with unique dietary needs, including people with non-Western diets, people with allergies, and people who practice veganism. Existing products that attempt to do this are not affordable.

The Approach: A mobile app that provides customers with accessible, customized grocery shopping experiences based on criteria including dietary choices and food politics.

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

Duration: 3 months

Main Tools: Sketch, InVision

Phases: User Research;Design Strategy; Interaction Design; Wireframing and Prototyping; Testing and Iterating; Branding and UI Design

My Role: User Researcher; Interaction Designer; UX Designer; UI Designer


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 grocery shopping;
  2. people who already engage in online shopping, but not for groceries; and
  3. people who do not yet engage in any online shopping, but are looking for alternatives to going grocery shopping in person.

Through interviews and surveys, I learned that people were not completely satisfied with their in-person grocery shopping experiences. Some common frustrations included long checkout lines, poor customer service, difficulty locating some items within stores, and the high costs of organic, ethically sourced foods. Many people would be willing to try online grocery shopping if there were financial incentives, competitive product prices, transparency about the company’s ethical practices, minimal packaging and waste produced in delivery, and quality assurance on fresh ingredients. Interview participants indicated that they had not yet found an online grocery shopping solution that met these needs, so all participants still preferred to shop in-person, where they felt that they had more control over these factors.

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.

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.

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.

Business goals mapped against customer goals.

Clear content strategy, thoughtful interaction design, and appropriate user interface design would become critical to the product’s ability to fulfill these core user needs — and ultimately, to succeed in the online grocery shopping industry.


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.

The card sorting resulted in a variety of category types. Some participants created labels commonly seen in grocery stores — such as “produce” and “baking.” Other participants created labels based on their own dietary needs, such as “foods that I don’t eat.”

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.

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.

I then designed a user flow to demonstrate how a person might navigate through the proposed product. User flows help identify points along paths where users might be faced with choices and decisions, and also critical for preventing the design of dead ends that might leave users stuck and unable to complete their intended goals.

User flow representing a sample journey of a customer seeking and purchasing vegan snacks.

I then used the artifacts outlining the proposed information architecture to begin designing wireframes of the app’s key screens.


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.

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.

Highlights from usability testing. Text version of the highlights available here.

Usability testing revealed that potential users would be interested in seeing the product focus more on customized shopping experiences for users who have specific dietary preferences. Valuable features to consider in the iteration included:

  • Options for users to indicate dietary preferences (e.g. vegan, paleo, gluten-free, soy-free) — wherein users would only see groceries that meet their dietary preferences. For instance, users who indicate that they are vegan would not be shown meats or animal products.
  • 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.

Style tile options.

A product name — Seedling — emerged from a brainstorm of concepts and terms. Users thought Seedling was a brand name that would convey growth, freshness, vitality, health and wellness, and transparency, all of which were key elements of a positive grocery shopping experience.

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.

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.

Furthermore, it would be especially necessary to design key screens that represent additional value propositions, including subscription services, cost comparison tools, and easy re-ordering. The implementation of additional features would increase the value of the product for prospective customers, and strengthen Seedling’s reputability as a product that is both uniquely considerate of customer needs and efficient.

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

Thanks for reading!

Questions? Thoughts? Interested in working together? Let’s connect at erikaharano.com.