top of page
Anchor 1
The main Challenge

Current checkout funnel had many issues such as:​

  • Poor Ux and lots of friction

  • Not mobile friendly

  • The front-end technology was still inside monolith

  • Over +80% of the abandonment rate.

​

The Design process includes:

  1. Creating an audit and defining the problems with the PM

  2. User Research and bench markeing and consulting with Baymard institute

  3. Workshop with the team and creating wireflow

  4. Ideation (Designing multiple solutions)

  5. High fidelity Wireframes and prototyping

  6. User testing

  7. Iteration

  8. Migrating the elements to the new Design System

Checkout-Deskto.Page2.png
Key Objectives

I took care of the end-to-end process of this project and have been involved in the entire lifecycle. From defining the problem to ideation, validation, and final execution. 

  • Increase the share of automatic bookings

  • Offer WOW Service 

  • Decrease 80+% abandonment rate

​

Checkout lite flowchart (2).png
Checkout-Form.png
Checkout-breadcrumbs.png
Checkout-CC.png
The UX Approach
Checkout-desktop.png
Checkout-CC1.png

The UX approach was to create a smooth and yet trustworthy experience. Checkout is a very sensitive touch-point. Hence, gaining trust from the customer is a crucial step to success at this stage. Here are a few UX improvements I can share:

  1. Giving feedback to the users (positive and negative) after interaction with each input field

  2. Set Credit card payment as a default payment method to encourage users to pay with the credit card

  3. Improve the product preview widget with transparent price breakdown and keep it consistent in every step

  4. Breaking the steps into a maximum of four and creating guidance with breadcrumbs in each step. (Done, Active, Upcoming step)

  5. Giving users the possibility to edit the inputs from the previous actions without leaving the page (Last step preview box and edit)

  6. Present the upselling better and improve the chance of adding them to the basket

Validation

​After receiving feedback from the team and voting session for the best solution, I prepared the high fidelity prototype and tested it with 10 users. We intended to test the product to both German and English-speaking users. For each demographics, I ran the user testing session with 5 participants.

Then I collected feedbacks and created a ''wall of justice'' to evaluate the feedback.

Wall of Justice 04.2021 (4).jpg
Wall of Justice 04.2021 (5).jpg
5magicnumber.png
New Design System assets and deliverable

One of the scopes of this project was to migrate all our visual assets to the new design system and adapt it to our product to bring consistency, efficiency, and product scalability on board.

Desktop
Mobile
Color palet 

Adapting and localizing the product brand colors to the new design system color value. The main brand colors have a value of 500 in the design system color value.

Success and Impacts

  • <70% Checkout abandon rate

  • Improved share of automatic booking by 20%

  • Improved NPS rate by 14%

  • Reduced customer service contacts during the booking

 🤦🏻‍♀️ What went wrong?

  • Time estimation of the project. The project expanded by three more sprints than it was initially estimated.

  • Engineers were not challenged enough during the POC sessions, which led to technical issues during the implementation.

  • The credit card input design didn't match the payment provider format, so we had to compromise some minor usability.

  • Some of the usability improvements had to fall back to the original version. For instance, optional input fields like providing  Phone Numbers had to fall back to obligatory fields due to some back-end and payment providers restrictions

My Role
bottom of page