This page is being worked on while you are reading this.. please excuse minor bugs on smaller screen sizes.
The Problem
The mortgage loan application process is highly manual, time-consuming and expensive for lenders. How can we automate this process to make approvals faster using AI?
My Role
As the UX Lead, I was a strategic partner in the end-to-end development of our product - right from initial market and user research to the shipped product. My key accomplishment was creating our entire design system from scratch. I wore many hats. I created wireframes, mockups, sales decks, directed our sales videos, attending VC events - over the usual role of being a software designer.
The process (non linear)
1
Studying the Industry
Understanding the current workflow from mortgage lenders, underwriters and loan processors
2
Market & UX Research
We studied competitors (esp AI services), interviewed and gathered user pain points
3
Ideation & Prototypes
Conducting design sprints to co-design ideas into wireframes with product & engineering
4
Design System
Creating a custom design system from scratch, built in close collaboration with developers
Research
Aligning our product definition to what users expect from AI, by studying the mortgage industry, market and user needs
I interviewed SMEs who could guide us on the key pain points that our users face. I collaborated with the Product team, Engineering and the Business team to perform research and brainstorming on key opportunities and user flows. I really like brainstorming with XFN stakeholders early into a new role because it gives me an idea of their personal style of communication, their vision and their original ideas for the product.
We had identified that the manual process of reviewing mortgage loans was a huge time and cost sink for most mortgage lenders. Designing software in the AI era requires multiple interventions during the product definition process. I always asked ‘is there a way to automate this?’ when we designed wireframes, to ensure that we use an AI first approach to designing software.
I always begin with research. I pushed back on initial plans to quickly prototype and develop our ideas. I insisted on having a collaborative design sprint for all teams to understand the market and people we are building for.
Finding 1
Our users are accustomed to legacy software with conventional and dated UI
Insight
Simplicity in design that will highlight the powerful functionality of our product.
Finding 2
Introducing AI in their workflow can create issues with trust.
Insight
Clearly communicate the decisions that are taken by an AI interface and why.
Finding 3
Due to a lot of back and forth in the process, speed is the most valuable success metric.
Insight
Minimum clicks and steps in our workflows, as speed is the most valuable success metric.
Challenges we may face
Converting these challenges into opportunities
I put together a very simple affinity map based on our opportunities and asked the engineering, business and product teams to vote over the key aspects. This helped refine our problem statement to something that is tangible and feasible to build for.
User Flows
Once we got a good grasp of the market and industry, I started asking questions about our users. I used data from interviews to put together current and proposed user flows.
I interviewed SMEs who could guide us on the key pain points that our users face. I collaborated with the Product team, Engineering and the Business team to perform research and brainstorming on key opportunities and user flows. I really like brainstorming with XFN stakeholders early into a new role because it gives me an idea of their personal style of communication, their vision and their original ideas for the product.
We had identified that the manual process of reviewing mortgage loans was a huge time and cost sink for most mortgage lenders. Designing software in the AI era requires multiple interventions during the product definition process. I always asked ‘is there a way to automate this?’ when we designed wireframes, to ensure that we use an AI first approach to designing software.
I made user flows for different use cases of our product. We decided to pursue one of the most important use cases - uploading and scanning documents.
We used this one user flow to flesh out wireframes for our MVP version of the product
Wireframing
Based on the sprint research and interviews with Subject Matter Experts, we made rapid iterative wireframes. My intention was to make every feature AI focused while keeping in mind the legacy software our users are used to.
AI focused product definition
Let’s rethink how we would interact with AI powered data table. Instead of the regular filters, we could use custom prompts where users can interact with the data in front of them
Annotations on uploaded documents
The best way to display the list of rule violations is to display them within the context of the rule being violated. Here, I make use of annotations as signifiers.
Wireframing
Based on the sprint research and interviews with Subject Matter Experts, we made rapid iterative wireframes. My intention was to make every feature AI focused while keeping in mind the legacy software our users are used to.
AI focused product definition
Let’s rethink how we would interact with AI powered data table. Instead of the regular filters, we could use custom prompts where users can interact with the data in front of them
Annotations on uploaded documents
The best way to display the list of rule violations is to display them within the context of the rule being violated. Here, I make use of annotations as signifiers.
Design System & Branding
To ensure scalability of our SaaS product, I created an entirely custom design system on Figma, built from scratch.
I began figuring our some key components we would have across the product. I started with navigation elements like the sidebar, buttons and drop downs that hold our main functionalities.
My initial thoughts are if we cannot spell it, let’s not sell it. But keeping a good rhyme aside, I really like the nostalgia associated with 3D components. I wanted to bring a kind of unexpected freshness to our enterprise looking product, and I made an intentional choice to sprinkle in skeuoumorphic elements in our buttons, hover effects and behind dialog boxes.
Final Design
Using the design system to put together high fidelity screens
We followed an iterative process of designing the product. I would test prototypes early in the design process before they were ready for hand off to development. A major feedback we received from the user testing was optimising the time it took from uploading a document to getting it's analysis.
There were certain technical challenges that cropped up as constraints, but we kept them aside and first designed for all possible iterations. We tested these iterations with 10 users, more than 50% of the users preferred the 3rd iteration.
Iteration 1
Upload and analysis on separate screens. Good for technical MVP, but too many clicks to reach the final results page.
Iteration 2
Split screen of upload & form details, along with the results screen. Highlighting key metrics and details on the results screen.
Iteration 3
An option with vertical alignment of the options on the left side of the split screen. Highlighting key metrics.
We had to make a difficult tradeoff. Even though option 3 was the user friendly, it would take more resources than we had at the time
UX often takes a backseat when designing enterprise software. This challenge taught me how to push for more resources on UX, while also prioritising our goals within the company's long term roadmap.
Our solution was to break this feature into stages that can be rolled out in the upcoming product versions. This also allowed us to test on focused set of features early in the launch.
Impact
Designing an entire product from ground up based on vision and strong collaboration is immensely gratifying. At Kinesys, I learned product thinking skills on the job, while trying to reprogram the design process that we are taught at design school.
Aligning our product definition to what users expect from AI
I studied mortgage, real estate and legal softwares and their agility towards the AI bubble. We interviewed SMEs who could guide us on the key pain points that our users face. Designing software in the AI era requires multiple interventions during the product definition process. I always asked ‘is there a way to automate this?’ when we designed wireframes, to ensure that we use an AI first approach to designing software.
Building our design system from scratch
The enterprise software that our customers were used to using were boring, clunky and not scalable. We wanted our product to have the B2C ease of use, but for B2B customers. I designed the entire design system from scratch, starting with building key components that we require for the MVP version of our product. We gathered early feedback using a clickable prototype that we showed to SMEs, end users, existing and new customers, and investors.
A designer’s seat at a startup table often includes designing pitch decks to raise funds.
I worked closely with the founder to design our investor decks, one pagers, social media assets and sales videos. Studying great slide decks was an excellent experience in learning how to present your work, your social credentials and your numbers (which are often the trickiest to weave into a story without it sounding like a college assignment).