Overview

This project was a design exercise for my UX/UI design class (rather than actual work for Instacart). The assignment was to add a feature to an app/website that would enhance its usefulness. The goals of the project were to work within an existing design system and produce something that looks real. I chose to add a dietary preference feature to Instacart, an app where you can purchase items (largely from grocery stores) online and have them delivered to your house.

Instacart has basic dietary filters within very specific subcategories of foods, which vary by the store you’re shopping at, and these options disappear/reset when you switch departments, making it difficult and tedious for a user with dietary preferences to find food specific to their diet.

Additionally, Instacart’s homepage is filled with generated product suggestions that are relevant to things you’ve bought in the past, on sale, etc., but there is no filtering whatsoever on the homepage. This means that as someone who occasionally uses their website and is a vegetarian, I get recommendations for various meats and other products that I would never buy, which wastes the potential of their recommendation technology (which is actually very good at predicting items for users).

The problem: The basic filtering system is not enough for someone with dietary preferences to efficiently complete a round of shopping. How do you design a filtering solution that is sitewide, scalable, and easy to understand?

Specifications

  • Project duration: 2 weeks
  • Tools used:
    • Figma
    • Adobe Photoshop
    • Miro
    • Whimsical
    • Instacart’s “Snacks” design system

Roles

  • UX Researcher
  • UX Designer
  • UI Designer

Deliverables

  • Project timeline
  • Competitive research, secondary research, user survey
  • Persona, task flows
  • Feature roadmap
  • Style tile
  • Low- and high-fidelity wireframes, prototype
  • Usability testing and findings
  • Final mockup/prototype revision

Goals

  1. Conduct competitive research to see how other grocery websites tackle this problem
  2. Conduct user research to see how users like to use online grocery shopping websites/apps, including what they like and don’t like
  3. Design a solution that fits within the existing design system and makes sense to users

Competitive research

I started by researching other grocery shopping websites/apps. This provided a necessary baseline for the structure of the website and got me thinking about what I like and don’t like about each solution. My research was originally specific to vegan/vegetarian diets as I’m a vegetarian and I’ve heard of the same difficulty from vegan/vegetarian friends.

User Research: Planning

When determining what I wanted to learn from users to inform my design, I widened my scope based on existing filters on some of these websites, such as gluten-free, Kosher, etc. so that my design would cover all the bases.

Research objectives:

  • Understand what users want out of an online grocery shopping experience
  • Understand how users find the foods they’re looking for
  • Understand pain points that users face in this process

Research method:

  • User survey of 12 questions
  • 4 participants between the ages of 26 and 30 who have dietary restrictions and use online grocery shopping sites/apps

A few example survey questions:

  • What are your dietary restrictions?
  • Is it easy or difficult to find food that fits your diet on the website/app? Why?
  • Is there a feature or a specific page that would make it easier to find the type of food you want to buy?

User Research: Results

Key findings:

  • 1 user is vegan, 1 is vegetarian, 1 is pescatarian, and 1 does not eat meat or dairy but does eat fish and shellfish
  • 2 users shop on the website, 1 user uses the app, 1 user uses both
  • 2 users said it is mostly inconvenient to find the products they will actually buy
  • The solution that sounded like it would cover the most cases is a profile setting that only shows the user the items that fall within their selected dietary settings
  • 2 users mentioned frustration when products are not properly tagged/categorized

Based on this research and what I learned from looking at competitors, I took a linear approach to define a persona and user flows. 

Persona

To develop the persona, I took traits from each participant and inferred some similar ideas. The resulting persona covered the scenarios of my survey participants.

Task Flows

I made a task flow based on how I pictured my survey participants to best be able to find the products they want:

Then I realized I had missed something.

Initially I had interpreted one participant’s answer of no meat or dairy but fish and shellfish as “pescatarian” — but then I realized many pescatarians eat dairy, so this participant actually has their own unique diet.

