Redesigning Connective’s Client Centre

Streamlining Loan Applications for Mortgage Brokers

Project Overview

Connective is Australia’s leading aggregator, and its Mercury Nexus application is a popular tool among mortgage brokers. It comes bundled with several applications, including CRM, calculators, document management, marketing, and compliance tools. One of its key components is the Client Centre, a white-label portal that allows brokers to collect necessary information from their clients for property loan applications. However, the Client Centre faced significant usability challenges.

The objective of this project was to redesign the Client Centre, improving completion rates, accuracy, and overall user experience for mortgage brokers and their clients.

Note: Most of the illustrations and images have not been shared due to sensitivity and nature of data.

Problem Statement

The Client Centre’s original application portal had the following issues:

Below 15%

Completion Rate

Below 50%

Accuracy

Avg. 13 days

Completion Time

As the UX Lead, my goal was to address these challenges by improving the completion rate, increasing accuracy, and reducing the time required to complete a loan application.

High-level UX & Business Goals

Enhance ease of use: Simplify the loan application process for both mortgage brokers and their clients, ensuring the process is intuitive and user-friendly.
Improve accuracy: Reduce errors in loan applications by providing clear instructions, validation, and feedback mechanisms throughout the form.
Speed up completion time: Streamline the application process, removing unnecessary steps to enable users to complete applications faster.
Ensure accessibility: Design the Client Centre to be fully accessible to users with disabilities, following accessible design principles.
Create a positive user experience: Provide a pleasant, consistent, and helpful experience, making it easy for users to find information and complete tasks efficiently.

Stakeholders

UX Lead (myself)
UX/UI Designer
Product Owner
Product Manager
External Development Team
Solution Architect
QA and Compliance Teams

UX Process

Research

To fully understand the users and challenges, I conducted in-depth user research:

Fullview analysis and user interviews to gain insights into user behavior, pain points, and unmet needs.
Key findings: Users felt overwhelmed by the length of the loan application form and lacked access to essential data during the process, leading to frequent errors.

User Personas

We developed two key personas to represent our users:

Sarah (Mortgage Broker): Self-employed, always on the go, requiring mobile accessibility and the ability to quickly submit loan applications.
David (First-Time Home Buyer): Unfamiliar with the mortgage process, needing the platform to be simple, intuitive, and easy to navigate.

User Journey Mapping

I created user journey maps to visualize the steps each persona would take to complete the loan application process. This allowed us to identify pain points and bottlenecks:

Key insights: Users struggled with the lengthy and complex form, which led to high abandonment rates. To address this, we simplified the form and added instructional text to guide users through the process.

Ideation and Solution Development

Co-Design Workshop

To foster innovation and collaboration, I organized a co-design workshop with key stakeholders, including the UX team, product managers, and developers. Together, we brainstormed and prioritized solutions:

Key outcomes: Simplification of the form, improved information architecture, and the introduction of validation mechanisms to reduce errors.

Wireframes & Prototypes

Developed low-fidelity wireframes based on workshop outcomes, iterating with the team to ensure alignment with user needs and business objectives.
Content strategy: Collaborated with the marketing team to ensure the tone of the form was conversational and user-friendly.

Usability Testing and Iteration

We created clickable prototypes in Adobe XD and conducted multiple rounds of usability testing with real users:

Testing was conducted using online platforms like Dovetail and Miro.
Feedback from testing led to iterative refinements, including breaking down the form into smaller sections, adding a real-time progress bar, and providing clearer guidance throughout the application process.

Design System and High-Fidelity Design

I introduced a design system to standardize the design language across all touchpoints, ensuring scalability and accessibility:

Accessible components: Used widely accessible fonts, icons, and UI elements to ensure that the design could be adapted to any white-label standard in Version 2.0.
High-fidelity designs: Prioritized accessibility, usability, and inclusivity. Added features such as smaller question sets, smarter input fields, a real-time progress bar, and summary screens.

Accessibility Testing

To ensure inclusivity, I conducted extensive accessibility testing:

Used tools such as Stark, screen readers, color contrast checkers, and keyboard navigation testers.
Involved users with disabilities to test the platform and ensure that it met WCAG 2.1 AA standards.

High Fidelity Design

Development and Quality Assurance

Close collaboration with the development team was critical for a smooth handoff:

Provided design assets via Zeplin and conducted demo sessions to ensure alignment.
Worked with the QA team to test stories and resolve issues through Jira.

Results:

The redesigned Client Centre was piloted in January 2023, followed by a full rollout in July 2023. The new platform significantly improved the user experience and achieved the following outcomes:

Increased by 200%

Completion Rates

Improved by 120%

Accuracy

Reduced by 240%

Completion Time

These results demonstrate the effectiveness of the redesigned portal in improving both the efficiency and accuracy of loan applications.

Key Takeaways:

User research was instrumental in identifying pain points and informing the design process.
Collaborative ideation workshops fostered innovation and led to effective design solutions.
Iterative testing ensured that the solutions met user needs and preferences.
Accessibility considerations were critical to creating an inclusive experience for all users.
Simplifying the application process and providing real-time feedback significantly enhanced user engagement and efficiency.
Collaboration with the development and QA teams ensured a smooth implementation and high-quality output.

Post-Launch Analysis

After the full rollout, I conducted post-launch analysis to track key performance metrics:

Completion rates, accuracy, and completion time were monitored using analytics tools.
User feedback was gathered to inform further improvements.

The redesigned Client Centre offers a more streamlined and user-friendly experience, allowing mortgage brokers and their clients to complete loan applications efficiently and accurately.

Conclusion:

The Client Centre redesign for Connective was a significant success, addressing key challenges and improving completion rates, accuracy, and efficiency. By focusing on user-centered design, accessibility, and collaboration, we created a platform that simplifies the loan application process for both brokers and clients. The results speak for themselves, demonstrating the positive impact of a thoughtful, research-driven UX approach.