UX CASE STUDY
Grocery Gateway
Grocery Gateway is an online grocery store owned by Longo’s, one of Canada's Top 50 privately managed companies. The Grocery Gateway collaboration project was an opportunity for industry and academic institutions to create an experiential real-time learning experience with students. The collaboration process is to help Research, Design, Build, and Test an innovative solution to an applied user experience problem, in our case, the My Favourite's Section.
This was our first industry collaboration school project at the UX Design Program. It involved app analyses, user interviews, wireframes, visual mocks, prototypes (Sketch/Adobe Xd), and a finalized app website completed in the span of 3 weeks. This case study documents the process of the 3 week project period that we underwent.
Team: Saif Elmaghraby, Inderjeet Singh, Cem Guler, Mert Demirhan
SCROLL
THE DESIGN THINKING PROCESS
In order to start our research and design process, we needed a timeline to keep ourselves organized. By narrowing it down to 5 different design sections, we were able to structure it as follows:
​
-
The Inspiration phase: Interview an active user of grocery gateway.
-
The Synthesis Phase: State our observations and define the problem and why it's important.
-
The Ideation Phase: Brainstorm as many ideas and solutions as possible.
-
The Prototyping Phase: Build real tactile representations of our best ideas.
-
The Testing phase: Test our potential solutions to see what works.
THE INSPIRATION PHASE
To start off our project, we needed to have a user centred perspective about how the website/app performed. Because of that, we interviewed an active user of grocery gateway. This user fit the persona of a 42 year old married woman, with no children, but a very active social life. To empathize with this user, we needed to understand why she had been using grocery gateway in the first place.
-
Having a very active social life meant that she didn't have as much time to visit a grocery store.
-
Having no children, meant that her orders were only limited to two people.
-
Being 42 meant she likely understood the importance of homecooked meals over fast food options.
To begin our user research, we turned on a screen recorder, and asked the user to perform three main task:
-
Sign in to Grocery Gateway.
-
Build your cart for a dinner party.
-
Build your cart from my favorites.
*we asked them to speak out loud.
We regrouped after to analyze the screen, and voice recording. And based on their experience, we narrowed down the key findings to these specific points:
-
User didn’t find alternatives for out of stock items.
-
Products in “My Favorites” do not reflect what the user’s favorites are.
-
No filter option available to narrow down search.
​​
THE SYNTHESIS PHASE
Unorganized
What they said >
Unorganized
What they said >
“I don't understand why all the fruits aren't together, and why all the vegetables aren't together like in a grocery store.”
Alternatives
What they said >
Alternatives
What they said >
“There’s a challenge these days with romaine lettuce. It's out of stock. So I kind of wish that it would give me alternatives.”
Add/Remove
What they said >
Add/Remove
What they said >
“I think I'd like to have more control over what my favorites is.”
After spending hours deciphering the screen/voice recordings, we wanted to gather all of our observations and define the core problems that our user testers encountered in the My Favourites section on the grocery gateway website. These included:
-
Unorganized grocery items.
-
Out of stock products.
-
Inability to control products deemed as a customer's "favourite".
​
These observations pose a couple of questions:
-
How do we organize the My Favourites section?
-
How do we deal with products that are out of stock currently?
-
How do we personalise their experience so that they feel that the company understands what they actually consider to be their "favourites"?
-
How do we redesign this section to include all of that?
THE IDEATION PHASE AND PROTOTYPING PHASE
Once we defined our core problems and observations, we wanted to start sketching new ideas and solutions to those problems. We spent a couple of days sharing ideas, sketching wireframes, making mock ups, and building high fidelity prototypes. Documented below is the evolution of these wireframes:
THE TESTING PHASE
Our My Favourites user experience suggestions were far from finalized. We needed to perform another task evaluation, in order to further understand how our changes have affected the performance of the website/app. Therefore we met up with another candidate and asked them to perform these tasks:
​
-
Navigate your way through to the MyFavourites section, and Refine your search
-
Filter your search to which every category.
-
Find any products that are "Out of Stock" and look for alternatives
-
Look for a product you are interested in and "Like" the product.
After getting the feedback we wanted from our last task evaluation, we decided to scrap some ideas and make room for better ones that would enhance the performance of the website/App.
THE FINAL DESIGN
Refine By
Category
Filter By
Multiple filters
Alternatives
For Out of Stock Items
Refine By
Category
Filter By
Multiple filters
Alternatives
For Out of Stock Items