Adding dietary options to online ordering systems for groceries

During the pandemic the use of online ordering of groceries exploded. Now that things are getting somewhat back to normal, many people are continuing to use these services. I wanted to understand what attracts people to online grocery shopping and what could be done to improve their experience.

Initial Interviews

Five individuals were interviewed on how they used online applications for grocery shopping and what pain points they experienced.

Subjects were chosen upon familiarity with ordering groceries online and from a diverse background. Subjects participated in a 15–30 minute virtual interview to discuss their history with ordering groceries online. The interviews were loosely structured, often delving deeper into the individual subject’s experiences and frustrations.

Among the annoyances unearthed during the interviews, all subjects reported frustration with the ability to indicate acceptable substitutions when an item is unavailable, with several indicating frustrations with the replacement product recommended by the shopper. For example one subject, a vegetarian, was ordering vegetarian chili, and the shopper recommended a replacement product that contained meat.

Scope and Deliverables

Through user research and usability testing, I created an interactive prototype of functionality that could be added to online ordering systems to accommodate the needs of those specialized dietary needs.

Tools: 

  • Axure

  • diagrams.net

  • Keynote

  • Photoshop

  • Sketch

  • Zoom

Process & Methodology:

  • User Interviews

  • Wireframing

  • Interactive Prototyping

  • Think-Aloud Usability Testing

Deliverables:

  • Low Fidelity Wireframes

  • High Fidelity Wireframes

  • Flow Chart

  • Interactive Wireframes

  • Usability Report

The Process

  • Add two new filters by which users could narrow their search results, dietary lifestyle and allergens. A user would be able to narrow their search results by these dietary restrictions. These filters will be set per search result, but may be set globally on the new preferences page.

    high-fidelity wireframe
  • Create a new flow for specifying product substitutions. The user would be able to create a prioritized list of acceptable product substitutions as they are ordering a product, as opposed to during checkout. If the product has been favorited, those substitutions are saved in the user profile.

    high-fidelity wireframe
  • A new page will be added to the users account settings, preferences. On this page a user can define their preferred dietary lifestyle and any allergens they may have. These filter selections will be turned on by default when showing search results, but maybe turned off if, so desired, on that

    high-fidelity wireframe

Sketches were used to create low and high fidelity wireframes in Sketch, and then an interactive prototype was created with Axure.

Usability research was conducted with three participants using think-aloud methodology. All participants were selected for their experience ordering groceries online. Participants were interviewed using video conferencing over a period of 20–30 minutes. The same set of tasks were used for each participant.

The results and feedback were very encouraging, with only minor adjustments needed to address user concerns.