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
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.
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.
Redesign how "Out of Stock" items are shown
Redesign how "Out of Stock" items are shown
Introduce an editing option
Introduce an editing option
Simplify homepage
Simplify homepage
Current design and experience
Current design and experience
Current design and experience
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
High Fi Designs
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?
© 2021 created and designed by Aryza Tingcungco
© 2021 created and designed by Aryza Tingcungco