Check-out section - Case Study

Company: FAIR technologies
My Role: Senior UX/UI designer
Deliverables: User flow, Wireframes and Prototype (Web & mobile)
Wins: 80% Improved Efficiency / 90% Customer Adoption
Project Overview
Fair is an E-commerce website that sells cars online. The challenge is to move the contract signing portion of the check-out to an online process. Currently customers have to go in-person to sign the contract lease/buy for their car. This leads to less customers finishing the buying process and less revenue for Fair in general.
Problem to solve
The goal is to provide consumers with a seamless contract signing experience for Fair’s online car buying website. The focus is to create a step-by-step,  easy-to-navigate experience that offers clear instructions and makes the consumer feel secure and excited about the transaction. Minimal effort and help along the way was the goal. This will encourage customers to finish the entire buying process online.
The Process

For this project the User Discovery portion needed to be extensive since we had to understand the business impact and we had to understand our users about their current experience of buying cars online. We decided on a design-thinking method approach for this project.

01. Discovery
Comparative Analysis

As part of our Discovery phase and in collaboration with the UX researcher, we performed a comparative analysis to see what our competitors were offering in terms of contract signing solutions. We noticed that most of them didn’t have an online check-out and none of them were providing an online Contract signing.

‍
01. Discovery
Interviews

We  interviewed 10 participants that were in the process of buying a car. During interviews, some of the requests to sign a contract online included:‍
02. Define
Workshop
During our brainstorming session. I organized a crazy 8's session (with Figjam) to brainstorm UX flow ideas and UI ideas. There were two product designers and one UX researcher involved in this workshop. All of us came up with different ideas during the 8-minute timeframe and presented our solutions for the contract signing section.
‍
‍
Our biggest challenge was to create and easy to follow flow that would allow the consumer to go trough the entire process of 19 documents to sign and a time limit of 12 hrs. It was necessary to create an elaborate the user flow to illustrate the entire process of signing the contract once the user had reached the check out stage. This was a collaboration process and a constant sync meeting with the PMs. We came up with the sections and step by step process for the users.
02. Define
User flow map
02. Define
Personas

After the interviews, we identified 3 types of personas or customers that were likely to search for this online car sales service.
03. Design
Wireframes

Two versions of the process were designed, but we chose the one that best fitted the check-out process that was previously designed. The design needed to be work for both Web and native mobile.
04. Validation
User testing

A high fidelity prototype was created to start the user testing with 12 participants. I created a clickable Figma prototype where we made the customer go through the entire contract signing pages. We used  usertesting.com to record the user testing process. In collaboration with the user researcher we gathered the feedback and the recommendations were implemented into the final version.
05. Final Design
High fidelity
prototype

The final design was in both web and mobile using the design system of FAIR which was still in development at the time. The final version was launched at the end of 2024 when the company SHIFT acquired Fair technologies and applied this check-out section on their website. Currently SHIFT uses this current design.
MY LINKedin