Sitewide Dietary Filtering Feature for Instacart

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. I chose to add a dietary preference feature to Instacart, an app where you can purchase items 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.

The problem: The basic filtering system is not enough for someone with dietary preferences to efficiently complete a round of shopping. Shoppers need an intuitive way to filter products in order to more easily find products that meet their dietary preferences.

Project Roadmap

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.

Each grocer I researched had a different way to find the vegetarian/vegan foods I was looking for, some easier than others. None provided me with an easy, complete way to find all the vegetarian/vegan foods that I wanted to find. It was worth also noting that I was conducting this research around Thanksgiving, and there was no easy way to find vegetarian/vegan foods within the curated seasonal pages.

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.

A few example survey questions:

• What are your dietary restrictions?
• Is it easy or difficult to find food that fits your diet on your preferred grocery shopping 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:

• One user was vegan, one vegetarian, one pescatarian, and one does not eat meat or dairy but does eat fish and shellfish
• Two users said it is mostly inconvenient to find the products they will actually buy
• Two 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 distilled them into one hypothetical user. The resulting persona covered the scenarios of my survey participants.

The Online Grocery Shopper

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 had their own unique diet.

I had been picturing a simple dropdown with certain diets (i.e. vegetarian, vegan) as is common on competitors’ websites, but the user who didn’t fit into a specific category made me rethink my whole approach. I realized that there were likely other diets that my solution should include — for example, what if a vegetarian has a specific food allergy? This meant that to meet their dietary preferences, I would need to have individual ingredients selectable. I made a second flow to account for this:

I decided to conduct secondary research to get more information on diets.

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 all shoppers’ diets. I also found some interesting statistics:

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 Instacart’s “Snacks” design system. Unfortunately the website elements were inconsistent with the design system specifications in several instances, such as text sizes and colors that were slightly off. 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 correct colors and visual characteristics, but I still wasn’t happy with the design. 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.

Usability 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
• One user initially didn’t see the hamburger icon in the top left of the homepage
• One user asked whether a selected button indicates that it would be included or excluded from results
• Three 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 capabilities/new 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).