Grocery Gateway:
Improving the My Lists Function

This project was a collaboration between the online retailer Grocery Gateway and the UX program at Humber College to learn how we could improve the user experience for specific users of the site. It took us from conducting research to developing and testing prototypes.

My specific contributions to the project were:

  • Interviewing and conducting a usability test for two users of the site
  • Coded transcripts from interviews
  • Worked with my team to create an affinity diagram of qualitative data
  • For two of the ideas we had, I sketched ideas in pencil, created task flows, and wireframes for mobile, tablet, and desktop versions of the new features
  • After discussing all ideas with team, returned to the two I was working on and created high-fidelity prototypes for mobile, tablet, and desktop
  • Took lead in developing a test plan for all our prototypes that I and other team members created
  • Took notes during usability tests
  • Collaborated on the creation of feedback grid to assess our prototypes
  • Created a presentation with the team, and presented the new information to stakeholders


Tools used for this project:
  • Quicktime for creating screen captures of usability tests
  • Miro for affinity diagramming with the group
  • Google Slides for collaborating on presentations
  • Sketch to create task flows, wireframes, and high-fidelity prototypes
  • Tobii eye-trackers during prototype testing

The Challenge
How might the My Lists function on GroceryGateway.com be re-imagined in a way that allows users to shop in an efficient manner while exposing them to new products and moments of inspiration leading to increased incremental sales and brand loyalty?

The Design Process
The process our team followed went through five phases: inspiration, synthesis, ideation, prototyping, and solution.

Header for inspiration phase
Early User Observation
Grocery Gateway has compiled a number of statistics about their users that helped inform our inspiration phase:
  • According to satisfaction surveys, the number one reason customers use Grocery Gateway is convenience. 65.8% of customers cite this as one of their reasons for staying.
  • When it comes to where users find the items on the site they want to add to their cart, 39% of items are found through the search bar, compared to 8% from the My List function.
  • 65% of their users shop using a desktop browser, the remaining 35% split between a mobile browser and their mobile app.

Personas
Grocery Gateway already has several personas that make up their customer base. During the interviewing process, we talked to users that represented two of these personas. The motivations, goals, barriers, and likes of each persona helped inform the later solutions we came up with during the ideation phase.
 

Research Questions
The next step in our process was going to be 1:1 interviews with users of the site. Before we did this we wanted some research questions to help us focus our research and later analysis. These were:
  1. What are the pain points/frustrations/barriers of making lists?
  2. What goals and motivations do people have when building lists?
  3. How do people build their My Lists?
  4. Where do people go to find inspiration and new ideas?

User Interviews
We met with three users of the site in one day. A script was developed with a series of questions and scenarios for the users to work through. We took screen capture and audio recording for later analysis. I moderated two of the sessions myself, while colleagues took notes. (It should be noted that there were more interviews done with other students at Humber, data we would later have access to.)

Header for synthesis phase
Findings in Research Interview

Using data we coded from transcribed interviews, our group began using this data to create an affinity board. Using the application RealTimeboard.com (so we could work remotely), we put all our coded data points into their respective categories. Then we began to re-organize the data into themes with consideration of what our original research question was.

Screen cap of an affinity board, looks like many multi-coloured sticky notes on a whiteboard

From these themes, we came up with 10 insights about the users of Grocery Gateway:

  1. List users will start their grocery shopping with their My List
  2. List users still use the search and categories to finish their shopping cart
  3. Users will get inspiration for what to add to their cart or lists from the Grocery Gateway lists, e.g. holiday essentials, or cart starters
  4. Users also get inspiration from outside sources like social media or recipe sites
  5. List users come up with work arounds for out of stock items
  6. Lists are used as an inventory by users of the My List
  7. Users keep different lists for different occasions or purposes
  8. Family is an influencer of purchases
  9. Convenience is the major motivator of these users for using Grocery Gateway
  10. Users feel annoyed when items are out of stock

Header for ideation phase
Executive Research Summary

At this point, we prepared a presentation with all our findings at presented it. This included four recommendations for improving the My List functionality—ideas that we would sketch out and prototype.

An important part of presenting our findings was providing direct quotes from the participants we interviewed, as well as video/audio clips of them using the website to reinforce our insights.


Wireframing Mockups

During the synthesis phase, we came up with some recommendations. Each group member took some of the ideas to sketch out. I started by sketching some of the ideas, to add functionality to the site's search bar, and being able to add to large pre-made "Cart Starters" to a user's personal list.

Pencil sketch wireframe on graph paper with blue pencil sitting on paper

I decided at this point that the ideas I was working on would benefit from a task flow before doing a digital wireframe, to better understand the steps each prototype would require. It helped flesh out the idea more than the pencil sketches.

Task flow being designed in Mac OS computer window

Lastly, I created some digital wireframes for a responsive website (desktop, tablet, and mobile) using Sketch as a last step before prototyping. As a team, we went over some of these ideas, and made some changes.

Wireframes being designed in Mac OS computer window

Header for prototype phase
Digital Prototyping
We created high resolution prototypes for usability testing. This was also done in Sketch, so we could use the built-in prototyping functionality.

At this point, I took the digital wireframes I did and began turning them into hi-res prototypes for desktop, tablet, and mobile websites. The prototype was developed in Sketch, but I pulled actual graphics from the website and mimicked the look using photoshop to give the testers as close-to-the-real-thing prototype as I could.

Prototype being developed in Sketch in Mac OS window
An example of the desktop prototype I designed at the point where the user can add a selection from the search bar to their list...
... and here's the mobile version of the same function.
A video showing two of the prototypes I designed being used.

Usability Testing
At this point we had several prototypes that our group had put together. I took the lead in developing the test plan that ran through scenarios for each prototype. Users were given pre- and post-test questions to get their impressions of the prototypes. While the prototypes were being tested, we recorded each session using Tobii eye tracking hardware and software.
Image of a woman using a computer wearing special glasses for eye-tracking
A member of my team using the Tobii eye-tracker glasses in the lab.

Header for solution phase
Reflections/Results

In the end we tested five prototypes of small functional changes on the website with different users. We used a feedback grid to help us analyze the data and help us develop insights about each prototype.

Image of the feedback grid, sticky notes on a whiteboard
We presented the data in a slideshow and included video/audio of the tests, and quotes from the participants to illustrate our findings.

For example, one of the prototypes I developed where users could add items directly to their list from search bar suggested results, users responded that they found the new function easy to use, and potentially useful.

Slide featuring insights from prototype testing and a quote saying 'That was very easy, I like that! --Participant T901'. The rest is unreadable.

Image at top: Free Vector Monitor Vectors by Vecteezy