Grocery Gateway Internship

This article summarise the work I did during my work placement at Grocery Gateway in collaboration with Humber college.

Gagandeep Singh
7 min readJan 6, 2019

Overview

Grocery Gateway is an online grocery store owned by Longo’s, one of Canada’s fast growing online grocery shopping store . It was our first industry collaboration school project at UX Design Program that involves user research, journey map, wireframes, visual mocks, prototypes. This case study talks about the process of 3 week project which took us through the entire lifecycle of user experience design.

Team Members : Shaun, Michael, Sharad, Gagan

My Role : Wireframing, Prototyping and User Testing

Challenge

Grocery Gateway did some early analysis on how do people build a cart on their app. Few interesting stats came out. The main focus of this collaboration project was around “My List” and “My Favourites” feature given the usage percentage is on lower side for both these feature. Our team was given the task of working on My List and find out how customers are using my list currently and how can we engage customers to use this feature more frequently which in return can help Grocery Gateway to grow their business more.

Problem Statement

How might we reimagine ‘My Lists’ ’ in a way that allows user to shop in an efficient manner while exposing them to new products and moments of inspiration leading to increase incremental sales and increased brand loyalty?

Process and Project Timeline

We followed user centered design process to solve this problem.

Process
Project Timeline

Inspiration

Grocery Gateway recruited a real user for us and booked a location Toronto Downtown to conduct 1:1 User Interview. The best thing for us was we interviewed a person who is being using this for quite some time. We also did Secondary Research around things like tip feature, out of stock items in online grocery shopping etc.

Interview Plan : After brainstorming within the team and with our mentor we finalized our Research Questions and created a Interview script which had warm up questions, three scenarios/tasks and questions based on that and then wrap up questions to end the session.

Persona

Research Questions

  1. How are users experiencing the My Lists feature on Grocery Gateway
  2. What are the pain points of how users interact with the My Lists feature?
  3. What are user goals and motivations while building lists?
  4. How do people build their list and find inspiration for new ideas?

Warm up Questions

  1. What is your occupation?
  2. How does your day look like?
  3. How much estimated time you spend on Internet, which also includes using Apps while your at work or home?
  4. What are different apps or websites you use often?
  5. Which are your favourite Apps or Websites?
  6. How often you do online grocery shopping?

Tasks

Task 1: Sign into account and create a new order using my lists in the same way you would if you were home right now.

Task 2: As you are building your cart, I want you to imagine that you will be having a special dinner party with a few friends and some of your family. How might you go about finding what you need to make your dinner?

Task 3: Out of Stock Items

Our interview consisted of one user, an interviewer and a notetaker. We recorded the audio session using Snagit and screen captured the user completing each of the tasks. Here is a short video of the session.

User Interview

Secondary Research

  1. How out of stock items impact your business: : A recent survey conducted by Harvard business review collects survey data from more than 71,000 consumers in 29 countries to learn how they react to stock-outs Read More
  2. Customer preferences for how tipping should be present.Tipping has been one of the hottest and most widely debated issues in the last several years leading to the question Does tipping actually improve the quality of the service? Read More

Synthesis

After our initial research we transcribed the recording of the interview conducted using Trint software and then we as a team collaborated together to code the research findings and also created Affinity Diagram which helped us to find the key insights.

Coding the interview findings
Affinity Diagram
Customer Journey Map

Top Recommendations

  1. Give user control over substitutions: Let user decide what the substitutes would be.
  2. Provide more Information on the status of Out of Stock Items: (e.g. when expected restock is).
  3. Suggest in stock alternatives when items are Out of Stock.
  4. Add Cancel Order button at checkout instead of making the user empty their cart.
  5. Provide option of giving a tip during checkout.

Ideation

We empathize and listened our users carefully ,analyzed our observations deliberately. There were many opportunities for improvement of the My List feature within Grocery Gateway mobile app, but we focused on few selected problems that our users were struggling with . We wanted to put ourselves into user’s shoes while we rolled up our sleeves to wireframe and thought for best ways to solve the problems.

Problems to work on:

  • Allowing User to Select Substitute
  • Offer In Stock Alternatives in the Event that an item is out of stock
  • Information about the next availability of out-of-stock items
  • Option to add tip during checkout

Prototype

We used Adobe XD to create final prototype.

When item is out of stock
Tip Feature
Notify me feature
Out of Stock Item Alternative
Tip feature

Testing

We conducted a 60-minute usability lab test session using Tobii Eye Tracking.There was one participant set up with our prototype. There were two observers, one note taker and one interviewer who asked questions. I played the role of interviewer in this session. We conducted the test on both mobile and desktop version. The user was again recruited by Grocery Gateway.

Scenarios and Tasks

Scenario :

You are looking to add an item to my list. For that you went on to search the item but found that the item is out of stock.

Task 1:

Subscribe to notifications so you know when the item will be in stock.

Task 2:

Select atleast one alternatives that is displayed for “Out of stock” items and add that item to my list.

Scenario :

You have long list on paper containing various grocery items and want to add these items into the Grocery gateway app/website.

Task 1: Create a new list using “Upload my list” feature and check if the list is imported properly into a Grocery Gateway list.

Scenario :

While you try to open “my list” created earlier, you come to know the list have few out of stock items.

Task 1:

Select one alternative and add your whole list to the cart.

Scenario :

During checkout you see there is an option to check “Accept substitute” which allows grocery gateway to send a substitute in case the selected item is out of stock prior to shipment. You want to have control over the substitutions

Task 1:

Select a substitute for any item in the cart.

Scenario :

You are checking out your weekly groceries but you feel like adding a tip this time because you are pleased with the overall customer experience you’ve been receiving from Grocery Gateway.

Task 1: Add a tip while you’re checking out.

Test Findings

  1. The user already understands what the Tip function is and wouldn’t read the text (What’s this?) displayed in front of it.
  2. Finding similar items is very easy when selecting alternatives for out-of-stock items.
  3. Maximum number of alternatives should be 3–4.

Learnings

It was our first collaboration project with a company and we really enjoyed working with them over the 3 weeks. It was kind of a 3 week sprint work. We have to manage our time accordingly and it was great experience. We also realised the fact that there can be technical and business constraints even though the design is good. So it's important to keep in mind that the mixture of all three which holds great significance while working in any industry. We had people from different backgrounds in this group and I personally learnt a lot from them. I went on to use the Adobe XD tool in depth, it's always good to know new tools. All and all our final presentation was received very well by Grocery Gateway.

I hope that you enjoyed reading the case study as much as I enjoyed putting it together.

Let’s be friends. Connect me on Linkedin.

Here is list of my other case studies you might be interested in.

Collateral Management | Day in the life study | Fee Flow | Diary Study | JunoBond App | Usability Test : Ryanair Website | User Research Projects

I am looking for Full time opportunity in UX Design . If you are looking to hire one, I would love connect with you.

--

--