Kasasa Loans and Mortgages: A UX Case Study
How we helped local Austin fin-tech company Kasasa create an award-winning loan and mortgage experience using data-driven design.
Main Problem Overview
Kasasa, a financial technology (fin-tech) company based out of Austin, TX put out a request for proposal (RFP) which SeaLab LLC was selected for in 2019, and again in 2021: to support Kasasa and their in-house UX team by providing expert UX guidance in not only helping produce work for Kasasa’s product suite, but also in user testing, user experience best practices, documentation, and design system creation and management.
While we worked on many projects with Kasasa over our time together, our proudest accomplishments are contributing to the creation and implementation of a user approved, award-winning, world-class loan and mortgage experience while building and maintaining the design system in parallel.
Problem #1: How to create and help Kasasa realize the value of a loan payoff experience that is not just beautiful, but intuitive for Kasasa’s end users using user testing and a data driven approach in a marketing-led company?
Problem #2: How to help the UX team operationalize design processes and systems without losing momentum on the creation and management of daily product work requests
To comply with our confidentiality agreement we have omitted and appropriated confidential information. These designs are a reinterpretation of the original.
Project Goals & Objectives
After discussion with Anthony Rezendes, the Director of UX at Kasasa, we established a few objectives for our time together. Since Kasasa and SeaLab have had a long-standing relationship over the course of 5+ years, the below objectives are focused around the loan and mortgage UX product and Kasasa’s design system needs.
- Familiarize ourselves with Kasasa’s product suite and their respective design systems within Kasasa (employee experiences, admin experiences etc) and understand and master established mental models and usage patterns.
- Become experts and advocates in Kasasa’s user testing tool of choice (usertesting.com), as well as Kasasa’s design and documentation tools.
- Establish a global process for documenting and sharing data-driven user experience research and results.
- Identify customers’ and internal stakeholders’ pain points and challenges to identify opportunities for improvement.
- Create a desktop-first experience that is consistent with modern web usage standards.
- Advocate for UX best practices and human-centric inclusive design throughout every project and touchpoint; document all designs, user testing, iterations, and prototypes and show the value of iterating based on real user feedback
Initial Research Gathering
As our first project in the financial technology industry, we were eager to get started on our initial tasks: we spent time gaining a 1000 foot view of everything— getting familiar with Kasasa’s landscape as it stands today, learning internal processes, tools, and who the stakeholders are, as well as gaining an understanding of Kasasa’s target audience(s) and existing competition in the market. Only once we had a handle on the world of Kasasa did we jump head-first into our first big task: The loans and mortgages experience.
Kasasa had already done wonderful work in getting their loan product off the ground and available to customers, so we first had to gain access to the live product. From there we began interviewing and surveying project managers and current customers to gain a better understanding of their pain points and “easy wins”.
The biggest opportunity that presented itself in our research was improving the readability and intuitiveness of the loans and mortgage dashboard. While containing a very unique, eye-catching graph, it was also very complex with a lot of elements displayed at once and users found they weren’t sure how to read the page or what to do from there.
Upon identifying this opportunity, we decided to work toward updating and unifying the dashboards for both loan users and mortgage users for several reasons:
- Establishing consistent experiences builds familiarity and decreases mastery time for users whether they have a loan, mortgage, or both with Kasasa.
- Developing a consistent dashboard takes less code and designs than building two unique dashboards and therefore is much cheaper.
- Maintaining documentation long term for one experience is much easier and cheaper than maintaining two.
With the dashboard decided as our first focus point, we jumped into research on a few elements:
- Brushing up on color theory in graphical interfaces and how those patterns and relationships are established with financial data
- Document user journeys for mortgage owners and identify pain points and opportunities.
- Document user journeys for loan owners and identify pain points and opportunities.
- Identify any additional use cases during each journey (missed payment, automatic payments, take-backs, loan kick-off, loan completion)
Research Take-away(s):
Financial dashboards stress people out — users want to know right away if they have an action item or not and then how to perform that action
High-Resolution Visual Design Creation
While SeaLab’s UX process includes a low-fidelity design exploration prior to designing in high-fidelity, we were able to jump right into creating pixel perfect designs (even during testing and rapid iteration) due to Kasasa having an already somewhat established design system and pattern library in the works. Our job from this point forward was to not only reference the design system patterns in our explorations but also to continue to add-to and iterate on the system documentation as new designs were proposed and approved by Kasasa.
Dashboard UX Design: Top Level Information
Before jumping into design, we first spent time identifying all the possible use cases and user journeys a user could have along with their relative action items. This allowed us to keep in mind all the different problems a user may run into and need to be communicated to them from the dashboard.
Next, we performed some rapid user testing to help us group all our information and use cases into groups and levels of “importance”. From these tests we were able to create and test an initial design containing an at a glance grid of the highest-ranking pieces of information at the top of the page.
Our initial tests revealed users liked the numbers contained inside the grid (success!) but they were still a bit overwhelmed trying to understand what to do. Armed with that information we iterated and tested again, this time with inline color coded status badges as well as call to action buttons for error or empty states. This solved the problem immediately, so we moved our research process and findings to our UX research corner and moved on to our next task.
Take-away(s):
Color-coded status badges next to important information gives users a clear at-a-glance indication of action items (if any) that are needed.
Dashboard UX Design: Loan/mortgage graph
As the largest and most colorful element above the fold on the page, the Kasasa pay-off graph has huge potential for being a very unique and delightful way for users to understand their pay-off journey at a glance. Unfortunately, testing revealed that while users found the graph to be beautiful, they also found it difficult to read!
Incorporating our color research, we first played with the actual visual presentation of the graph and how the current colors play into understanding. After some A/B testing with strangers and existing Kasasa users, we found that while red incites worry in many use cases across the internet, this is especially the case in the finance industry; any graphs with warmer hues such as red and orange incited panic with users when presented within a pay-off experience. This piece of data became ESPECIALLY handy when Kasasa asked us to reskin the loan/mortgage experience to match Kasasa’s new rebrand — with the user test results we brought to the table we successfully advocated for non warm gradients.
After our color tests, we then performed some A/B tests with the graph itself to see if improvements could be made to how data was presented. After dozens of iterations it became clear that simplest graph solutions were users’ favorites, and the original graph organization ended up being the final choice, just larger with the added ability to “zoom” into details.
Take-away(s):
* Warm hues such as orange and red incite PANIC when presented alongside financial data. Use color very purposefully (users prefer green followed closely by blue)
* The simpler the graph, the faster users read and comprehend what they’re seeing
Dashboard UX Design: Payment Breakdown Card
With the area above the fold on the dashboard now officially user-tested and approved, we moved on to tackle our second to last component: the payment breakdown card. The payment breakdown card is meant to give curious users a deeper understanding where every dollar is going. While initial tests revealed users didn’t necessarily dislike this card in general, there were a few opportunities for improved clarity and understanding that surfaced — namely connecting the dots for users on autopay and it’s relationship to this card as well as communicating action items here (if any).
After a few iterations and user tests, we decided to test the hypothesis that this card is trying to do too many things. To solve this problem, we proposed splitting this single card into two separate cards:
Monthly Payment Card:
- Primary goal: to present where money is going and how much.
- Secondary goal: act as a jumping off point for users to review and manage their payment.
Autopay Status Card:
- Primary goal: to present to users their payment status at a glance and inform of action items.
- Secondary goal: act as a jumping off point for users to review and manage their payment.
Similar to our initial user test results, splitting out information into dedicated “cards” and adding dedicated statuses inline improved understanding immediately to a considerable degree (understanding jumped from around 30% to over 80%).
Take-away(s)
* When using cards to present top level information, keep the information specific and dedicated to ONE area to improve understanding
The Final Result
Established an easy to find, user experience research & documentation process.
Kasasa’s platform of choice, Confluence, allowed us to build out a comprehensive, easily searchable, handbook for every project we worked on. From initial research gathering (usertesting.com interviews, screen capturing, meetings etc), to explorations and ideation (Miro, Figma, Confluence, Whiteboard photos), and on to initial and then final designs (Sketch, InVision, JIRA). The goal of each page was to both provide quick at-a-glance high level take-aways from each effort along with in depth access to all work files and iterations.
Maintained a future-proof design by documenting styles and guidelines in parallel to testing and high-fidelity design creation.
Alongside user testing and iterating, SeaLab created a comprehensive styleguide documenting the loans experience in detail. This was pushed from Sketch to InVision (and later ZeroHeight) and shared widely with development and leadership as the project moved to code. The styleguide allowed development to implement the solution quickly, reduced questions, got alignment across the teams, and allowed Kasasa to maintain the experience long into the future.
Successfully created an award-winning, beautiful, and intuitive loan and mortgage user experience using a data-driven, human-centric approach.
SeaLab engaged with both existing Kasasa users as well as strangers to continuously test and iterate on design concepts and find the most intuitive concept for users throughout the project. Kasasa Loan was named “Best Consumer Lending Platform” by FinTech in 2019 as a result of these efforts.
The Kasasa loans and mortgages dashboard has received positive feedback since it’s implementation even through a major Kasasa rebrand effort.
“The Kasasa Loan has helped me so much… Being able to see my loan on the app has also helped immensely, as I’ve been able to keep complete track of my finances” — Emilee L.
“ Kasasa has helped me pay off hospital bills. I love how easy the app is to use. I can check out my loan at any time” — Dawn S
We set out to create a delightful, intuitive, and memorable loan and mortgage experience for Kasasa customers and walked away with so much more. Through expert UX research & user testing, intuitive design implementation, and effective communication and documentation throughout the project, we accomplished these goals and are pleased with the feedback and data-driven results.
We look forward to helping Kasasa continue to grow and expand over time.
