Online Credit Application
As the UX Designer dedicated to a small agile product development team at an auto finance company, I completed a redesign project to transform the existing one-page Online Credit Application into a Multi-Step experience.
The main goal of this redesign:
improve the experience of completing the application on a mobile device.
Original One-Page Application on a mobile-sized screen.
Redesign Proposal
As the UX Designer on a product team responsible for an Online Credit Application for auto financing, I picked up an initiative for redesigning the existing one-page application into a Multi-Step experience where the team's previous designers had left off.
I combined previous designers':
-
wireframe proofs-of-concept comparing "Wizard-style" and "Accordion-style" multi-step approaches,
-
corresponding recommendations based on user test results, and
-
digital forms best practices analysis' recommendations,
into a formal redesign proposal for the product team.
Proposal deck summarizing UX research & discovery work to support a Wizard-style Multi-Step redesign.
Note: The term "Multi-Step" is used in this deck to mean "Wizard-style" design (to distinguish from "Accordion-style" design).
Information Architecture
Due to our product team's small size and consequent velocity, our MVP of this Multi-Step redesign project focused on transforming the overall structure of the application to improve the mobile experience.
In other words: For this project, we treated the existing applications' sections as units to be reorganized, saving improvements on the individual form fields, labels, etc. within each form section for later.
Problem to solve:
How should the following optional/additional sections be included in the application's architecture?
-
Co-Applicant Information (all the same info needed for Primary Applicant)
-
Previous Housing & Employment
-
Additional Income
Competitive Analysis
I did a synthesis of the application architecture structures used by competitors' credit applications and found two main approaches for including optional/additional sections:
-
treated as extensions of an appropriate main application step
-
treated as their own 'steps' in the application
Capital One Application Architecture
Volkswagen Application Architecture
Bank of America Application Architecture
Capital One Application Architecture
Examples of the competitor analysis activities I executed to investigate options for application architecture.
Note: Three examples are shown here for brevity; more than three competitors were examined.
User Flow Diagrams
I created user flow diagrams to illustrate the difference between the two most popular application architecture structures used by competitors.
User Flow Diagram version1
User Flow Diagram version2
User Flow Diagram version1
User Flow Diagrams illustrating two different approaches to the new credit application architecture.
Wireframes
I created two wireframe prototypes, one for each architecture approach ("As a Step", and "As an Extension") to put through user testing to gauge which approach users liked best.
"Step" version, Housing screen
"Step" Version, Previous Housing included
"Extension" Version, Previous Housing included
"Step" version, Housing screen
Sample screens from both wireframe sets, "Extension" version and "Step" version.
User Testing Conclusion
The two wireframe prototypes depicting the different architecture approaches were put through a round of user testing, courtesy of my product team's dedicated User Researcher. Users completed the simulated application much quicker using the "Extension" prototype, and remarked that that version felt smoother and easier.
- Quote from Test Participant
"This design [the "Extension" version] is clearly the same amount of steps as the other design, but it just feels faster and it feels like it's saving me time."
Architecture Conclusion:
The "Extension" version wins.
Interaction Design
Once the overall architecture approach was validated by user testing, I needed to bring the fidelity up in order to focus on the interactions between the user and the interface.
High-Fidelity Mockups
I turned my "Extension" wireframes into high-fidelity mockups and prototyped the complete application process.
High-fidelity prototype of the redesigned Online Credit Application mobile experience.
Note: Only key screens are shown in the above screen recording.
Buttons, Sticky Headers, Expandable Sections
In order to improve the mobile usability of the longer sections of the application, I had to create UI elements to aid in achieving progressive disclosure while also maintaining visibility of key information.
Additional Income
Users may choose to add an additional source of income as a sub-section of the Employment form chunk.
Add/Remove Co-Applicant
The button for this expandable section features a double avatar icon and a plus icon/"remove" label for quick visual recognition of function.
Sticky/Scroll-then-fix Header
After the "Add Co-Applicant" button has been clicked to add the Co-Applicant section to the page, the button doubles as a portion of the page's sticky header (scroll-then-fix functionality).
Responsive Web Design
I took a mobile-first approach to designing this new multi-step credit application, so translating the design to larger screens was one of the last phases of the project. The following mockups show the design on desktop.
Screen recording of high-fidelity prototype showing desktop mockups for this Multi-Step redesign.
Next Steps
Once the design work was complete for the first iteration of the new multi-step application site, I started working on strategizing the next step: improve and optimize the UX of each application section itself.
-
Card Sort test set-up
-
Designing alternative UI approaches for gathering the required information from users
-
Brainstorming opportunities for research to guide the next design changes