I had been picturing a simple dropdown with checkboxes as is common on competitors’ websites, but the user who didn’t fit into a specific category made me rethink my whole approach. This meant that to meet their dietary preferences, I would need to have individual ingredients selectable. To see more unique diets I might have been missing in my survey, I performed secondary research.

I made a second flow to account for this:

Secondary Research

I started with search terms such as “common diets in the US” and realized that none of the competitors had a comprehensive filter that could accommodate the highest number of shoppers’ diets. I figured that if I was putting the work into designing this feature, I might as well include as much as I could — if this were being implemented in real life, it would likely need iterations based on user feedback pretty quickly after launch, i.e. a vegetarian who is also allergic to tree nuts may not be represented with the approach I had in my head. I also found some interesting statistics:

5%

A Gallup poll in 2018 found that 5% of participants were vegetarian or vegan

10%

Foodallergy.org estimates that 10% of US adults have at least one food allergy

3.4% – 5.1%

The CDC found that the prevalence of food allergies in children increased significantly from 3.4% in 1997-1999 to 5.1% in 2009-2011

36%

Market research firm Packaged Facts found in a survey that 36% of consumers identify as “flexitarian”, meaning they eat meat but also mix up their diet with vegan or vegetarian meals

This information helped me to refocus my efforts for the feature: it would need to cater to people of more diet types and combinations to be effective. (I also realized I could have done more thorough secondary research earlier in the UX process.)

Low-Fidelity Wireframes

I started by sketching some ideas for the mobile flow and thinking about how I could accomplish my goal using different UI elements like checkboxes and slide toggles. I tried a few different options but wasn’t in love with any of them.

Style Tile

I made a style tile based on the website and the Snacks design system. Unfortunately the website was inconsistent with the design system in several instances, such as text sizes and colors that were slightly different than the defined colors. In these cases, I went with what was on the website.

High-Fidelity Wireframes

I started making high-fidelity wireframes to see if I liked these selection UI elements any better with the right colors and whatnot, but still wasn’t happy with it. I looked deeper into the Snacks design system and found a “selection pill” element, which seemed perfect for my use. I had seen these before in product filtering systems on shopping websites, so I figured it would make sense in this context. I think discovering this element was my favorite part of the project because I was uncertain about my solution before I found it.

User Testing

I made a prototype with the high-fidelity desktop wireframes in Figma. Five participants aged 25-30 tested the clickable prototype in remote usability tests via Zoom. I had each participant share their screen and perform the task flow of changing the diet settings to reflect an organic vegetarian diet. I took notes on their behaviors and asked them questions about why they did things in certain ways, e.g. “how did you decide to change the diet settings this way?”

Results:

  • All users were able to complete the task flows, though some had difficulty navigating through the settings menu
  • 1 user initially didn’t see the hamburger icon in the top left of the homepage
  • 1 user asked whether a selected button indicates that it would be included or excluded from results
  • 3 users mentioned it would be helpful to have a “vegetarian” or “vegan” button
  • All users appreciated the functionality of this feature and had ideas for additional features

Affinity Map

With the notes of my observations from user testing I created an affinity map in Miro to easily visualize suggestions and feedback. There were some important issues that needed to be solved.

Final Result

After incorporating some suggestions, fixing the issues, and an iteration of polishing, I was happy with what I ended up with. I ended up adding a link on the homepage that makes it easy to change your dietary settings. I also added helper text to the modal options and created buttons for vegan, vegetarian, and pescatarian diet presets. Click here for the Figma prototype (desktop).

Potential Next Steps

  • Do another round of user testing with more participants to see if any issues persist
  • Make a prototype for mobile
  • Come up with more ways to make it even more clear about what is being included or excluded

Conclusion

I think this is a solution that works for the problem, but I’m not sure whether the majority of people would understand how these selection buttons work, so I think further testing would be a good idea. Overall, I think it is a crucial feature for online grocery shopping. One of my user testing participants said “I can’t believe this isn’t already implemented,” which shows the need for something like this to help shoppers find what they want quickly and also easily explore suggested products.