top of page

Improve BT checkout experience

Increasing sales conversion by 5% (60+orders per week) on BT's optimised checkout experience

Role

UI/UX designer, Visual designer

Timeline

January - March 2021

(2 months)

Tools

Figma, Miro, Slack, Teams, Notion

Team

•  Content Designer

•  Developer

• Product Owner

• User Researcher

Introduction

BT is a telecommunications company that provides connectivity to it's customers. It connects people to the internet through the latest full-fibre technology and next-generation 5G mobile network connected by EE, offering faster data download and upload speed.

In this project, I optimised the look/feel of the progress tracker and created a clear path to completion. The results were exceptional.

My Role

I'm the product designer for this project. I led the design, user testing and development of this project from end to end. I collaborated with content designer, product owner, user researcher and developer throughout this project.

Defining the problem 

"How can we drive a greater checkout user experience providing value and increasing conversion?"

Situation

The Progress Tracker is repeatedly used amongst our core products and service journeys. Being used across the website so heavily, It was important I delivered a clear path to completion and make an positive impact on our users.

Problem

Primary research gathered by the user research team highlights plenty of users exiting the journey once they enter checkout. Customers feel the checkout experience is “too long” and a likely contributing factor to “dropping out”. As a result, customers weren't successfully checking out hurting our conversion.

No defined journey - unclear user experience creates friction - in turn, increases the drop-off rate.

The progress tracker is old and outdated, the visual elements do not speak to the brand anymore.

Storefront & Ecom.jpg
Your order page.png

Goal

Increase conversion and clickthrough rate across the checkout journey

An easy to understand stepped process to help users, avoid frustration and successfully complete purchase

Align with the storefront team to optimise the end to end journey, prolonging a smoother user experience

The Discovery Process

At BT we use a Build, Measure, Learn (BML) approach to help us rapidly learn how we should achieve the desired outcome for customers. This approach encouraged us to answer the following questions:

  • “Should we?” — market fit

  • “How might we?” — problem fit

  • “Can they?” — usability fit

  • “Will they?” — behaviour & value fit

BML Canvas.jpg

As a squad, we are driven by user needs and all that we do is based on evidence. Instead of relying on assumptions, we made sure everything we create is meeting a validated user need and we keep users continuously involved in our process at all stages.

BML Canvas.jpg

Working with the user research we were able to discover the primary, secondary and tertiary user needs. There is a “Bank of User Needs” — a spreadsheet to store and share all the user needs that have been identified from research. Within my tribe, we already had identified lots of user needs from past generative research.

Untitled.jpg

This led us our primary user need and business goal.

Build.Measure.Learn. Canvas

What is a progress tracker?

A progress tracker is an indicator that displays the progression of a given task. It acts as a guide letting the user know what has been done and what is waiting to be completed. Progress trackers are best used when there is a specific goal to achieve. They are synonymous with conversion and are used as a way of improving usability— which is key when optimising conversion rates. Conversion is all about selling online so you will see a progress tracker in some form in almost every online store.

Benefits of a progress tracker:

• Boost engagement 

• Motivate the user to complete a given task or goal

• Conveys a sense of accomplishment

A good progress tracker should inform users about the following aspects:

• What steps (or tasks) the users need complete with a proper visual queue

• Current step the user is on - queue user's active location within the process

• How many steps remain with clear designation

John Lewis.jpg
Googel Pixel.jpg
Sky.jpg
Place-Your-Order-Amazon-co-uk-Checkout.jpg

The Process

Where we are today 

The current progress tracker is complicated and complex. The absence of labels and clear steps doesn't create a great user experience and instead creates tension. The lack of control causes anxiety leading customers to abandon the journey. 

Storefront & Ecom.jpg
Old Progress tracker.jpg

Competitor analysis

This type of tool, aimed at improving the browsing experience of users, is also widely used in general for platforms that allow online purchases, a type of activity for which transparency in the various steps is of fundamental importance to gain trust of visitors.

Progress trackers can be used in a variety of contexts. The following three areas are the most common.

Online Ordering

By far the most common use-case of progress trackers is in conjunction with online purchasing, since this task can be naturally split up into multiple steps.

Multi-Step Forms

If a form requires a lot of user input, it may be good to split the form into multiple steps.

Onboarding

Progress trackers are also used to guide users through the features of apps and services. .

Multi-step forms.jpg
Online ordering.jpg
Onboarding.jpg

Design explorations

Using the existing brand system I looked at what components can be used for this new redesign. I started to sketch out potential Progress Trackers including some elements that will improve them.

Screenshot 2022-06-12 at 12.33_edited.jpg
Written steps.jpg
Written steps (indicator).jpg
Numbered Steps.jpg

As the Progress Tracker interacts with many different journeys and squads I needed to make sure it was a fit for purpose. To that, I invited stakeholders across the Experience teams to participate in a workshop—that I led and facilitated—to explore various design ideas for the Progress Tracker.

We've tested the prototype with 5+ people in a controlled testing environment.

https://ybkazs.axshare.com/#id=fvhium&p=bb_deals&g=1

Working with the checkout team

Working with the storefront team was key to the success of the project. It turned out they had the same problems as us, therefore this was a key opportunity to kill two birds with a stone. In addition, it was a chance to establish consistency and reduce the duplication of design patterns. In the end, this lead to an improved experience for the users.

In addition we always keep our design files open, making it easy for anyone to drop in and have a look at what we’re working on. Being transparent with our designs enables the rest of the squad to see what we’re working on in real-time. When working with stakeholders, we share links to designs and encourage them to comment/feedback.

Figma collaboration

Final Designs

Optimised Progress Tracker

Good design is simple.

Before the re-design the Progress Tracker was complex and didn't offer a well defined path. The changes I've made has provided transparency with simple labels, gaining the trust of users. Furthermore the experience now matches the new BT visual design style that was rolling out. 

Group 91.jpg

The power of showing progress is it provides ongoing feedback to the user. It also carves a clear path to completion for them, which increases the likelihood of making it to the end of the journey.

macbook-pro-2015-psd-mockup.jpg

Changes on mobile

Since horizontal space is limited, a radial progress tracker is the best solution for mobile users. It offers better readability and clear visual progress.

iPhone-12-Pro-Mockup-Set-2.jpg

Development

Sprite images

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Sprite images.jpg

Future Steps

Bug fixes

For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.

Thank you for reading through! Hope you enjoyed learning about my design process.

bottom of page