target-logo.png

Enhanced the checkout experience 

My role

UX/UI Designer, I led the checkout design, research and collaborated with 1 design lead, 2 BAs and 4 product managers.

Duration

1 year 2020 - 2021 (From design start to dev start)

About

As an iconic retailer brand in Australia, we wanted to know which process in checkout had room for improvement after an annual performance review. I was a part of an ambitious project to redesign the checkout experience for the evolving business to meet the Y21 mission which was to improve the customer shopping experience across our omnichannel.
 

iphone-12-pro-Checkout 1_2x (1).png

While I signed the NDA, I have avoided the non-disclosure information, I can only provide the information from my own perspective. All information here is my own and doesn't necessarily reflect the view of the company.

The Goals

Checkout was a big chunk of work and it required different teams' collaboration to achieve the goal of reducing the cart dropping rate, as well as improving the checkout pain points.

Our high-level goals were to: 
1. Make checkout fast and easy to use for everyone. 
2. Improve user experience across omni-channel (Online and in-store)

3. Create a deeper engagement for existing and new customers.

Project Timeline

timeline.png

The challenges & approach

Challenges

We got some early insights from the annual performance report. One of the report's highlights was that our competitors who have the highest checkout completion rates both have a one-page checkout feature.
However, the report only provided us with identifying gaps in the market, but it didn't help us to understand the real challenges and how we can engage users better with our features to eventually reduce the checkout dropping rate.

First approach

I wanted to know what it meant to have high cart dropping and low checkout completion rates. Without 100% clear b
usiness requirements and principles, my goal in this conceptualization phase was to conduct competitor research just to get first-hand user feedback and gather business perspective by doing stakeholder interviews and translating the existing research takeaways into actions and then team up with the design lead and product manager to workshop what hadn't yet been done, focusing on and exploring the next step and approach.   

Competitor research report.png

Competitors' key checkout features 

The insights from the original experience

After gathering data from Google Analytics, we conducted 6 user interviews to understand the current process and based on the feedback from user interviews, I summed up 4 main obstacles which stopped us from having a convenient and usable checkout process.  This information helped me better understand which direction I should be working on.

Sign in (2).png

1. Guest checkout is not easy

We had 73% dropoff rate at this log-in stage. I noticed the "checkout as a guest" button will only appear after users type in their email addresses first. 

Basket.png

2. More control over the basket

Users find it frustrating when they can only change the quantity during the checkout process,  they need to put more effort if they have to change the size or colour.

CNC timeframe (3).png

3. Pick-up timeframe

Click and collect item timeframe estimates can't convey which items you can collect when split.

Contact (1).png

4. Checkout process steps

 If we want to help customers understand the checkout procedures better, how do we convey the design?

The quantity badge is confusing, I expect to have more control on changing the details, I need to put more effort if I want to change my email address, item size or colour.  

34, Female, Australian

Breaking down & identifying opportunities 

Combining the workshop brainstorming results, we had a great set of tasks and discovered many opportunities. I broke down the checkout experience into 6 pieces: Add item to basket, Basket, Sign in, delivery methods, payment and thank you page. One more highlight is that our persona hypothesis consisted of users who tend to shop more when they know there is a discount or promotion happening.  This way gave me a quick visual of our constraints, what required minor improvements and what was available to innovate. 
Afterwards, I
reflected and focused on our high-level goals, this helped me prioritise the MVP(minimum viable product) features and scope. 

Pain points list.png
Research.png

A FEW IDEAS AFTER THE WORKSHOPS

We believe that giving users more control over the checkout page would help customers self-resolve a high volume of back-and-forth time-wasting issues, which will positively impact our cart drop rate and shopping experience.

Fast and easy checkout

  • Exposed guest checkout button

  • Allowed change items' colour, size and quantity at the checkout process

number-one (2).png

A better Exp. across Omni-channel 

  • Suggest customers choose other shipping methods when part of the items are unavailable.

  • Clear timeframe and stock availability for each item with corresponding pick-up stores

