THE CHALLENGE

Overview
Blue Motor Finance was voted the fastest growing company in Europe by the FT1000 in 2019. 130,000 car loans in 4 years using over 2,500 car dealers, saw a 17% YOY increase and the Dealer Support department needed a new dealer onboarding system that could keep up with this rapid growth.

My role
As sole UX designer at Blue, I was responsible for designing and improving their full suite of SaaS products including.
- Sale Support, a dealer onboarding system with 4 user groups.
- Bluesign - an online-signing mobile app.
- Customer Portal.
- Apply, a customer finance proposal app.
- Company website and a web-based App Store.

The squad for this particular project included myself, PM, BA and the in-house development team and this case study gives an overview of the end-to-end process.

RESEARCH

There were 2 key research types that I needed to use. Firstly, generative research, looking at our 4 user groups and their issues with the current system. Methods included current system observations, interviews and surveys and this provided a clearer picture of the problems I needed to tackle.
I also used evaluative research techniques to assess my early prototype design.

RESEARCH | STAKEHOLDERS & USER GROUPS

My initial generative research would focus on understanding user expectations, behaviours, needs, and the motivations of company stakeholders as well as the 4 user groups.

1. Area Sales Managers (Desktop 60% Mobile 40%) who work on the road, visiting car dealers and starting applications as well as building and managing relationships with them.
2. Dealer Support (Desktop 100%) who work in the Blue offices, dealing with missing information and checks (companies house, FCA, ICO etc) before an application can be accepted.
3. Regional Directors (Desktop 70% Mobile 30%) who work both on the road & in the Blue offices, managing the Area Sales Managers.
4. Investigations (Desktop 100%) who work in the Blue offices, making sure each application meets laws, regulations, professional standards and accepted business practices.

We also spoke to the analytics team as this new system would be able to help provide new data insights. 

RESEARCH | CURRENT SYSTEM AUDIT

Using the Jakob Nielsen's 10 general principles for interaction design, I conducted a heuristic evaluation of the current system to see what usability issues it had. I found many problems including the system status, the user language, control and freedom, error prevention and lets not get started on the aesthetics…

RESEARCH | OBSERVATIONS, INTERVIEWS, SURVEYS

Our PM and I sat down with 2 members of each user group and ran interviews and observation sessions to see them interact with the current system in their own environment and to see what their behaviours were and what pain points they had. We then emailed out surveys to all members of the 4 user groups to gather further data.

RESEARCH | DEALER SUPPORT USER PERSONA

With the data from the tests, interviews and surveys, I put together a user personas of each of our 4 user groups. This is the John, the Dealer Support persona with key demographic and psychographic data. (As Dealer Support was the key user group, I thought it best to show their persona, empathy and user journey map).

RESEARCH | EMPATHY MAP

Elaborating on the above persona and to get further 'inside the head' of a Dealer Support user, I produced this empathy map. 

RESEARCH | USER JOURNEY MAP

This is a journey map of a member of Dealer Support. It shows all the main touchpoints they encounter when working on an application using the current system and then identifies the positive and (many) negative emotions / thoughts of that touchpoint experience.

RESEARCH | ONBOARDING PROCESS MAP

Insight from an interview with the sales director revealed that the business wanted to change the old flow of the dealer onboarding setup process (below) and introduce a live system demo to dealers - the instant option - early in the process which would alleviate time pressures on Dealer Support. We would still need to include a full application option too (the current system process). 

Working with the sales director and our business analyst, we produced this new map showing the instant demo process. 

RESEARCH | INSTANT AND FULL APPLICATION FLOWS

Again from initial research, I discovered a major problem with the current system was the lack of clarity between users where they were in the application process / flow. Status' were underused and communication between users was poor, time consuming and mainly done over the phone. I was asked to work out an action flow for both instant applications and a full (non-instant) applications that would guide the 4 user groups through an application seemlessly with constant clarity so you know where in the process an application was, who had it and what the next action needed to be.

RESEARCH | STATUS MAPPING

The current system had 10 action statuses which were hard to understand and left it unclear to which of the 4 user groups the status was assigned to. After being mentioned in most of my interviews with the user groups, it was clear I would need to increase the number of statuses dramatically so to offer much needed clarity and direction on the application flow as well as helping Dealer Support with more detailed report (another request). I also needed to work out how the current applications in the system would possibly be mapped over and who they could possibly be assigned to and what problems it might cause.

