GroceryXpress — UX for an E-Commerce Store

Summary

7 min readNov 30, 2019

My next challenge as a UX Designer at Red Academy was P2. We had three weeks to design the User Experience for an E-Commerce Store based on Main St (Vancouver, BC). The goal for this project was designing an e-commerce store that aggregates multiple retail stores into one online experience, offering a customized experience and increasing sales of the shops and customer engagement. During this project, we had to work in teams focusing on user research and designing a medium-fidelity prototype. My team and I focused on grocery stores.

Why grocery stores?

As international students who have arrived recently in a new country, we don’t have any idea of how to find affordable options for grocery stores. For that reason, when we arrived in Vancouver we had to discover which are the different options in terms of grocery stores, price, and quality. Because it’s not easy to spend your time trying to figure out these items, we wanted to provide an easy solution for those ones who are new in town and want to save money and time.

Research

First, I started with the domain research analyzing some apps that have some features that could fit in our future e-commerce store: Rebee, Intuit Mint, BigOven, Flipp, Out of Milk and Sale Whale. As a result, neither of these app focus on Main St. However, some of them have functionalities we were looking for, such as deals. There wasn’t any purchase option, just a shopping list or bookmark options, notifications if a product goes on sales. Because the majority of them haven’t got a search bar and these apps weren’t very well-organized, the user spends time looking for deals or any product.

To know more about the user behavior during buying groceries process, my classmate Yanni Jain and I made research based on a survey, interviews with people that were buying groceries and observing how was their process from the start to the checkout.

For the survey, some of the questions that were at the survey were:

Demographics (age, gender, occupation, etc.)
Where do you go often to buy groceries? What do you like about it?
What can be improved in these grocery stores?
How much time do you spend buying groceries?
Do you use any app or website to buy groceries online?

For our field trip, we went to Main St. to interview people and observe them buying products at some grocery stores: Save-On-Foods or August Market. For the contextual inquiry findings, we observed that they know what they want to buy and don’t ask the staff. They prefer buying local food and some of them were buying specific items. Also, they spend a short time at the grocery store. In small grocery stores, there was more interaction between the shop assistant and the client who asked questions about products. Clients were buying specific items as well as clients who were buying at big grocery stores.

During the interviews, we interviewed 4 people: a couple, senior women and two students.

Planning

When we finished our research, Yanni, Sachin and I gather our results into the affinity diagram.

On the affinity diagram, the majority of people interviewed and who participated in our survey were between 25–34 years-old, student female and male who buys once a week alone and invest between 15 and 30 minutes at the supermarket. The majority of them spend $51–$99 but some of them don’t care about the price. They buy in-store instead of online and prefer local and fresh food, convenient grocery stores and buying deals. Price and quality are the most important for them. Also, some of them buy online because of the picking-up option.

Based on the results of the affinity diagram, we found some insights:

‘I normally stay in the same brand but I sometimes try new products. Before buying this new product, I go through Google Reviews’
‘I don’t like big groceries stores, I bet for local food’
‘I cook food for multiple days’

In addition, we collect the pain points and divided them on-line and in-store concerns:

Online pain points

Limited grocery options.
Spending many efforts looking for product deals.
The delivery option takes a long time.
Not all the deals are visible online.
Lack of information in online flyers.

In-store pain points

Online deals aren’t able to be found at the grocery stores.
Looking for eco-friendly packaging.Different brands in each grocery store.

All these key findings were encapsulated in the user persona.

The scenario for our user persona Hannah was the following one:

Hannah is a hardworking and sincere student who is cost-conscious and advocates for eco-friendly measures for packaging to combat climate change. As a vegetarian, she is often left with no choice but to prepare quick sandwiches for her meals for a lack of better options.
She often struggles with shopping for groceries in retail stores since its cumbersome to find deals or flyers and very difficult to find products due to bad organization of products on the shelves.
She has looked for apps that help her to complete her grocery shopping online but, she couldn’t come across any app that provides her and integrated and convenient experience. She is often forced to check Google reviews to look up products.

Based on the persona and scenario Sachin and I created a user journey map for Hannah which reflects the phases, actions, concerns, and experience buying groceries. Then, Yanni implemented some changes and Sachin and I came up with a final user journey map.

In the user journey map, Hannah wants to buy some groceries but she can’t find deals so, she decided to go to the grocery store. There, she wasted time trying to find the products and deals that she was looking for. During her time on the Internet, she discovers GroceryXpress and by using a free delivery promotion, she bought a product. Her product arrives fast and due to her satisfying experience, she decides to continue using GroceryXpress and recommends to friends and relatives.

For Information Architecture, we decided to create four big sections:

Deals which was the main section because based on our research people care most about price and saving money while they are buying groceries. We categorize this section in deals from stores and specific product deals.
Products section was categorized in different types of food depending on if it’s local, international, organic, halal or vegan.
Shops section shows all grocery stores located at Main St. and contains information about the type of product, opening hours or address.
Recipes section was created for not spending much time thinking about what to cook based on what you bought.

We also came up with Checkout, User and Contact sections.

After this, we created a user flow in order to have a clear idea of how the user interacts with GroceryXpress. Despite having different user flows, we decided to focus on Deals user flow because it was the most important section.

Design

Low-fi Wireframes

First, we sketched the wireframes on a paper for the Deals section.

Mid-fi wireframes

Then I digitalized low-fi into mid-fidelity.

The main features for GroceryXpress were:

Let the users set their preferences for a better and personalized purchase experience.
Pick a grocery store and see all its weekly deals by clicking on the button deals. Deactivating that button, users can see a list of products.
By selecting a product, the user can get information about how much they are saving or user reviews.

High-fi wireframes

We decided to test the prototype and conclude that:

People care about what type of food are buying and need to see in details the nutritional information.
Users attend to every detail of what they are buying and need more pictures to be sure of what they are buying. They want to feel like they are at the grocery store.
The live deals option is not very clean. For that reason, we have to change colors or typeface in order to draw users attention and differentiate this option from the rest of the page.