Designing 0 to 1, a product called Cortex. Cortex uses AI to make the mortgage approval process 65% faster.
As head of UX, 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 & User 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
Creating the 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 studied mortgage, real estate and legal softwares and their agility towards the AI bubble. 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.
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
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.
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.
Design System
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 thoughts on trends like Skeuomorphism.
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.
Headers
Making variants of the header as it would appear in different contexts on the product
Dropdown
“I love them, they look like crispy biscuits I want to take a bit of” - CTO
Designing for developers, with developers
When finalised designs are added to ‘dev ready’ status, I annotate them with comments and other remarks. Please note this was before Figma released the annotations feature :)
Product 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. I used to be terrified of creating design systems before this experience, and now I find it quite fun.
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).