SYNTHESIS

After combining all our research results, the PM and I sat down with Blue's Director of Product to show our findings and to start prioritising what design problems we should tackle first. We had several brainstorming sessions and worked out a product roadmap.

SYNTHESIS | FINDINGS 

Below shows the key problems from each specific user group, things that kept appearing time and time again. Our biggest priorities for the redesign included the new application process, to be fully automated with APIs to help make the workflow more efficient and avoid pressuring bottlenecks, clearer statuses and a better search function. ASMs were keen to shift to a more mobile first system when out on the road and a better designed application form would also help with reporting and analytic data. Further releases to the system included an alert and a do-not-deal feature, a review section, mobile notifications for ASMs and expanding the system to factor in the new Stock Funding product. 

SYNTHESIS | DEFINE & FRAME THE DESIGN CHALLENGE

IDEATION

Pencils and paper out for the the next step of the problem-solving process and several sketching sessions to generate concepts and communicate ideas. 

The best way I’ve found to quickly, easily, and comprehensively communicate with both my team and my users is to share sketches throughout the whole project. Not only does this help me articulate how I plan to tackle a problem, but by thinking out loud on paper, it allows everyone involved to see how ideas begin, evolve, and finally crystalize into the solution we’ve all been working toward.

IDEATION | SKETCHED / LOW-FIDELITY WIREFRAMES

I started with initial ideas for the main navigation, shown below in mobile form, but also expanded to desktop.

IDEATION | SKETCHED / LOW-FIDELITY WIREFRAMES

Working on search function concepts...

IDEATION | RAPID PAPER PROTOTYPING 

Once the concept started forming, I made regular visits to Dealer Support and Investigations and invited several local ASMs and Regional Directors to the office to test paper prototypes. This was a really helpful exercise and I would later use these same user groups to test a more developed low-fidelity prototype.  

IMPLEMENTATION 

Into Sketch to quickly produce mid-fidelity wireframes to help define specific elements of the interface, the visual hierarchy and basic information architecture.

The wireframes were put into InVision to create a usable prototype to run usability tests with members of our user groups to help us identify and focus on any essential problems. User opinions and feedback was fed back to our team and we then decided on how to modify the product and create fixes to the major issues. The process is then repeated until we reached a solution that met the needs of the 4 user groups.

IMPLEMENTATION | MID-FIDELITY DESIGN 

The stripped-back design of this product revolves around functionality and usability, rather than colours or graphics (at this stage).

IMPLEMENTATION | MID-FIDELITY USABILITY TESTS

We arranged for 2 members of each user group to test the prototype in their working environment with PM taking notes as I set them certain tasks including navigation and searching for certain applications on the system. 

IMPLEMENTATION | UI DESIGN / BRANDING

After positive usability testing, we confidently felt we had a usable product which then needed to go to hi-fidelity visual design to enhance usability and improve the user experience. Whilst builting the Blue brand, I created a design system and pattern libraries to keep total consistency across all products and mediums. The UI was quite straightforward to implement once the design system was in place.

IMPLEMENTATION | HI–FIDELITY DESIGN

I worked on a full suite of hi-fidelity designs for mobile and desktop devices (with in-between variations) as well as including API breakdowns and flows. 

IMPLEMENTATION | DESIGN-TO-DEVELOPMENT HANDOFF

A smooth handoff to our developer is essential and as usual it's all in the planning. The design system and brand guidelines help offer consistency and then a clear run through of the designs as well as delivery of other checklist items like user flow, information architecture, interactions, copy and assets help too. I uploaded my Sketch designs into Zeplin and shared with the developer so he had access to all of my design specs. The process shown below highlights the designer-to-developer collaboration.

IMPLEMENTATION | FINAL BUILD

A beta version was user tested by Dealer Support and several ASMs. The development process took 2 months. 

ANALYSIS 

KPIs were set in the early stages of the project by our stakeholders to help define and track the progress of the new Sales Support system. UX metrics reflect human behaviour and attitude, then this kind of information is a bit difficult to turn into numbers. On the other hand, UX KPIs provide great insight into the size and magnitude of usability issues and help easily track their changes through time.

ANALYSIS | KPI RESULTS 

We were delighted with the feedback we received regarding the KPIs.