Grocery Gateway is an online grocery store, owned by Longo's, a grocery chain in the Greater Toronto Area.

Grocery Gateway is aiming to improve the overall online shopping experience on both the site and the mobile app

Date: Fall 2017 - Spring 2018 
Project: Inclass Industry Partner  
Team: Ezgi, Ray, Yuan, Soham, Sogar
Skills: Design Research, Wireframes, Mobile UI


1. Self-observation

In order to better understand the current experience of grocery shopping, we conducted an individual observation activity and documented the shopping for food experience. This step helps us to identify the various stimuli and steps needed to shop for, decide on and buy food.Here is the report of my self-observation activity.

2. PCA Map

Based on both primary and secondary researches, we developed and iterated the People-Context-Activities Map for the target users of Grocery Gateway.
3. Persona Creation

We built the Persona to represent our target user. We also identify the pain points and developed the point-of-view statements and what-if statements for the Persona.
4. User Interview & Usability testing

We conducted two session of interviews with both current user and new user of Grocery Gateway.

We focused on understanding their online shopping experience. So we asked them to finish the shopping tasks using Grocery Gateway App, and documented their behaviours (both visual and auditory) for further analysis.


1. Affinity Diagram

We analyzed what we have so far, and the whole group went an affinity diagramming to identify all the emerged themes, including user's preferences, their expectations, satisfactions, and obstacles.
2. User Journey Development 

Based on what we have learned, we develop our user's story of their Grocery Gateway App experience, provide insights, and bring forward our recommendations on the improvement for future design.
3. Research finding summary

Current research identified several key jobs that current customers and prospective customers within our targets would like the Grocery Gateway digital experience do but it currently fails to support.

In terms of better mobile app experience, we finally came up with three key recommends:

• to make "modify my order" process smoother

• to clearly specify the size of grocery items 

• to improve the responsiveness issue of the app

Ideation: Sizing

Among these top recommendations, we consider that giving users a better sense of the product size, making products more realistic is crucial to create a good initial experience for online-shopping. It is particularly true for the online-grocery shopping. Therefore, our ideation and prototyping will be focusing on solving the product size issue.

After group discussion, we all agreed that it won't be possible for user to perceive the correct size of the products when they are showing alone (without any visual reference). Therefore, the best way to indicate the size of a item is to place it in a context, which is familiar to ordinary people and can be easily understood.

First, by researching various online stores, we concluded that the body part (hand, body) would be a good way to provide reference for the item size. 

We chose to classify different product sizes into three main categories: small, medium, large. Small means the product can be hold in one hand, medium is sth needs to be hold in both hands, and large are those have to be hold in arms.

It is noted that the size is actually defined by the shipping size. In this case, although individual Brussel sprouts is small in size, when they are selling in a bag, we consider it as a medium size product. Therefore, showing two hands holding the shipping product, user can have a better sense of how many Brussel sprouts they will receive for one purchase.


Next, we used inVision to wireframe our solutions in a context of Grocery Gateway mobile app.

Following images show the way how the Grocery Gateway app could present the watermelon along with a real people holding the watermelon as size reference.

Here is the link of the interactive prototype.

My Role
in the project

I actively participated in every process of the project.
I conducted a self-observation activity and composed an observation report. I also developed a mental model to describe the decision making process. 
I did both primary and secondary researches and contributed to the final version of the People-Context-Activities Map.
I coordinated the group discussion of the Persona creation, helped every member to refine their output, drafted and finalized the deliverable.
I contributed to develop the interview scripts, and participated in all interview sessions.
I played a lead role in creating user's journey map and the presentation of the research report to stakeholders.
I actively participated the ideation discussion, and helped with building the wireframe, as well as drafting and polishing slides deck for the final presentation with stakeholders of Grocery Gateway.
COPYRIGHT © 2018 Jessie (Yuan) Deng