Grocery Gateway

Make the most of your online grocery shopping with an onboarding experince

Grocery Gateway provides a convenient way to shop for groceries online and have them delivered to your home on your schedule.

My team was tasked with the challenge of identifying issues and creating opportunities to improve Grocery Gateways mobile shopping experience. Once key issues were discovered my team focused in on the lost opportunity of useful features that were left unused because users did not know they existed. 

How could we guide users to useful functions they want to use if they can't find them in the mobile app?

Client: Humber College in collaboration with Grocery Gateway
Team: Felipe Cardenas, Nadia Kvhan, Vivian Hyang
Timeline: November 2017 - January 2018
Tools: Personas, User Interviews, Affinity Diagrams, Customer Journey Map,Wireframes, Prototyping

Key insights from our user interviews lead my team to develop an onboarding experience for the Grocery Gateway mobile app.  This tutorial will guide user through key aspects and features that either went overlooked or were praised during user interviews. 
The first screen welcomes the user with a friendly face based on the main human contact Grocery Gateway offers, their truck drivers/deliver people. 

The second, third and fourth screens highlight features we have determined as important and often overlooked. These screens also allow users to check out these features quickly and return to the tutorial easily.

The last screen lets the user know that they have received a $5 coupon that will go towards their first purchase. There is also a call to action button that encourages the user to start shopping right away.

Personas: Two personas were made for new and existing users. These personas were created from information gathered from secondary research and informal interviews fitting the target demographic.

By focusing on their goals, motivations and behaviours we started to pinpoint the needs of potential users in the context of shopping for groceries.
Semi-structured Interviews: Two interviews were conducted, one for each of the personas created. The first interview was with an existing Grocery Gateway user who shared pain points, most used features and wishes for what could be added to the app to make it better.

The second interview was with a user who had never used Grocery Gateway before but was well versed in online shopping. This interview let us understand what expectations people have when choosing an alternative to physical shopping. 

Both interviews ended with each user running through the same scenario of choosing and faux-purchasing a small list of groceries. 

Customer Journey Map: After reviewing the interview data and analyzing with an affinity diagram we decided to organize the data with a customer journey map. This map allows us to review the users process interacting with the product and identify the main issues. 
These final issues gave way to opportunities like our final solution of implementation of an onboarding experience, to better showcase the features new users were missing out on when using the app.  

Mood Board and Sketching: Once we decided on our solution our first step was to create a mood board of existing onboarding experiences we liked. We also did research on why different people think onboarding is an essential part of any good product.
After gathering our inspiration we started to sketch out layouts, interactions and illustrations. I decided to use my illustration background to incorporate a more visual aspect to the onboarding. 
Wireframes: The paper sketches and wireframes were rendered digitally in Adobe Illustrator and a prototype was created in Adobe XD. This wireframe shows how the user would return to the onboarding after looking at the highlighted feature.
Iconography: These are the final illustrated icons I made from the onboarding screens. They were meant to resemble the hard-working drivers and staff working at Grocery Gateway. These characters also add a comforting and friendly aspect to the app our team thought was lacking. 
Back to Top