The Top 3 modal
Improvements driven by the goal to support and inform.
Turning a better experience into trust and revenue.
Role
Lead Product Designer
Focus
Product design, visual design, interaction design, content collaboration, research-informed iteration, and design-system adaptation
Team
Product Management, Development, UX Research, Content, and Design
Platforms
Web, iOS, and Android
Overview
During the Personal Loan Marketplace redesign, we introduced the Top 3 modal to collect loan amount, annual income and loan purpose before people reached their next step in the shopping journey. While it was successful in gathering key user data for partners and resulted in more user's getting more offers, it fell short on the user experience side. During testing for MVP we heard from users about what wasn't working, what caused confusion and what was missing, and soon a better version started to emerge, one that would leave the user feeling confident about providing their personal information and more prepared about moving to the next step. The assumption we wanted to test was if users who feel more satisfied about the Top 3 modal translate to a higher click-to-fund rate?
Approach
Since users were forced to go through the Top 3 modal, we weren't necessarily aimed at decreasing drop-off, our primary goal was to improve the experience by reducing frustration and confusion and building confidence. One of the biggest take-aways from testing was how many people thought we were out to cheat them in some way. To many testing participants, it was not obvious why partners needed these 3 details and incorrectly assumed we already had them. Working with Research and Content we set out to improve the Top 3 modal to address these misconceptions and educate about the process of getting a personal loan, while also keeping overall content short and digestible.
Start with the information we have then optimize
Using the feedback from the MVP testing we did for the redesign, we already had a solid foundation for what directions to explore. We took the questions and concerns we received and used those to frame the next set of iterations. This meant addressing questions like "Why do you need my income?", "Can I shop for a loan without it affecting my credit?", "Does the reason I need a loan affect the offers I'll see?". We also observed that no one (literally zero participants) read the top paragraph during the MVP Top 3 modal testing. Addressing this was hugely important, the information in that section answered questions many users had, so we needed to make it more reader-friendly.
After, I set out to explore alternatives to the basic form we had for MVP. Did users prefer the input fields or would they prefer interacting with a slider, chips, or a pop-up sheet? What about pre-filling the fields with selections that align with their credit profile? Do we keep it minimal or add icons? What about color? We also have EVA, our chat-bot, would the user enjoy answering these questions in a conversation with EVA? How could we make the task of providing these details easy, informative, and, dare I say, enjoyable?
One of my design superpowers is ideation; I really enjoy playing with a solution until it clicks. The Top 3 page was naturally broken down into sections: the title, the subtitle and each of the 3 questions. These sections made it easy to focus on the needs and purpose of each one individually.
Starting with the subtitle, originally the paragraph that no one read, I worked with Content to extract only the most important details. We considered what we knew users cared about and what we suspected they would find helpful. Pulling in Product, we agreed on 4 favorites to continue exploring. An exciting addition to this page was the user's credit score. It didn't really provide any useful information at this point in the journey but it felt helpful and we were all really curious to see how testing participants would react to it. We created a few variations we wanted to test, including various layouts, color and icon usage and copy.
In the first round of research, we compared 2 designs ("Minimal" and "Maximal") in moderated mobile sessions. Each participant saw both versions, with the order alternated. Both versions were a combination of sections that solved the problem in a different way. The goal for these tests was to come away with a more defined direction for a second round of testing. Most participants preferred what we called the "Minimal" version which didn't include an extra section at the bottom that provided more details and context.
- Title: slight difference in copy, curious if anyone would comment on it
- Subtitle: with or without the 3 bullet-points
- Requested loan amount: slider vs pre-filled amount based on their credit profile, personalized info (FICO score, Payment history and Borrowing power) vs none
- Annual income: with or without banner for added context
- More info: with or without a section at the bottom with educational info and reviews
This vs that
We were able to run 3 different studies, 1 moderated and 2 unmoderated, to test our various hypotheses and hone-in on a vastly improved experience.
Testing
Using the results from the first round of testing, we crafted 4 versions of the Top 3 modal for an unmoderated study. This was a thoughtful integration of everything we’d learned up to this point. These 4 variations would tell us how folks preferred to see the information we already knew they were interested in.
- Title: Because the majority of testers breezed past this, we kept it short and direct
- Subtitle: Content and I agreed it still needed a little context-setting and direction, so we included one sentence and followed it with the bullet-points, which were a huge success in the first round of testing. We also added the user’s FICO score and borrowing power in a bullet point titled Financial snapshot. All 30 participants chose a version with some financial context, and 27 chose one showing a credit score
- Requested loan amount: Here we went with an empty field but added a checkbox to “Show offers for all loan amounts”. This was a solid addition because it (possibly) provided the user with more offers and made Product happy by showing the user higher loan offers by default. Win-win
- Annual income: Nearly all testing participants filled this section out without hesitation, it made sense why we would ask for it. In an effort to keep the UI as minimal as possible we decided to remove the banner
Honing the designs
At this point we had a solid design that made the Top 3 modal easier to read, more personalized and a lot more informative. Before final delivery I wanted to ensure that adding the FICO score to this screen wouldn’t discourage users with lower scores from getting a loan. The research didn’t include anyone with a low score and I wanted to make sure we got some feedback on this before handing off to Development.
- Subtitle: Despite displaying a poor credit score, users appreciated that the Financial snapshot provided a clear overview of their credit score and borrowing power, making it easy to understand their financial situation before heading into this flow.
One last check
This final version provides users with prominent reassurance and personalized financial info before being asked to provide anything. There’s supporting information when user’s needed it most and an option to see more loan offers when possible. This redesign is currently in development and will be released to production in December 2026.
Outcome