number-one (3).png

Deeper engagement

  • Introducing an incentive bar to indicate how far away free shipping is.

  • Gamify the promotion experience.

User Flow

d8a5a85e-094c-42c8-8a56-978c395d77f9.png

Design iteration & validation

V1 and V2.png

In the last phase of the project, I mocked up 2 versions of the prototype. I first wanted to ensure the users understood the functionality and the information architecture. As there is no leading scenario, we decided to run unmoderated testing for this version of MVP. 
There are 2 main things I would like to validate in my designs. 

  • Which is the preferable method for users to delete an item they don't want?

  • How does a user usually change QTY?

Version 1 - Multiple Items selection & Type in QTY

This multiple items selection control feature was inspired by the multiple email selection. The idea was that when a user is shopping online, they can select the items they want to proceed with during the checkout.

Version 2 - Cross to delete & Scroll to choose QTY

In version 2, users can click the cross icon to delete the items they don't want to proceed to checkout, and if they want to change the quantity, they can use the APP native built in scroll functionality. 

We recruited 8 users for mobiles and 6 users for WEB, the tasks were: 

  1. Pretending you are shopping online, you are now on the basket page, if you want to remove the first item in the basket, what would you do?

  2. If you realised you had chosen the wrong size of T-shirt, and you'd like to change it to M, what would you do?

  3. If you want to proceed without the headphone in your basket, what would you do?

  4. If you wanted to redeem your Fllybuys points, what would you do?  

UT 1 (1).png

Key takeaways from UT 💡

  1. Delete item - A removed icon button can probably do the job, but some users worried they'd accidentally tap it on the Mobile screen. Also, some of the users tried to swipe left to delete an item, which inspired me the new approach in the iteration.

  2. Choose QTY - It takes more time and effort to type in the QTY than scroll, but scroll to choose is not ideal when users need to order a larger amount of items.

  3. During the test, to my surprise, we got so many participants who mentioned themselves that they got more control over changing the size and colour without going to the product page, and they had no trouble completing the tasks, which confirmed our design could provide users with a more convenient and faster checkout experience.

Key Features

Spend and save.gif

01

Enjoy shopping, we will do the rest

You'll see how far away you are from free shipping or getting a reward when you add an item to your basket, incentive bar help you to visualise your shopping statement, and shop more to save more.

02

Your basket, your control

The item details have been designed to allow users to edit the quantity, size and colour at the basket level. Users not only can edit the QTY by taping the icon button but also swipe left to delete it. The features give users more control to save time editing items through product pages back and forth.

QTY.gif
Guest checkout.gif

03

Log in as you like, one trip as you wish

We added log-in benefits to encourage customers to log in, if not, they can easily click on the exposed guest checkout button if they prefer. 
In the final design, we also visualised the available pick-up timeframe, users can easily tell which items are able to pick up today and which items are not.

Summary.gif

04

One more step to create an account

If a customer chooses to checkout as a guest in the previous step, they can create an account after they place the order. This way, they are able to check their order history through their account next time. 

Download on the App Store
Get it on Google Play

My key learning

1. Though we already have a few existing performance reports and legacy research outcomes, personally running multiple moderated interviews helped me train the muscle and made it easier to gain user empathy.

2. Define a set of experience & business principles with stakeholders upfront, it also helps to set the project expectations, early communication is key.

3. Some user pain points are not always an easy fix or have a direct UX solution, but as a designer, we can reduce the pain to a minimum.

 

4. Using native iOS or Android components for the app assists users to learn how to use the features faster by depending on their prior experience with those systems. Also, saves time and effort for dev teams to build. 

Telstra cover.png

NEXT PROJECT

I worked in an Agile environment to ship our very first B2B, wholesale agent console where businesses can sell Post-Paid plans in the Agent consoleWe enhanced the overall experience for customers taking up these services and enabled the eventual migration of legacy-based services to the Console.

  • LinkedIn
email.png

Multibrand solutions case study