Grocery Gateway

row of vegetables placed on multilayered display fridge

Grocery
Gateway

IMPROVING "MY LIST" FUNCTIONS

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. Grocery Gateway is an online grocery delivery service acquired by Longo’s. And have been the leader of online grocery delivery in the Greater Toronto Area and across Ontario.

The Challenge

The business wanted to increase the exposure to new products, improve their sales and customer loyalty on their mobile application. My team and I used this opportunity to propose improvements on their ‘My Lists’ page that allows users to create grocery lists.

The Design Process

The design process we followed was we the UCD Process. In UCD process the design is based upon an explicit understanding of users, tasks, and environments; is driven and refined by user-centered evaluation; and addresses the whole user experience. The process involves users throughout the design and development process and it is iterative.

INSPIRATION PHASE

Early Observations

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

men's blue and white button-up collared top

smiling woman wearing brown scarf and maroon coat on snow field

User Scenarios

We wanted to place Nate and Elizabeth in specific scenarios and hypothesize how they would use Grocery Gateway on their phone. This gave us a rough idea of how real users would use the app given a specific scenario.

NATE - "I'm always in a rush so I always grocery shop for the same things"

ELIZABETH - "I prefer to buy organic/locally sourced food"

User Interviews

Formal interviews were important to gather data on how real users in the Elite Professional (Millennial) group use the Grocery Gateway mobile app and use this information to identify areas of design improvement.

We created a structured series of tasks for users to follow in order to investigate the experience of: placing an order, modifying an order and canceling an order using the Grocery Gateway mobile app. Slight modifications were made to the tasks to better mimic the experience of new users vs. current users.ur text here...

SYNTHESIS PHASE

Findings in Research Interview

Using data we coded from transcribed interviews, our group began using this data to create an affinity board. 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.

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

List users will start their grocery shopping with their My List
List users still use the search and categories to finish their shopping cart
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
Users also get inspiration from outside sources like social media or recipe sites
List users come up with work arounds for out of stock items
Lists are used as an inventory by users of the My List
Users keep different lists for different occasions or purposes
Family is an influencer of purchases
Convenience is the major motivator of these users for using Grocery Gateway
Users feel annoyed when items are out of stock

IDEATION PHASE

Customer Journey Map

We were able to break down the experience into six stages :

Accessing the app
Navigating and choosing items
Reviewing order
Purchasing items
Reviewing and finalizing stage
Submit stage

We found many touch-points along with their respective thoughts and feelings. However we were able to pinpoint two moments of truth:

“My Lists” is a central component of the app, acting as the equivalent of the user walking up and down the aisle in a grocery store.
User has difficulty in selecting the payment option; they can only click “select” instead of the entire box.

Wireframe

Although there were many opportunities for design improvement, we focused on one: Rearranging the "My Lists" component on the mobile grocery gateway app such that users can better find the items they have already placed on their list.

We found that for our current user, "my lists" is a central component of their grocery gateway experience, acting as a memory trigger akin to walking up and down the aisles.

We wire-framed some early ideas to bring our designs to life.

PROTOTYPE PHASE

Digital Prototyping

Categorize products in line with the sub-categories present in the existing Grocery Gateway app.

Cut down the number of steps a user needs to complete a certain action.Make better use of screen space. Make the "My Lists" feature overall more accessible from different parts of the app.

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.

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.

SOLUTION

Reflection/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.