Loanworks

Application / Software Design

Project Time

Jan 2023 - March 2023

Role

Digital Design Lead

Team

Client: Loanworks

Digital Design Lead
UI Designer
Head of Engineering

Service

Research
UX/UI Design
Prototyping
QA Testing

Disruptiv Digital was tasked by Loanworks, a tech solution provider in the mortgage/loan industry, for screen designs for their new Loan Application.

The purpose of the design was for a white-label product they were developing to market to their own clients.

Loanworks Mockup

Challenges

Loanworks have been creating technology solutions that benefited homebuyers and the mortgage industry alike.

One stirring issue that was mentioned by Loanworks is the convoluted content and outdated designs that make it process look and feel like one long form.

My role was to enhance a new application they were developing with the following challenges:

Long Customer Journey Flows

Streamlining the process, ensuring a seamless experience that engages users at every step.

White Labelling

Crafting designs that resonated and adapted harmoniously for diverse clients.

Design Compliance

The designs have to be compliant to the rules and regulations of the mortgage/loans space while maintaining appeal and user-centric aesthectic.

Research & Flows

To initiate the Loanworks project, the team and I began by leveraging the provided baseline CX flow. This served as our starting point, guiding our initial steps. However, recognising the significance of a seamless customer experience, we embarked on comprehensive research and engaged in collaborative discussions with the client. This deliberate approach enabled us to elevate the flow even further.

By delving into user needs and preferences, we identified opportunities for refinement. Our objective was to curate a customer journey that not only incorporated necessary information but also adhered to regulatory standards. It was pivotal for the flow to resonate with users, ensuring that the process remained comprehensible and user-friendly. This iterative process allowed us to craft a streamlined flow that not only aligned with user expectations but also eliminated unnecessary complexities, ensuring a smoother and more engaging experience for customers.

Loanworks User Flow

Wireframe & Concepts

Building upon the aforementioned strategy, the next primary focus revolved around enhancing the 'pre-approval' experience across three distinct loan types offered by our client: personal loan, vehicle loan, and credit card loan.

The approach began with low-fidelity wireframes. These wireframes laid the groundwork for the UI screens, allowing us to seamlessly align screen layouts with the overarching user experience. This strategic approach helped in early identification and mitigation of potential bottlenecks and gaps in the user journey.

To ensure users stay in the loop, we introduced a progress bar. This helped users track where they stand in the application process, making it feel less like a marathon and more like a series of manageable steps.

In parallel, I worked on developing diverse design concepts, each showcasing a unique visual direction for the application. These concepts were presented to the client, fostering collaborative discussions to establish the final look and feel of the application.

Loanworks WireframesLoanworks Concepts

Wireframe & Concepts

Building upon the aforementioned strategy, the next primary focus revolved around enhancing the 'pre-approval' experience across three distinct loan types offered by our client: personal loan, vehicle loan, and credit card loan.

The approach began with low-fidelity wireframes. These wireframes laid the groundwork for the UI screens, allowing us to seamlessly align screen layouts with the overarching user experience. This strategic approach helped in early identification and mitigation of potential bottlenecks and gaps in the user journey.

To ensure users stay in the loop, we introduced a progress bar. This helped users track where they stand in the application process, making it feel less like a marathon and more like a series of manageable steps.

In parallel, I worked on developing diverse design concepts, each showcasing a unique visual direction for the application. These concepts were presented to the client, fostering collaborative discussions to establish the final look and feel of the application.

Loanworks WireframesLoanworks Concepts

A White Label Product

During the concept phase, our team faced the unique challenge of creating a white label product, which demanded meticulous consideration throughout the design process.

The client wanted the delivered product to act as it’s foundation when proceeding to market. We wanted to empowered our client to leverage the application as a powerful extension of their brand, allowing them to effectively connect with their own clients while maintaining a cohesive and consistent user experience.

Loanworks Whitelabel

Prototyping & Testing

For our clients, the prototype offered a tangible glimpse into the application's functionality, showcasing the envisioned animations and flow in action. This interactive representation provided them with a firsthand understanding of how the application would unfold for their users, fostering a deeper appreciation of the overall user experience.

The low-functioning prototype served as a powerful communication tool during client meetings and discussions. It enabled us to gather valuable feedback, iterate on the design, and align the final product more closely with the client's vision and expectations.

Taking it even further, we conducted User Testing & Interviews with 13 applicants. The results were truly encouraging, with a remarkable System Usability Scale (SUS) score of 79.4. This score, a testament to the application's usability, reinforced that our design choices were on the right track and confirmed that the user experience was set to be a hit.

Loanworks PrototypeLoanworks SUS score

Final Build & Next Steps

I collaborated closely with Loanworks' development team to ensure a seamless implementation of the project. A key aspect of this collaboration was troubleshooting and conducting QA to guarantee the application's responsiveness across various viewing devices, including desktop, tablet, and mobile.

The application is currently in the development phase with Loanworks (tenure with Disruptiv ended in July 2023). Once launched, Loanworks plan to market their new application to their mortage/banking clients.

Loanworks Layout

Next Project

Arrow