Improving the Online Shopping Experience of

Introduction

The Providore is a popular gourmet grocery. For this project I wanted to improve the online shopping experience. The focus of this project was to review and improve The Providore’s categorization of its products to help shoppers find what they need.

Research

Plus-Delta Analysis

I began by analyzing The Providore’s existing online shop to determine what was working well and what wasn’t. Here’s what I found:

User Interviews

Next I interviewed people to gain insight into their grocery shopping habits. The key findings were:

They do not regularly buy gourmet groceries but may do so on occasion
They like the convenience of ordering groceries online and having it delivered
Deals and promotions are important, especially when buying more expensive goods
Finding out that a product they wanted was sold out was frustrating

Persona

Based on the input from the user interviews, I developed a persona.

Goals

To prepare a great meal for her guests when she hosts parties

To have her groceries delivered to her doorstep

Behaviors

Orders groceries online

Frustrations

What she wants to buy is sold out
Annoyed when online shops have misleading category labels which makes it difficult to find what she needs

Jaime

34 years old | Singaporean | Corporate Job

“I’m willing to spend more on food when the occasion calls for it”

Problem & Solution Statements

I then generated 2 problem statements from the persona and came up with a solution for each of them.

Jaime needs a way to find alternatives when what she wants to buy is sold out so that she can still continue to make the food that she wants for her party

Suggest alternatives for users when a particular item is sold out

Review the categorization of products to identify misleading category labels and re-label them to more accurately reflect their content

Problem Statements

Solution Statements

Jaime gets annoyed when grocery store categories are misleading. She wants product categories to be labelled accurately so she can find the ingredients she needs for her party

Helping Users Find Alternatives

I wanted to inform users about alternatives as soon as they noticed that their intended product was sold out. To do this, I added a “Find Alternatives” button at the product listing page for all items which were sold out.

Upon clicking on “Find Alternatives”, an overlay would appear displaying alternative products. The user would then be able to choose an alternative.

The idea is that by clearly presenting alternatives, the user might purchase a 2nd choice product which can still fulfill their needs, instead of going to another grocer.

Clearer “Sold Out” signs and new “Find Alternatives” button in black

Overlay showing alternatives

Reviewing the Categorization of Products

To solve the problem of misleading categories, I first looked at The Providore’s existing categorization of products. It consisted of 5 main categories and around 50 sub-categories.

Card Sorting

I then conducted an open card sort with 10 users. Users were individually tasked to sort The Providore’s sub-categories into groups which made sense to them. They could decide on the names of the groups as well.

Analysis of the card sorting results revealed 6 distinct groupings as shown by the colors in the dendogram below. However, one of the groupings consisted of only a single sub-category - “Health Food”. Hence, I decided to investigate the content of this outlier. It turned out that “Health Food” only contained granola/energy snack bars. As such, I relabeled “Health Food” to “Healthy Snacks” to better reflect its content.

Re-categorization

I then settled on 6 new main categories based on the card sort, and labelled them based on the most popular names used by users who did the card sort.

I grouped “Healthy Snacks” under “Snacks”. I also segregated Cheese & Accompaniments into its own category even though the card sort grouped it with Snacks. This was due to my own experience browsing physical supermarkets and recalling that cheese was not typically grouped in the snacks section. In hindsight, this departure from the card sort results was not backed up by evidence, and further user testing needs to be done to validate this decision.

I made several other improvements to the categorization:

Some sub-categories were removed as they were empty (e.g. Plant Based Meats)
Some sub-categories were removed as all their contents were already in other sub-categories (e.g. All Japanese treats were already in Biscuits & Crackers)
Some sub-categories were renamed for accuracy (e.g. Soup, Stock and Gravy → Stocks & Broth; there were no soup or gravy products)

The idea is that by grouping the products based on how users group them and by ensuring that the sub-category labels accurately reflect their content, users will be able to find what they need more easily.

Usability Testing

I conducted a usability test with several users to check if my changes achieved the desired effect. Users were given 2 tasks:

Task 1: Find an alternative to a specific bag of potato chips
Task 2: Find a specific energy bar

Users had no issues with task 1. They commented that the “Find Alternative” button is clear and made it easy for them to find alternatives

However, for task 2, users struggled to locate the bar within the “Healthy Snacks” category. Users shared that “Healthy Snacks” was not where they expected to find it. They tended to associate “Healthy Snacks” with things like kale chips and dried banana chips instead. This made it clear that “Healthy Snacks” needed to be relabeled.

Other Feedback

Users said that the font size of the main categories was too small

Iteration

Based on the feedback from the usability tests, I made a couple of changes:

Renamed “Healthy Snacks” to “Energy Bars” to more accurately reflect its contents
Increased the font size of the main categories to increase visibility

Other Improvements

Improved Search

I designed an improved Search function which displays which sub-categories there search results are found. Users will then be able to use the checkboxes to refine their search results.

Easier Discounts

At the time of this project, The Providore had a 10% discount for purchasing 6 or more beers. However, users had to enter a discount code at checkout, otherwise they would miss out on the discount. In my redesign, when a user adds less than 6 beers to their cart, there would be a notification informing them that they can enjoy a 10% discount if they purchase 6 beers. The discount would automatically be applied upon adding 6 (or more) beers. This may encourage users who wanted to buy just 1 or 2 beers to buy more so as to get the discount.