Client
CredAble
Team Size
1 Product Manager, 7 Developers
2 UX Designers including myself
Role
Ideation, Design Lead
Timeline
3 months
Challange
At CredAble, our Loan Origination System (LOS)* module is a vital part of our offerings. (A Loan Origination System (LOS) is a platform that automates and manages the end-to-end process of loan applications, from initial inquiry and application submission to underwriting, approval, and disbursement of funds, enhancing efficiency and accuracy.)
However, the manual customization process was slowing us down, affecting our scalability and our ability to meet diverse client needs. Each client required a unique white-label experience for their LOS module, which meant extensive work for our designers, product managers, and tech teams.
Customizing each journey took between 4-8 weeks, causing delays and preventing us from scaling efficiently.
“Manually customising everything makes it tough to create a user-friendly interface for all our clients. Each one needs something different.”
“Having to manually tweak the code for each client is a nightmare. It makes the system hard to maintain and bugs are more likely to creep in.”
“I spend so much time customising the system for each client that it cuts into my productivity.”
“Setting up the system for each client proposal by hand takes forever, making it hard to respond quickly to client questions and close deals efficiently.”
Business Goal & Proposed Solution
We decided to tackle this challenge by using
low-code technology for our LOS journey.
The goal was to simplify the customization process, cut down development time, and allow clients to easily personalise their white-label journey.
Usability
Speed up the LOS module customisation process.
Handle multiple customisations simultaneously.
Ensure a seamless experience for both internal teams and clients.
Reduce the workload on designers, product managers, and tech teams.
Maintain high standards in customised LOS modules.
Target
Average time for customization per client.
Number of simultaneous customizations per month.
Target: Increase by 50% in six months.
Client satisfaction scores.
Hours spent on customization tasks.
Number of reported issues post-deployment.
Competitor Analysis
By studying CloudBankIn and other similar products, we pinpointed specific aspects that could be enhanced in our LOS module. Our goal was to design a more intuitive and user-friendly interface that simplifies the customization process and reduces the time required for each client’s unique white-label experience.
Simple User Interface:
CloudBankIn's UX was a bit complicated, so we decided to simplify things by cleaning up the clutter and improving navigation.
More Scalable:
We decided to use low-code solutions to fix the scalability problems we found in CloudBankIn's system, so we can deploy faster and handle many client projects at once more effectively.
Better Customization Tools:
Our goal was to offer more ways to customize to fit different client needs easily, without needing to do everything manually.
Style Guide
Colors
We developed a foundational color palette that can be easily replaced based on client needs while maintaining visual balance.
The blue tones are primarily designed to be interchangeable.
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
Space Black
HEX: #1C1C1D
RGB: 28/ 28 / 29
CMYK: 3 / 3 / 0 / 89
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
10
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
20
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
40
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
60
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 91 / 1
80
Ocean Blue
HEX: #FD8618
RGB: 253 / 134 / 24
CMYK: 0 / 47 / 97 / 1
90
Ocean Blue
HEX: #FD8618
RGB: 0 / 96 / 217
CMYK: 100 / 0 / 55 / 15
100
Deep Blue
HEX: #E76507
RGB: 231 / 101 / 7
CMYK: 0 / 56 / 97 / 9
100
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
05
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
10
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
20
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
40
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
60
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
80
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
90
Space Black
HEX: #090A0B
RGB: 9 / 10 / 11
CMYK: 18 / 9 / 0 / 96
100
Typeface
We kept inter as our base typeface yet we decided to kept it replaceable as per clients/users requirement
Inter
A Loan Origination System (LOS) simplifies loan application and approval processes.
A Loan Origination System (LOS) simplifies loan application and approval processes.
A Loan Origination System (LOS) simplifies loan application and approval processes.
A Loan Origination System (LOS) simplifies loan application and approval processes.
A Loan Origination System (LOS) simplifies loan application and approval processes.
Solutions
User Onboarding: Login/Signup Scenario
We made CredAble's borrower onboarding smoother by creating common screens for login, signup, password recovery, and two-factor authentication. This unified design ensures that users have a consistent and secure experience, making it easier to navigate and use all entry points.
👆 Update password with registered email ID
👆 Update password with mobile OPT
👆 Update password with registered email ID
Solutions
2.1. Program Configuration
We added a Master Configuration feature for program settings to boost efficiency and flexibility. It can be used for all programs, saving time and ensuring consistency. Users can also customize each program as needed, balancing efficiency and customization to streamline management and meet unique needs.
2.2. Theme Settings
A key challenge was defining a colour scheme that would work well across all products. To address this, I decided to leverage a single primary colour and its tonal variations as secondary and supporting colours. This approach simplified the white-labelling process and ensured consistency.
👇 Version 1 : In depth Theme Management
👇 Version2 : Basic Theme Management. This version was selected for the product.*
When it comes to uploading logos, I've set a fixed size of 220x (SVG or PNG format). As for the header row, users have the flexibility to input the precise row height to align with their brand guidelines. Moreover, for color variations such as Axis, PNB, or ABFL, users can choose the color and indicate the percentage for it to appear in the header row, maintaining brand consistency.
Solutions
Program Modules Selection
When creating a new program, users must select the appropriate modules. To facilitate this, we developed a section where users can easily select or deselect modules by either clicking or using a drag-and-drop feature. Additionally, we included an option for users to create new modules on-demand.
Click & Drag: Users can quickly select and deselect modules, reducing cognitive load and accelerating the process.
On-Demand Module Creation: Users can instantly create new modules, offering the flexibility to customize programs to meet specific needs.
These features are designed in accordance with Fitts's Law to enable faster interactions and leverage the Flexibility-Usability Tradeoff, enhancing overall efficiency, user satisfaction, and adaptability.
Solutions
4. Program Management
For program management, we designed a dedicated page where users can efficiently manage all created programs. This page allows users to view detailed information, edit, or delete programs, streamlining the overall management process.
👆 User can select programs, view, edit and delete* Program Details, Dealers and Admin Panel data
To enhance usability, we provided users with options to manage the sequence and visibility of columns within the table. This customization feature allows users to tailor the table view to their specific needs, ensuring a more efficient and personalized experience.
👆 User can manage table columns by demand
We developed a foundational color palette that can be easily replaced based on client needs while maintaining visual balance.
The blue tones are primarily designed to be interchangeable.
Solutions
Perk: Forms for Module
Another major task was crating conditional forms for each sections. At the start we have decided to create our own system to manage conditions for that I have crated a flow with forms. After discussing in 2nd rounds of meeting we decided to use 3rd party application to generate form sections.
👇 You can check below the design concept I have come up with.
Note: The Borrower Journey in Low Code is a significant project. All the screens you've seen are the first version of the designs, not the final ones. Due to confidentiality policies, I am unable to show many screens.
The Outcome
The outcome of this project was transformative. By transitioning to a low-code approach for LOS journey customization, we drastically reduced the time required for each white-label customization from 4-8 weeks to just 2-3 weeks. This accelerated turnaround time enabled us to onboard new clients more efficiently and respond swiftly to their customization requests.
📝 What I learn
Working on a low-code project taught me a lot:
Efficiency and Speed: Low-code platforms speed up design and development, making prototyping and testing quicker.
Collaboration: It improve teamwork among designers, developers, and stakeholders with a shared interface.
Flexibility vs. Constraints: Low-code offers flexibility but has limits. Knowing these is key for smart design choices.
User-Centric Design: User experience matters most. Balancing usability and features ensures user satisfaction.
Adaptability: Being open to learning new tools and methods is crucial for successful low-code design.
