✞ Impeccable Product Designs! ✞
Marc Dandoy
How do you convey financial progress over 12 months? In this case study I tell the story making just that: a place where users can look at their progress at a glance, be alerted to late payments, and view their payment history.
In May 2021 we launched V1 credit builder to a control group of 100 users to test if our back-end code actually worked. While engineering was getting that set up, I was tasked to work on the post-onboarding experience of credit builder. (IE: everything not acquisition)
I conducted user interviews with our V1 users to find out what they needed. I listed down the business and user needs before I started conducting my explorations.
#1 user need not being met
Before tackling specific shortcomings, we boiled down the core product requirements for this section of the app, told in user stories.
As a user who has completed credit builder on boarding, I should be able to:
During our user feedback sessions, one question kept popping up over and over again:
If I'm only paying $10 a month over 12 months, where was the $600 loan figure coming from?
I knew that answering this question would be the key to explaining everything. After doing some thinking (procrastination) on social media, I was struck with inspiration from this video from our competitor.
1. My out-of pocket payment is the small glass $10
2. The pitcher is Brigit's contribution to the $600 loan
3. The big punch bowl is the loan, that we fill up together.
From an engineering feasibility standpoint, there was no way I could make a full animation of that happening, so I had to pare everything down to something more sane. At this time we were only a 32 person start-up.
Requirements MVP
I explored several bar graph-based UIs to convey the above concept
In a rush to see what this component would look like in the actual screen, I set to implementing it immediately.
This idea looked a lot better in my head and I hadn't considered how noisy it would look. I went back and did a full rework of this screen to give everything more breathing room.
Before proceeding I also explored other methods of displaying credit progress.
The team approved, however, it's a tad too visually noisy and gave our engineers entire migraines so I had to find a way to dissolve the back-end complexity:
This version resolved the storytelling -> UI problem, but after some usability tests on Maze we felt we could reduce the chart further.
At this point I came up with the idea of just displaying months completed and savings banked as text to be able to communicate more in less space.
Sweet! Now that that has been addressed, let's put together the rest of the post-acquisition experience.
The task here was simple: turn this table into a user-friendly experience that anyone could browse and understand.
%201.png)
A critical step was defining what each payment status meant, in an easily scannable manner. This meant color coding with a status badge.
After defining the statuses, it was a matter of figuring out the component layout and grouping them by month:
For this feature I borrowed heavily from other finance apps and applied our design system. No need to reinvent the wheel.
At this stage, we weren't ready to build out the payment flows, so I had to focus on copy.
In July 2021 we officially launched credit builder to the mass market. From our Segment and Amplitude charts, we were getting serious funnel drop-offs during onboarding, and at this stage acquisition was our main concern, so our research efforts reflected that reality.
During this time I conducted 12 user interviews to understand why they were dropping, but I also took the opportunity to have users conduct these missions at the end of the funnel optimization interviews:
In addition, we conducted surveys to get immediate feedback after they onboarded.
Overall I was pleased with the results; users were able to fulfill their missions and understand the progress that they had made.
7 users also commented how they understood the product much better after seeing the dashboard, which gave my team the signal that we could focus on acquisition and this post-onboarding experience was sufficient for the time being.