How SeaLab 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 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 1,000-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 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 fewer designs than building two unique dashboards and is therefore 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: color theory in graphical interfaces, user journeys for mortgage owners, user journeys for loan owners, and additional use cases during each journey (missed payment, automatic payments, take-backs, loan kick-off, loan completion).
Research takeaway: Financial dashboards stress people out — users want to know right away if they have an action item 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.
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 that need to be communicated from the dashboard.
Next, we performed rapid user testing to help us group all our information and use cases into 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 — 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.
Takeaway: Color-coded status badges next to important information give 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 payoff graph has huge potential for being a very unique and delightful way for users to understand their payoff 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 affect 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 payoff experience.
This piece of data became especially handy when Kasasa asked us to reskin the loan/mortgage experience to match their 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 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 the 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.
Takeaways:
- 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 the payment breakdown card. The payment breakdown card is meant to give curious users a deeper understanding of 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 — namely connecting the dots for users on autopay and its relationship to this card, as well as communicating action items.
After a few iterations and user tests, we decided to test the hypothesis that this card was 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 — 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 — present users' 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 — jumping from around 30% to over 80%.
Takeaway: 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 and 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 to explorations and ideation, to initial and then final designs. The goal of each page was to provide quick, at-a-glance high-level takeaways from each effort along with in-depth access to all work files and iterations.
We set out 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. Through expert user research, 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.
"They understood and were eager to run at our challenges; they were engaged and excited by our tasks."
— Anthony Rezendes, Senior Manager, Kasasa
Interested in a data-driven approach to your product's UX? Let's talk.