CASE STUDY: Modernizing the user experience of first fully digital end-to-end lending platform for both borrowers and loan officers

Enhancing the user experience through design and frontend modernization of the first fully digital lending platform, enabling a software solutions provider to better meet the needs of its customers (loan officers) and its customers’ customers (borrowers). Now for the first time ever, small business borrowers can submit an application, and loan officers can manage the entire process—digitally—from application to close.

The client is a leading provider of specialized digital solutions to banks and credit unions that collectively service the accounts of more than 25 million consumers and business owners.

They were in the early stages of designing a digital lending platform that would enable their customers to deliver a frictionless small business loan origination experience for both borrowers and loan officers. Traditionally, the loan application process is complex and group driven, so the platform needed to be robust enough to accommodate multiple users who would collaborate to provide information and authorization as well as complete tasks.

The client contracted with Praxent to ensure it was launching a modern, polished product that aligned with user experience and user interface design best practices. In addition, they were looking to build trust among users who were being asked to supply sensitive financial information to the platform. Finally, they wanted to employ user research to validate key workflows in the product before moving forward into development.

The goal of the engagement was for Praxent to provide a seamless handoff of new screen designs to the client’s development team. However, early on in the engagement the client identified an opportunity to supplement their development teams with Praxent’s frontend engineering. Ultimately, the Praxent team assumed leadership roles in design, engineering, and project management in order to guide the client to a successful product release.

Six months from design to launch of MVP

4 teams integrated into the project

25 million customers served

The Problem

The client was seeking to refine the user experience and user interface (UX/UI) of their digital lending platform prior to building and launching it. They had engaged a long-term full-stack development partner that did not have UI experience. As the timeline to release was tight, and the client had only two internal UX designers on the project, they sought additional design support to complete the UX design activities necessary to kick off development within two months.

They worried the platform’s outdated user interface would cause users to question its security. They were concerned about ADA compliance. And, given the complex nature of the loan application process, they were concerned about application abandonment. They wanted to ensure all parties involved have the ability to seamlessly enter and edit their information throughout the process.

Finally, the client needed guidance in choosing a frontend technology and realized early on they had inadequate internal frontend development capacity to complete the project on time. In addition, they had hired a development and QA team based in Vietnam and required significant project management support in order to stay on track.

How we Helped

From kickoff, Praxent demonstrated fit with the client’s team, an understanding of the project’s scope and timeline, and a strong commitment to delivering immediate value. Within the first month, our design team evaluated the client’s wireframes, presented a review, and made the recommendation to redesign. We conducted design sprints and quickly produced new wireframes, which were approved by an executive committee. Praxent partnered with the client’s design team throughout the project, offering help and expertise whenever needed.

Praxent’s development team worked alongside the client’s frontend developers to recommend and implement Vue.JS. This framework was ideal given the timeframe and budget. It allows for incremental upgrades and will require less effort and be less expensive for the client to enhance in the future versus building onto their old system.

The Praxent design, development, and project management teams provided significant support and leadership of the client’s internal and external teams throughout the project and during the knowledge transfer phase.

Praxent’s mission was to partner with the client to redesign and provide development support for an all-new digital lending platform that enables banks and credit unions to deliver a frictionless small business loan process experience for both borrowers and loan officers.

The approach included:

Design

• Collaborating closely with the client’s design team throughout the project: one of the Praxent designers acted as the design lead and helped delegate different parts of the application to each of the client’s two designers
• Conducting a UX Audit (heuristic evaluation) and interviews with internal users, leveraging existing designs
• Designing medium-fidelity wireframes of primary flows for both borrower and lender applications
• Performing usability testing (link to user testing) of the lender application wireframes with target users and preparing design recommendations based on user feedback
• Creating visual designs of key screens required for implementation for both borrower and lender applications, on desktop and mobile
• Defining the overall visual brand language in a digital UI design style guide
• Designing high-fidelity sales prototype covering a single “happy path” borrower workflow and development prototype including primary designed borrower application screens

Development & QA

• Leading frontend development for 10 sprints, or 20 weeks
• Engaging a cross-functional team, including two full-time Praxent engineers, the client’s internal frontend developers, and outsourced frontend developers.
• Recommending Vue.JS framework, because it would enable the client to gradually implement the new frontend technology page by page. It also blends well within the model view controller architecture the client already had.
• Implementing the frontend, leveraging Vue.js to fully optimize the mobile- responsive and ADA compliant experience.
• Leveraging Vue.JS to enable a phased-release approach and tackling the most difficult and complex screens first, providing the client with reusable components they could copy paste and build out for some of the simpler screens
• Refining the sitemap
• Embedding quality assurance: a designer was embedded within the agile process to provide support and feedback to developers to ensure final product matched approved specifications
• Facilitating daily bug triages with outsourced QA team and backend team to expedite feedback loop provide more visibility
• Performing end-to-end testing with each sprint to ensure high-quality code delivery

Project Management

• Phased-release planning
• Consulting on both sides of the project
• Implementing and facilitating weekly technical strategy sessions between Praxent, the client, and external development and QA teams to align on decisions that needed to be made and agreed on to ensure success
• Weekly-status reporting of budget, scope, and timeline progress

Handoff/Knowledge Transfer

Design

• In the final month of the project, setting up a number of knowledge transfer meetings to review all of the raw design files and assets with the client
• Gradually transitioning more design tasks to the client’s designer, so she became lead and Praxent provided support
• Packaging all relevant design assets—raw files, icons, etc. and sharing it with the client’s designer so she could expand on the design foundation Praxent provided

Development

• Delivering a framework that provided a strategy for iterative development and iterative releases and offering ongoing training, support, and mentoring to the client’s engineers
• During the last two sprints, conducting knowledge transfer meetings with the client’s tech leads to review the architecture, code, and technical process
• Helping the client’s team get up to speed on Vue.JS and supporting them as they took on small tickets throughout the transition
• By the end of the project, ensuring the client’s team was set up to continue frontend development in Vue.JS

Results

Praxent redesigned the user experience and user interface for the client’s digital lending platform, enabling borrowers to submit a loan application loan officers to manage the entire loan process digitally. Thanks to comprehensive and seamless knowledge transfer, the client was able to release their MVP for the borrower application within six months.

Key Features/Deliverables

User Interface Design

• creation of digital style guide
• application of style guide to high-fidelity wireframes
• wireframes used to create mockups

Staff Augmentation

Providing expert full-time support and took on leadership roles in design, engineering, and project management to help guide the client team to a successful product release

Project Management

Helping the client refine their processes, making sure that they were developing the right features and getting feedback from the right teams

Quality Assurance

Conducting a daily bug triage with the client’s backend team and outsourced QA team to help expedite the feedback loop and provide more visibility about where bugs were coming from