UX CASE STUDY
Improving Grocery Search Functionality for Food Allergies
Client /
Celiacs and Food Allergy Individuals
Role /
User Experience Designer, Researcher
View Project /
https://xd.adobe.com/view/21a6dc37-826d-48de-8678-16806b934d8a-74f5/?fullscreen
Overview
As an individual with Celiac and food allergies, I have used countless delivery and curbside pickup services for groceries over the last couple of years. One of the greatest needs that many in the food allergy community have found when ordering groceries online is the ability to filter search results clearly and quickly. This conceptual case study on search result filters emulates the work that I've completed for one of my clients.
Throughout this project, I interviewed users, created user personas, and conducted an evaluation of Wegman's current website and search functionality. Then I created low-fidelity wireframes on paper to capture my quick thoughts, and translated those into Illustrator. I am working on a working prototype in Adobe XD to capture the interaction of the website.
...Where Are the Veggies?
One of the constant problems I have noticed when searching for groceries is that often things that are naturally gluten-free, such as fresh produce, do not appear in search results. When I search "gluten-free" I only get results back for things that are explicitly labeled gluten-free. One of the reasons for this is due to FDA regulations in the way that food is labeled and produced. In order for a food item to be labeled gluten-free, it must be tested and contain less than 20 parts per million of gluten. Fresh produce does not have the shelf life for that type of testing, however, there should be a way to include vegetables in search results. To combat this, I proposed to add a "naturally gluten-free" filter, which would have a notification stating that while this product has not been tested by the FDA, naturally it does not have any gluten-containing ingredients.
How Did I Do It?
I conducted a survey with individuals with food allergies or dietary restrictions to capture their feedback on issues they have with using online grocery services. From those results, I created user personas. I surveyed Wegman's current website along with Whole Foods, Giant, Aldi, Instacart, and Trader Joe's. Using the user personas, I created use cases of what a user might search for and what they would expect the desired results would be. I created low-fidelity wireframes on paper with quick sketches to get the ideas flowing. I translated those low-fidelity mockups into high-fidelity mockups in Illustrator. I am currently working on an interactive mockup to show the process of how the filters would interact with the content in Adobe XD.
Would you like to be
able to filter gluten freefoods by certification or ppm levels?
When online ordering,
do you find fresh produce is missing in your search results?
How often do you order groceries online for pickup or delivery?
Process, Process, Process...
I selected a pool of individuals with food allergies, celiac and gluten sensitivities to interview with a few specific questions and gathered their responses.
Upon seeing how many individuals stated they do not receive fresh produce back in their search results when using the filter gluten-free. I thought up the idea of including a "naturally gluten-free" filter, which would allow a user to select items that are not tested by the FDA standard at 20ppm or less, such as produce and meats. These currently do not show up, because in order for a product to be "gluten-free" it must be tested to 20ppm or less. I crafted and inquired about a follow-up question.
Would adding a "naturally gluten-free" filter be beneficial?
On first click "naturally gluten-free" filter, a warning statement would be triggered. Stating that while these products do not naturally contain gluten, they are not tested.
Gluten is in GUMMY BEARS?!
When attempting to search for gluten-free food, users expressed frustration with the level of detail they needed to know about what is truly gluten-free, and what is not. Often, companies choose not to include an ingredients list in the product photos. An example of this that a user gave was their experience ordering groceries for pickup from Walmart.com. They ordered a bag of frozen green beans from Green Giant. Walmart had written out the ingredients, but did not include a photo of the ingredient list on the packaging. In doing so, Walmart had listed: "green beans, salt, water" but they failed to include the "may contain wheat" statement at the bottom of the ingredients list. This individual happened to have a gluten detection service dog, who alerted to the green beans - indicating that the product did indeed have trace amounts of gluten. If she had known that the green beans had a "may contain wheat" statement, this user would have selected a different item.
Sinking My Teeth Into It...
I decided to focus on the way Wegmans handled its search functions. Users often found Wegmans to have the best selection of gluten-free products - yet also describe it to be one of the most difficult online ordering processes. I took a look at their existing filter options and took into account what worked well and what could use improvement.
Let's Get Down to Business
After talking with users and completing research on current processes for online grocery ordering and filtering, I jumped into low fidelity prototyping to get my ideas out on paper quickly. I didn't allow myself to self-edit, but worked through a "crazy 8s" technique I learned in my Nielsen Norman Group UX Certification to find the best concept and flush out ideas. Crazy 8s is 8 design concepts rapid-fire - typically completed in under 5 minutes.
All filters categories are on the left side, click into the topic you want to filter by
If a user clicks into "Dietary Need", they get the ability to filter certified gluten-free. Then they can specify parts per million according to recognized certifications
I also included "top 8" allergen-free, specific allergens, organic, vegan, etc in dietary needs. Each would have the ability to have a tooltip explaining more detail for those who may not know what Top 8 or Top 12 are.
In addition to continuing to work on low fidelity wireframes to show the concept for the search I am currently working on a XD prototype to show the full functionality and a high fidelity wireframe for this layout. View the prototype
