Sass and Belle

A more efficient shopping experience for B2B e-commerce customers

My role

Led UX research, developed user journeys, wireframes and prototypes.

Collaborated with another designer on the UI features.

Worked alongside a Project Manager, a Frontend Developer and a Backend Developers.

The project

Small and large businesses have traditionally used Sass and Belle as a giftware wholesale supplier because of its huge and unique range of products.

But what happens when business owners need to keep track of large orders? How can we help them track their stock performance and optimize for repetitive orders?

From a combination of analytics and customer feedback, we knew that the product page was underperforming. Our task was to understand exactly why it was underperforming, and how to improve it.

What Sass and Belle product page used to look like

Research

The majority of Sass and Belle’s customers are repeated customers with portfolios containing thousands of products. These customers would be the target of our research.

We spoke with a cross-section of these customers with orders varying in frequency and type. We also used short, on-page surveys to ask site visitors about what should be added or removed from the product page. This would help to uncover simple improvements that could be executed quickly.

'We need more category-level information, and more collection-level availability: i.e. I want to see more candles in this category or similar designs.' — Response from a customer survey

Example of on page customer survey question

I also looked at product pages for other large-order wholesalers to further understand what a useful product page is comprised of. Compared to Sass and Bell’s product page, a key difference was how they relayed order and stock data.

For example:

Information about products in backorder and previously ordered products
Stock performance insight showed at different milestones
Data on large orders presented in filterable timelines

Research conclusion - what we learned

1. The product page was not optimised for people ordering hundreds of products at once. For example, customers could not see whether a product is already in their basket - a real issue when your basket contains too many products to keep track of.

2. The page lacked key data that customers need to manage a complex buying process. E.g. no info if the items were previously ordered, if any of these items are already in the back order or back in stock and no way to compare the previous orders.

3. The page prioritised the wrong elements. Details like product codes and barcodes need to be accessible, but they don’t form part of the buying process and don’t need to feature prominently. From a design perspective, there was a lack of visual hierarchy on the page in general.

Product page improvements

Based on all of our findings shown above, we narrowed our focus into 3 areas for potential improvement of our original product page: stock performance data, product data and product page elements priority.

Improve the stock performance data we provide

The user can see on the product page if the item is already in backorder.
The user can see on the product page if the item was previously ordered and the order history.
This helps the user to know if the product performed well in the past.

Improve the product data we provide

Key information is shown in list form for quick scanning.
The user can link to the broader collection from the product page.
The user can see on the product page if the item is already in the cart (customers can have hundreds of items in their cart in a single session).
The user can create PDP email alerts when products are back in stock.

Reprioritising the page elements

We reprioritised the position of pieces of information like Product Code'', "Barcode" and "Carton Quantity".
Visually, we reviewed the priority in the way information was presented on the page in general.

Challenges and Compromises

Unfortunately, one of our main challenges is the lack of resources and time that we have day to day, as like most client projects, we’re stretched quite thin! With this challenge, we often have to reiterate our designs in order to be achievable within time and technical constraints, while still providing more value to our customers.

In one version, I wanted to include an email notification when a desired product was back in stock. Since this would require extra time for developer complexity and logic, we reduced this to just a data point on the product page.

Next Steps

The released version of the new product page has been well received by our client. However, there are still improvements that can be made. Customers with large orders should be able to filter their data even more and customize large orders based on their needs.

In phase two of the project, we are aiming to add a feature that allows the user to quickly submit large orders with their own XLS, XLSX, or CSV file and add products to the cart.