A seamless check-out experience
Profil Rejser is a leading travel agency located in Copenhagen, Denmark. They offer unique and highly customizable travel experiences for individuals and groups around the world and they have won the price for “Best Travel Agency” in Denmark several times over the years. Their unique selling point is the highly customizable trips that enable customers to design their own dream vacation.
For this project, I was tasked to be the Product Owner and Product Designer for the redesign of the check-out flow. Following a process heavily inspired from Lean UX, the core phases of the process stretched across understanding the needs of the users, declaring hypotheses about the desired solution, creating an MVP and then experimenting to gather feedback for further iterations. In this process, my team and I were able to produce an end-to-end redesign suggestion for improvement based on user behavior, user research and knowledge of best practices on well-converting check-out flows.
Client research sessions
Weekly design critiques
Design from early sketching to high-fidelity prototype
Project delivery to client
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 therefore 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.
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.
Step 1: 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 lean ux design Process
The Lean UX process consists of four general phases. The process is close to a traditional scientific approach – namely that you research through a design rather than for a design. In that way, the designer gets to create something quickly, and then get immediate feedback through user testing.
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.
From the understanding and empathizing, we were able 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.
User flow exercise
From this exercise we quickly saw the repeating elements, the confusing elements and the vital elements in the check-out flow.
From this collaborative exercise of dividing the flow into different steps, the next step was to digitize the flow for easy communication to the client. I decided to use a simple user flow diagram for conveying the insights to the client. The client quickly approved the direction in which we were heading, and thus we used the user flow diagram as the guide for the following creation of the MVP.
The userflow to the left shows the different steps in the new checkout flow.
Step 2: 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:
- 1. 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
- 2. By putting the traveler information in the last step, the user will feel more motivated to complete it.
- 3. By making the checkout flow more mobile friendly, it will attract more users on mobile devices.
- 4. By including an “Order Summary” box and a clear opportunity to review before placing the order, the user will feel more secure
- 5. By using more white-space, the user will see what’s important and what is not.
Step 3: CREATE AN MVP
With the hypotheses outlined, we created an MVP in Sketch and made it interactive in InVision.
Minimum viable product
To the left 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.
Step 4: 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.
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.