honda_sketch_gray.png

Online Credit
Application Design

UX/UI • Automotive

Client

Honda Canada Inc.

My Involvement

UX Designer/Lead: requirements gathering, workshop facilitation, UX/UI design

Our Team

Shiva Prakash (Phase 1 Project Manager)
Justin Seto (Phase 2 Project Manager)
Blair Fast (Phase 1 Design Lead)
Ricardo Coelho (UI Designer)
Gord Henning (Copywriter)
James Quon (Copywriter)

Timeline

Phase 1: October - November 2018,
Phase 2: February - April 2018 (5 months)

honda sketch.png
 

Problem Space

Many automotive customers are spending a significant portion of the shopping cycle online rather than at the dealership. This shift in customer behaviour coincides with an increased adoption of digital shopping tools by prospective customers.

Honda Canada was looking to modernize its credit application process as part of a larger effort to enhance their customer’s online shopping experience. To take their existing credit application from paper to digital, our Design team was engaged to develop the MVP user experience and later the detailed designs to take into development.

01. Strategy

During the Strategy Phase, the project team defined the vision and strategy for a customer-friendly omni-channel, credit application solution that would enable Honda customers to self-serve their vehicle financing needs in an accessible and transparent manner. Specific activities and outputs included:

 

Customer Identification

Four customer segments were identified based on their behaviours, needs, frustrations and goals. These segments were developed into personas, and corresponding current state journeys were also developed with an emphasis on the emotional state and high priority moments that matter.

Sample Customer Persona

Sample Customer Persona

Sample Current State Experience

Sample Current State Experience

 

Future State Vision

A workshop was held with Honda executives to co-create a future state vision which addressed the previously identified problem statements, solutions and impact, emotions, touchpoints and potential risks.

Future State Journey Map

Future State Journey Map

Future State Customer Experience

Future State Customer Experience

 

Idea Prioritization

The proposed solutions were mapped back to the problem statements to ensure that the team would design towards core user needs. Then, the solutions were evaluated on their desirability, viability and feasibility.

Prioritization Matrix

Prioritization Matrix

02. Requirements Gathering

UX Requirements

Our Design Team was engaged to bring the online credit application vision to life. To start, I translated the future state journey map into a screen flow.

screenflow sketch.png

We then conducted a UX workshop to gather UX requirements and validate the screen flows with Honda executives.

screenflow workshop.png

After validating the screen flows, we prioritized the most complex screens to develop mobile wireframes for, which included:

  • Screening Questions

  • Application Information

  • Co-applicant Information

  • Trade-in Details

  • Review & Submit Page

  • Decision/Results Page


Functional & Technical Requirements

Concurrently, our other team members gathered functional and technical requirements through workshops with Honda executives and the Development Team. We worked closely alongside all stakeholders to ensure we were aligned and that any impacts to UX based on the functional/technical requirements, or vice versa, were communicated clearly. Outputs included:

  • List of functional requirements

  • Architecture refinement

  • Sequence Diagram Mapping

  • Exception Scenario Identification

03. Prototyping

Design Principles

Before diving into prototyping, we developed design principles based on the needs, pain points and goals of customers - uncovered during the Strategy Phase - as well as inspiration from industry leaders and UX best practices. These principles provided the basis for design decisions to ensure an intuitive, frictionless and flexible experience for users.

 
 

Principle 1: Less is more

Reduce clutter and keep things simple to focus user’s attention and decrease cognitive load.

Principle 2: The faster the better

Only ask what’s mandatory, minimize steps needed to complete a task, and reduce typing effort.

Principle 3: Situate the user

Ensure the user knows where they are in the process.

Principle 4: Make it seamless

Keep it fun and engaging in terms of the tone and look & feel, to relieve barriers traditionally associated with application forms.

 
mockup_transparent.png
 

Prototypes

I created interactive mobile and desktop prototypes to capture the end-to-end flow of the online credit application, including conditional logic applied to certain screens and questions. This helped stakeholders better understand what the customer journey could look like and was used to drive design review sessions, test concepts, and gather feedback for continuous iteration.

Wireflows

I created several wireflows to illustrate the various entry points into the online credit application as well as non-happy path scenarios (i.e., if there is a price change, or an accessory is discontinued before the user finishes applying).

oca_axure sep7.png
 
 
price_accessory_change copy.png

04. Detailed Design

Finally, I worked with our UI Design team to create high-fidelity designs for both mobile and desktop, which incorporated Honda’s style guide, copywriting, and ensuring the designs met accessibility standards.

We held several Design Review Sessions with Honda to gather feedback and iterate on the wireframes and detailed visual designs to ensure that they addressed user needs and also captured information required by the business.

Gravity-Devices-UI-Mockup-Set-vol7.png

Impact & Reflections

 

Impact

The online credit application will provide customers with a flexible, fast, and transparent way to apply for credit. They will be empowered with information regarding, for example, their vehicle trade-in value, and reasonable add-ons based on their pre-approved credit amount.

The online application also creates business value by providing another medium to get customers into the sales funnel. It reduces the time required by dealers to get customer information so they can focus their time on providing tailored products and services.

Reflections

Ideally, our Design Team would have been engaged from the the very start - the Strategy Phase - to be more integrated and customer-focused. The personas were developed based off of assumptions of customer segments and behaviours. There was an opportunity to speak with real customers to better understand their experience with the existing paper credit application process, as well as their needs and wants. Additionally, it would have been beneficial to test the designs with real customers before taking them into development.

We also faced pushback from the Development Team as we had been so ”user-focused” that we did not give enough consideration to technical feasibility and cost constraints. Eventually, we took a step back and collaborated with the Development Team and business stakeholders to modify our designs so that they not only created a good user experience, but were also feasible given technical, time and cost constraints.

Previous

Flagship Digital Retail Experience

Next

Game Plan for the Future of Athletes