Affinity leasing

Website

This is a new vehicle leasing product designed to attract external companies and allow them to offer company perks such as vehicle discounts. As the Product designer on this project, I was responsible for the research, design and testing.

A design for the vehicle product page
Customer dashboard

Research

Due to time constraints our research focused on competitors and utilising the knowledge of our employees, based in the leasing department of the company. With their close customer relations, we were able to highlight journey pain points.

One problem which was quickly identified was the selection of paint colour in the journey. Colour rated highly in the customer needs but was one of the last choices of building the car. This was an issue as a vast amount of extras could only be selected with certain colours and trims. So the user would go to the trouble of selecting their extras but would find out at the end that these were unavailable with their colour choice.

Website examples of our leasing competitors
Competitor research

Journey mapping

We started by mapping out the sections required for the application process, which was dictated by the questions required for completing a credit check. I split this out into chunks of information and iterated upon with the stakeholders and legal team to make sure the product was compliant.

An Overflow artboard containing a journey map
Our basic journey map

Working with questions

Once the initial process was mapped out, I started listing the questions required for each page. Short hand form design allows for quick visualisation of the form components and is much easier to change than designs or code.

A text editor containing our short hand form design
Short hand form design

Sketches and wireframes

With the journey starting to take shape, sketches and wireframes began. This helped flesh out different ideas that we were able to discuss and test with users. The wireframes were uploaded to Overflow allowing the team, stakeholders and legal visualise the full application journey.

Two pages of very early site sketches
Flow sketches
Three examples of project wireframes
Flow wireframes
An Overflow artboard containing mutliple wireframes linked together to create a user flow
Wireframes linked through Overflow

Selecting extras

Allowing the customer to build their ideal vehicle was a difficult task. In some instances, brands such as Mini and Fiat have hundreds of items available. In many cases these extras regularly conflict. From early user research we discovered that paint and trim rated highly with customers. Having this selection early in the journey allowed us to narrow down the conflict messages the user may see.

With multiple extras being added or subtracted in one selection, this information needed to be clear and allow the user to fully understand the build and cost implications.

A sketch of early ideas for selecting vehicle extras
Extra selection sketches
Wireframes for selecting vehicle extras
Extra selection wireframes
Final designs for selecting vehicle extras
Extra selection designs

Final screens

Using our design system Chassis, the team was able to quickly build the front end code and move to later stages of testing with customers. These designs ultimately moved to production.

Final designs containing vehicle images, colours and correct fonts
Some of the final desktop screens
Three iPhones showing mobile designs
Mobile designs