Grocery Gateway

Grocery Gateway

The My List feature on the Grocery Gateway Mobile App needs a editing feature to make removing items more effecient for our users.

The My List feature on the Grocery Gateway Mobile App needs a editing feature to make removing items more effecient for our users.

Role 

UX/UI Designer

UX Researcher

Role 

UX/UI Designer

UX Researcher

Duration 

Dec 2018 - 

Jan 2019

Duration 

Dec 2018 - 

Jan 2019

Platform

Mobile App

Platform

Mobile App

Platform

Mobile App

Platform

Mobile App

Introduction

What is Grocery Gateway?  
Joining the Longo’s family in 2004, Grocery Gateway became one of the first and largest online grocers and delivery services in Canada. From your fruits to your household necessities, they have more than 10,000 items that can be delivered to your front door.

Overview

The Challenge
The business wanted to learn more about their users and find areas of opportunity within the mobile app. I worked with the UX lead, Marketing lead, and 3 other UX designers to propose mobile app improvements. I was assigned to improve the experience of My List, a page that allow users to create a grocery list. 

The Solution 
Through user interviews and affinity mapping exercises, we identified the My List feature required a more efficient way to remove items. I added an ability to edit their list to allow users to remove more than one item at a time.

Process

Discovery-gg
Design-gg
Evaluate-gg

Research

Usability Testing

With a total of 10 users we reviewed the current experience by providing  the following tasks/questions:

With a total of 10 users we reviewed the current experience by providing  the following tasks/questions:

With a total of 10 users we reviewed the current experience by providing  the following tasks/questions:

1) Sign into your account and create a new order

2) Build a list for a special dinner party with a few friends and family, how might you go about finding what you need to make your dinner?

3) “As you were building your list, did you or have you in the past come across Out of Stock items? “

Affinity Mapping

From the usability tests, we were able to gather user insights and identify common themes.

WhatsApp Image 2018-12-16 at 7.12.20 PM Copy 2@3x

Key Takeways

1) Users like browsing through the homepage 
Some expressed they enjoyed looking at the homepage for promotions and would scroll through to see if there was anything new. 

2) Users express removing items from My List is tedious and frustrating
Users suggested an editing feature on My List would be faster to revise and edit as needed, as the current experience can only delete items one by one.

Design Focuses

Through affinity mapping, we identified 3 design iniatives we wanted to tackle. Among the designers we broke up these iniatives - I took on the editing feature.

Group 2@3x

 Redesign how "Out of Stock" items are shown 

 Redesign how "Out of Stock" items are shown 

Group@3x

Introduce an editing option

Introduce an editing option

landing-page@3x

 Simplify homepage

 Simplify homepage

Current design and experience

Current design and experience

Current design and experience

1before

Key Takeaways

1)  Prior design did not have an edit feature, which meant users can only delete items one by one through the X button in the corner of each product.  

2) Users can choose to select empty list which would clear all items

3) This design made it difficult for users to select only certain items they want removed and made it tedious to clean up longer lists.

 

Design

Lo-fi Designs and User Flows

Group 5@2x

High Fi Designs

prototype

Usability Testing


Usability Testing


Second round of tests 

We wanted to re-test the experience with a prototype of our design solution to validate our assumptions. Using the same tasks as the previous usability test, we discovered:

Things that worked

1) Pop up to confirm the deletion of items

Things to improve 
1) Delete button does not support finger range of motion on larger mobile phones

2) Edit button is not prominent enough, users still demonstrated difficulty finding it. 

Reflection

Next steps

If my student placement was longer, id like to optimize the design solution further based on the second round of user testing. 

Constraints

There was no existing data that we could reference which could have been helpful to use for identifying areas of opportunity within the app. (ie. Traffic, click count, abandonement rate, etc) 

What I learned

It is always best to do two rounds of user testing (before and after ) to help validate design assumptions. After we completed a second round of testing, there were additional areas of improvement that were identified. 

Looking to connect?

Looking to connect?

Looking to connect?

Looking to connect?

or chat with me here:

or chat with me here:

or chat with me here:

© 2021 created and designed by Aryza Tingcungco

© 2021 created and designed by Aryza Tingcungco