RESPONSIVE WEB EXPERIENCE

Automotive agreements platform

B2B • Product Redesign • Service Design • User Experience Design • Interface Design

Results

Acquired by US firm for £41m. Increased mobile usage, delivered global localisation feature, and client customisation features, implemented responsive design system with a mobile-first optimisation of design

Challenge

Dealflo was a London-based FinTech delivering financial automation services that reduce costs and legal risks. With series B funding, they prioritized focusing on improving user experience (UX)

Initially built on WordPress, the product neglected customer experience, resulting in a clunky flow and broken mobile experience, leaving customers confused.

Clients targeting a younger, mobile-savvy audience experienced high drop-off rates, hindering business growth.

Scope

UX Strategy
Usability Testing
Service Design
Stakeholder Interviews
Stakeholder Management
Information Architecture
Responsive Design
UX Copywriting
Design System

Research

Understanding the business

One on one senior stakeholder interviews helped to understand the key business objectives and challenges.

These interviews also aided towards the beginnings of an understanding of a typical customer for Dealflo's digital product

Design workshops

We ran workshops to expose the current product user flows which aided a conversation to better understand the key challenges the business was having with its current implementation.

During this time we were able to agree scope, priorities and deliverables within the appropriate timeframes.

We also took this opportunity to create a company-wide understanding of the current device market and why a responsive solution was the most appropriate deliverable for the business, it's key challenges and the users of the product.

Personas

Through the research studies from inside the business we were able to development some assumptive personas of Dealflo's key users.

These give us the starting point for an understanding of each user base, their unique challenges and it empowered a starting point to begin considering potential feature to help aid each of them.

Key clients

This persona represented the finanical institution or the business offering the credit agreement that Dealflo's product protects through their secure signing process online.

Intermediary clients

This persona represented the third party distributor or car salesman that was positioned on the front-line and making the sale to the end consumer.

Mobile credit consumers

This represented Dealflo's clients, client. This was someone technically savvy and completely happy making a purchase, or committing to a credit agreement online.

This persona was often utilising mobile technology and it was this persona which was least serviced from Dealflo's original product experience.

Here was where the key challenge lay for the business. Most drop-off for clients where coming from mobile devices and this had an increasing impact on Dealflo's ability to deliver for its clients.

Structure

System design

It was essential for the team to have an understanding of how the entire system delivered for multiple clients each with different business requirements.

Understanding this empowered the team to rectify key problem areas for users which were highlighted with user stats showing increasing drop-offs especially from mobile device users.

Unresponsive implementation

The original interface for Dealflo's product had been implemented without a responsive grid. Which made the product challenging for users to sign agreements via mobile devices.

Responsive framework

Bringing a responsive framework to the product meant that interface components across the product could respond and change position depending on the screen sizes of the device which the product was being viewed upon.

This empowered the product team to deliver an intuitive experience for both the dealerships using tablet devices and consumers accessing the platform via a mobile devices.

Original page structure

Dealflo's original page layout was found confusing by users, particularly as it changed structure and format across the user signing journey.

Challenged with button labelling meant unclear features making it tough for users to get an immediate understanding of hierarchy and importances for their signing journey.

Drastically different client customisations requests often meant increased development times making it challenging for the team to supply accurate estimates.

The progression indicator changed across the flow and even broke when the product was viewed through mobile devices.

Improved structure

Delivering a consistent structure through page layout and design, running through the process brought familiarity to those users working unassisted.

We standardised the customisation for client branding enabling improved delivery speed to market for the product team.

A progression tracker working across the solution avoided the broken experience on mobile previously experienced by users.

Tackling key pain points we introduced a clear confirmation section, clarifying customer approval, dealership salespersons understanding and lowered any potential financial risk with each agreement.

Wire-framing sticky points

Handover screens

This sequence of screens was designed to improve a particularly sticky point within the signing process that most users found confusing.

Mulitple occasions within the signing ceremony could involve a handover which meant it was important for complete clarity for users and the evidence being collected during each credit agreement signing.

Improved navigation

Challenging navigation items through the flow didn't help unassisted users with their credit agreement signing.

Using a mobile-first approach we simplified unclear labels and reduced unnecessary options which helped to streamline the interface design making it easier for users.

Assisting users

We wanted to give users complete clarity throughout the process, delivering an easier experience and improved evidence for the finance provider.

To do this we separated out confirmation of understanding and navigation item to the next stage in the process.

Design system

Bootstrap framework

Utilising Bootstraps responsive framework meant speed to market and ease of implementation for the product team.

Along with a responsive grid comes an entire suite of interactive components that gave the development team a huge step up with the implementation which made it a matter of styling and customisation ready for the Dealflo product.