Complete your Product Page: Assisting Customer Interactions in Stores through a Digital Product

In my role as Cross-sell Interaction designer at Coolblue, I worked on a creating a solution for our physical stores to help store employees offer advice on accessories.

Year: 2023
Company: Coolblue
Role: Interaction Designer
lead

TL;DR

30-sec. summary

The Goal

Make it easier for store employees sell more and better accessories to customers.

The approach

I observed employees in the store, paying close attention to how they interacted with customers and used our website during those interactions. The aha! moment came when we noticed that employees were struggling with multiple open tabs as they tried to offer various accessories and alternatives. To address this, I designed a solution that allows them to manage everything on a single, well-organised screen. This new design reflects their existing workflow but adds powerful tools for filtering, finding, and comparing products, while also subtly encouraging them to offer best-sellers.

What this says about my skillset

This project allowed me to use my skills across the entire process of building a digital product: From research to insights, to ideation, testing and delivery. I feel particularly happy about how I managed to turn insights from our users (store employees) into a solution that augments their way of working, rather than trying to impose a new workflow on them.

Take me to the designs

Problem Definition

  • Offering helpful advice to customers is part of Coolblue’s DNA and a key pillar of its strategy. Coolblue stores excel at providing face-to-face advice to customers, which results in higher conversion and customer satisfaction.
  • We observed that store employees struggled to use the website to offer accessories to customers. This meant missed opportunities for cross-sell and lower customer satisfaction as they walk out of the store without everything they need.
  • Employees juggled between multiple tabs open, had to navigate through several pages each time, and often offered suboptimal or incompatible accessories to customers.
  • The accessory offers page of our regular customer journey did not work for store employees, because it does not offer them powerful tools such as filtering and searching.

Research Techniques

technique

In-situ Observations

We observed customer-employee interactions in a Coolblue store.

technique

User Interviews

We interviewed several Coolblue employees about their experience when offering relevant accessories to a customer’s main product.

technique

Data Analysis

We compared accessories sold in our website vs. those sold in stores to understand the dimension of the problem.

technique

Usability Testing

We tested our prototypes with customer employees to capture feedback and improve our design.

Design Solution

When setting our direction we defined 3 main design goals:

1

Speed and focus: Reducing the time it takes for employees to find and offer accessories is crucial for our customer experience.

2

Supporting conversations: Interactions in the store are all about conversations between employees and customers. Our design needs to fit in with the way employees interact with customers.

3

Guide employees: Employees often need help in offering the best accessories to customers. Our solution should guide them to the most relevant accessories to offer.

Product Page

Starting point

Our new flow begins in the Product page, where now we have abutton with the Call-to-Action “Complete product”, to encourage store employees to follow this path.

A New Page

The “Complete your product” page is then presented. We establish a connection between the main product and the accessories thanks to the summary block

Accessory Tabs

The new page revolves around the concept of “accessory tabs”. These provide easy access to multiple accessories within a single page. These tabs accomplish two things...

1. Guide employees on what to offer

They provide immediate recommendations and guidance to employees by surfacing the most relevant accessories to offer for that main product. This is connected to our cross-sell data.

2. Supporting conversations

Each tab provides a space to have separate conversations about each accessory or service.

Filtering the assortment

The entire assortment for an accessory type can be viewed filtered, something that was not previously possible in our previous accessories page.

Browsing more accessories

Employees can open more tabs for other accessory types, if it’s relevant to the conversation.

Browsing more accessories

In this panel, employees can view all types of accessories available and compatible for that product. They can also quickly add a specific accessory by typing in the product ID or scanning the product in store.

Adding accessories to the cart

When a customer is convinced, employees can simply add the accessory to the cart with the click of a button.

Rollout in stores

During the development process, we wanted to get store employees already familiarised with the new tool. For this, I helped design an interactive e-learning using Figma’s prototyping tools. With this prototype, we were able to train our hundreds of store employees before the new functionality was fully developed. This ensured a speedy and smooth rollout in all of our stores.

After a brief pilot test in 2 stores, we successfully launched the “Maak-je-product-compleet pagina” in all Coolblue stores in the Netherlands, Belgium and Germany. In several store visits after the launch, I’ve had the great satisfaction to see how both employees and customers use the tool when discussing product advice, comparing products and yes, adding that one extra thing to their basket 🙂🛒.