Redesigning Checkout Process

Berlin, 2018 | @smava GmbH | real project

 

Background

I worked as a UX Designer for Smava, Germany's leading loan portal making personal loans transparent, fair, and affordable for consumers.

 

My role

I was the lead designer of this project.

 

Problem

  1. The business team wanted to reduce their average CPA (cost per acquisition.)

  2. The investigation into breakdown of costs revealed most significant aspect was customer advisor involvement in the majority of sales (expensive human-in-loop.)

  3. User research confirmed that people needed support because they couldn’t complete from the process by themselves due it being confusing and too complicated.

 

The existing checkout process includes four steps: verification, identification, contract signage, and bank-approval. The user had to go through four steps to finally get the desired loan. The process was not very user-friendly and also varied for each bank, with varying document requirements and differing online/offline capabilities.

 

Goal

Define a user-centric checkout process which prioritizes digital flows over the offline ones, encouraging (and empowering) users to complete the process without human support.

 

My Role

I worked on this project as a UX Designer, partnered with Product Owner and Developers.

 

Approach

To determine how to best proceed, we ran a Google Design Sprint to identify possible solutions. We narrowed it down three designs and tested them using prototypes. We then selected one to implement. User-research and engineering were also present to make sure we understood the constraints.

 

I ensured that I understood all of the constraints by creating user-flows.

 

Interview with Yu about video-ident experience:

Below is the sequence of steps and feedback from the user interview for the video-ident experience.

1- Take a photo of my face using my phone.

2- I'm asked to wave my hand in front of the camera I guess this is to prove I’m a real live person.

3- They switched my camera to the front camera remotely. I was surprised since I didn't realize this was possible.

4- The agent asks me to show my passport's ID page.

5- I'm asked to tilt the passport to allow them to see the reflections on it. This part was a bit difficult since I moved it too quickly and had to try again.

6- I was asked to read-aloud my passport number and my birth date.

7- Then I was asked to show the front cover of the passport.

8- They sent me an SMS with a four-digit code which I needed to type in.

9- She said the number was correct and everything was now done. Success.

Overall, I felt that the process was very smooth and it went well. The only thing was that the first agent I spoke to during identity verification didn't speak English and so hung-up on me😅 I therefore needed to call again. The second time was successful, luckily.

 

 

Hypothesis

The hypothesis was that the new design would reduce by the percentage of sales that need human input from 50% to 35%.

 

Current status

We created the designs below and ran A/B tests of them against the original ones. This is now ongoing.

 
 

 Before | Offer list

  1. Users might not know the meaning of those numbers on the offer list

  2. Too many ambiguous elements. e.g. dates, the thumb-up icons

  3. Too many options at the same time, users cannot focus on the next step

 

 

 

 Before | Overview of the selected offer

  1. Displaying multiple banks at stages of the process after the user has already selected one creates unnecessary decision dilemma

  2. Ambiguous and unclear call-to-action buttons

 

After | Offer list

  1. Provided information to help users make a decision

  2. Adjusted the emphasis on the display of numbers to draw the users attention to the most relevant, making it easier for them to make their decision

 

 

 

 

 

 

 

 

 

After | Overview of the selected offer

  1. By displaying the process flow partially completed we used completion bias to help motivate the user to finish

 

 Before | Document upload

  1. New tab/window opening might cause users get lost in their tabs

  2. Chosen bank is in the middle of a long list → user cannot focus and can get confused

  3. Automatic file renaming is confusing

  4. Displaying a success message on the same area as a submit button is confusing

After | Document upload

  1. Used a conversational tone of voice to come across as friendly and helpful

  2. Highlighted some of the benefits of digital submission to encourage them to try this method

 

Before | video-ident

  1. It may not be absolutely necessary to talk about the benefits of video-ident and how it works here because users have already chosen this method

  2. Users might not need to know about TAN in this step yet

  3. Users need to understand that TAN will only be sent during the video-chat.

After | Document upload

  1. Clearly introduce what will happen in each option to help users make a decision

 

 
 

Results

This project is still in the progress.

 

 

 

Thank you for reading.

・・・