App Design
Spring 2017

Seedling: A Unique Grocery Shopping Experience

Seedling is an online grocery shopping experience that caters to specific dietary needs.

READ ON MEDIUMVISIT WEBSITE

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

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.

Set of four boxes showing quotes from research participantsc
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.

Document showing a person in their 20s named Taylor, who represents a target audience group. The document includes a bio and personality information about this hypothetical character.
The first persona represented a recent college graduate with a passion for local food and food justice.
Document showing a person in their 20s named Alex, who represents a target audience group. The document includes a bio and personality information about this hypothetical character.
The second persona represented a gender nonconforming activist with a food allergy.
Document showing a person in their 30s named Melissa, who represents a target audience group. The document includes a bio and personality information about this hypothetical character.
The third persona represented a busy working parent.

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 a spreadsheet showing a set of online grocery products mapped against product features that they have.
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.

A matrix with four boxes representing business needs mapped against customer need.s
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.

Index cards with names of grocery items arranged by category on a wooden floor.
Card sorting results from one participant.

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 spreadsheet showing categories of grocery items, with label names and groupings determined by research participants.
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.

Diagram showing the proposed information architecture, including page structure and hierarchy.
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.

Task flow diagram showing a sample pathway a person might take on the app in order to purchase groceries.
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.

Set of six mid-fidelity mobile wireframes depicting home screen, product category screen, and product detail screens.
Sample mid-fidelity wireframes.

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.

Set of three boxes showing synthesized usability testing findings in three categories: what's working, what could improve, and what's next for iteration.
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.

Set of three style tiles showing options for  color palette and typography.
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.

Single style tile document showing final logo and wordmark, typography, and color palette. Colors chosen include a deep pink, pale green, grey, and deep seafoam green.
Final style tile.

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.

Set of six high-fidelity mockups showing key onboarding screens, where people state dietary needs and 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.

BACK TO PROJECTS
Connections are nice

Get in touch.

Whether you want to bounce ideas for a project, want to talk about design and decision-making, or just want to say hi, I'd love to hear from you.

CONTACT ME
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.