A seamless check-out flow to increase conversions

Product Designer @ Adapt 2017

Summary

Responsibilities

Workshop and design sprint facilitation
Client research and understand sessions
Weekly design critiques with internal and external team members
End-to-end design from early sketching to high-fidelity prototype
Final project delivery to client and collaboration with client's engineering part

Problem

Though a widely popular website for travel, Profil Rejser had a serious problem of low conversions in their checkout flow. Though the website had recently been developed by another agency, Profil Rejser struggled to make their customers go from being interested in a trip, to customizing it, to actually booking it.

They came to us to make sure that the new solution was fully researched, designed and implemented and thereby more successful in the end. However, there was only one catch: it had to happen in under three weeks.

Solution

A wide redesign of the entire check-out flow which would allow users to more easily navigate through and thereby convert, as well as highlighting add-on purchases.

The implemented solution received great feedback and led to a 22% increase in conversion rate.

Process Overview

Given this challenge, and given the short time frame for the project, we decided to run a Lean UX process. The client (Profil Rejser) already had a lot of hypotheses about a better solution and we therefore saw an opportunity in using these hypotheses, combine them with our own understanding, and then test them out in an MVP.

Lean UX is ideal for fast and nimble designs that enable deep insights and multiple iterations.

Understand

The first step of the process was to identify and understand the existing problems with the check-out flow. I facilitated a workshop with the client represented by a designer and a Marketing Manager to get a discussion going on their experiences, their needs and the business strategy. This workshop was done to make sure that the client’s interests were also considered in the new design.

Furthermore, to get an understanding and empathize with the users of the website, we used the online data analysis tool Google Analytics and the screen-tracking software Hotjar. These tools were used because they give great insight that fits the short time frame. From looking at these data types, we were able to identify where in the check-out flow the user would get lost.

THE OLD FLOW(RECONSTRUCTED)

This illustration shows the way the old flow worked: it was stepwise, but vertically oriented. This meant that once one step was completed, it “unlocked” the next step. This was quickly seen as confusing and blocking for the users.

Analyze & Define

We then moved on to divide the flow into steps that would solve for some of the identified problems. As a way of prioritizing the most important elements in the checkout flow, and to structure the flow in steps, we had an exercise were we cut up the elements in the flow and placed them where we thought the belonged on a whiteboard. We combined this with sketched we had made to begin to imagine how the new flow would feel.

From this exercise, we had defined six main steps in the user flow:

See an overview of the trip
Choose date
Choose nights
Choose add-ons
See summary
Send booking

With these jobs outlined, I was then able to move on to ideating on the solution.

Declare Hypotheses

We decided to move on to the declaring five hypotheses to test.

We came up with the following hypothesis to be tested with the MVP:

By grouping relevant information together in chunks, and putting it in a logical order, we will allow the user to focus on one task at a time
By putting the traveler information in the last step, the user will feel more motivated to complete it.
By making the checkout flow more mobile friendly, it will attract more users on mobile devices.
By including an “Order Summary” box and a clear opportunity to review before placing the order, the user will feel more secure
By using more white-space, the user will see what’s important and what is not.

Create an Artifact

With the hypotheses outlined, we created an MVP in Sketch and made it interactive in InVision.

Choose nights and hotels

This is the first step in the checkout flow, where the user selects the hotels to stay at. Here, we wanted it to be easy to toggle between different options, while still being able to see which nights the selections related to.

Choose add-ons

The user also needed to be able to add additional excursions and enhancements to their trip

Overview of guests

This was the most complex aspect of the UI in that we had to design it in a scalable way that would allow the user to add multiple adults and children

Overview of trip

This shows the summary of the selected trip and add-ons

Run an Experiment

After the MVP was created, we could now test out the hypotheses by testing the design on real people. For this, we invited five participants to our user research lab in Adapt. For the test, we followed a think aloud protocol, which consisted of an interview, then a test, and then a post-test interview again.

To see your design being interacted with is always very exciting. Here I am jotting down notes, while a user is testing the design.

Results

Implementation

We ended up with a great solution in the three weeks we had been given. The users were very positive, and the client as well. Implementation began in January 2018, and the checkout flow is now implemented with great results on the website.

The conversion rate was improved by 22%.