TrueAccord is company that strives to help consumers in debt get back on sound financial footing. The Consumer Portal is a self-service debt management platform where consumers can view, manage, and take action on their debts.
In this case study, I’ll describe the strategy and planning that went into rethinking the portal and then concentrate on the redesign of one specific user flow, setting up a payment plan.
- Led strategy and planning
- Managed the UX Research, Content Strategy, and Product Design teams
- Managed tasks, schedules, and execution to project completion
Project origination, planning, and identification of success metrics.
Usability testing of designs, implementation, and evaluations of success metrics.
Evaluation of Product Analytics and assessment of current experience through usability testing.
5 Next Steps
Project visibility, stakeholder buy in and continuing the migration.
Mini Design Sprint, wireframing, and application of Design System elements.
Stakeholder management and balancing satisfaction with success.
The origin of the project initially stemmed from our engineering team who wanted to migrate the front end framework from Angular to React. The migration required that we rebuild our entire Consumer Portal from the ground up.
Initially, this was going to be a straight migration, but this seemed like a great opportunity to take a step back and re-evaluate the design and experience of the Consumer Portal.
Because no company or person has infinite time and resources, I wanted the team to take a smart approach to the redesign. We started by asking what parts of our system do we need to evaluate and rethink? What parts are already serving our customers well?
Our UXR team did a heuristic evaluation of all the flows of our product then scored them with an “experience score” based on accessibility, usability, and design consistency to determine which flows could be migrated without changes and which needed to be re-evaluated.
This helped inform the roadmap and gave stakeholders a good idea of what was upcoming and how long the migration would take.
We decided to start with our payment plan creation flow as the first flow to migrate and this is what I will focus on for this case study. We chose this flow for the following reasons.
- It had one of the lowest scores in our heuristic evaluation of usability and just didn’t follow basic UX best practices.
- It would be one of the most impactful flows. Most of our customers are already struggling with finances and need affordable payment options. Over 90% of our customers resolve their accounts via a payment plan.
- Creating a payment plan receives the highest volume of inquiries to our customer service team so improvements to the self-serve flow could dramatically increase that team’s efficiency.
The last step in the planning process was evaluating what we wanted to improve so that we could focus our efforts in the right area. We identified 4 success metrics to monitor and (hopefully) improve.
- Commitment At what rate do customers who start signing up for a payment plan successfully finish signing up for that plan.
- Progression How far does a customer progress in their plan? Are they able to sign up for a plan that is successful for them over time? A lot of payment plans span a year or more. Does the customer have the ability to customize their plan in a way that ensures they’re successful.
- Resolution At what rate do customers finish their plan and pay off their debt?
- CSAT Did customers enjoy the experience? How satisfied did they feel with the plan creation process?
To get a better idea of the problem space, we tackled discovery from a few angles.
- Product Analytics The Product Design and UX Research teams collaborated with the analytics team to understand current consumer behaviors.
- Customer Service Contact Analysis We also collaborated with the Customer Service team to see what customers were contacting them about.
- Usability Study The UX Research team ran a usability study on the current experience to dig into behaviors and pain points we were seeing in the data.
Product Analytics Findings
Looking at time on page data, we found that customers spent a lot of time on our Payment Plan Dates customization step. Total session time to set up a plan was about 30 seconds, but customers were spending an average of 15 seconds at this step. Half of the time it was taking them to set up a plan was spent just grokking how to enter their pay days. We also saw a lot of customers moving back and forth between this step and the next, with large drop off on the subsequent step in the process.
While allowing consumers to enter payment dates that aligned to their pay days was a way to help customers customize their plan, and they were actively using it and seeing the value in it, it was clearly not intuitive and our assumption was that customers weren’t able to get the customization they were looking for. We dug into this a bit more in the usability study (see below) and found that our hunch was correct.
Customer Service Contact Analysis Findings
The Product Design team collaborated with our Customer Service team to identify pain points customers reported when creating a self-serve plan.
In the data provided and through agent interviews, we determined there were two main reasons customers were contacting our agents.
The number one reason was to change the date of their first payment. We had a “Change Start Date” button, but it was poorly integrated into the design and customers just weren’t seeing it.
The second was to change their payment days to specific days or dates. Some customers wanted to pay on Fridays, some on the 1st and 15th of the month. We had a hunch that these requests were tied to pay days and were able to validate that in our usability study.
Usability Testing the Current Experience
Through a usability study of the current experience, we were able to validate a lot of the assumptions we made in analyzing the data.
Customers consistently wanted to align their payment plan payments to their pay days. While they could do some customization, consumers weren’t getting the flexibility they needed. Other findings included…
- Customers wanted to choose the date of their first payment. In the current UI, the start date button was missed (this matched with the customer support data).
- The current UI had a tabbed interface and customers found it difficult to compare and contrast plans.
- While we offer discounts on shorter plans, consumers just weren’t seeing the discounts so didn’t get a chance at the benefit.
With lots of good, actionable feedback and data, the team started the design process with a mini design sprint. We did a condensed sprint in 8 hours split over 2 days. We used Miro to run the sprint and had a good cross-functional team consisting of a PM, a Product Designer, a UX Researcher, and Front End and Data Engineers.
We had great ideas come out of the Sprint and took the most promising to wireframes.
Wireframes to High Fi Design
We concentrated on super low-fi wireframes to start. We wanted to get a feel for the flows and options at each step in the plan creation process. Once we had a good sense of each step, we applied our Design System components.
Our design team maintains a shared Figma Library that is always up to date with the Front End team’s Storybook instance so we can easily create high fidelity designs easily and have confidence that our engineering team could execute on them efficiently.
Revisiting our success metrics showed the project was successful. We had stat sig lift on all 3 of our performance metrics – Commitment, Progression, and Liquidation.
But the metric that didn’t improve was the CSAT survey score. It went down. We did some follow up interviews with the customers that had taken the survey to try to understand that metric. We found that CSAT scores were lower because we had added steps to the process that made it considerably longer.
There was a balance we had to strike between ease of setting up a plan and giving the user enough flexibility to set up a successful plan. In the end, we erred on the side of helping the user be successful long term, and the rest of our metrics demonstrated the new experience did increase the rate of success.
5 Next Steps
Post-Launch Usability Testing
Post-launch, the UX Research team did another round of usability testing in production to ensure the optimized experience was meeting expectations and to gather more feedback. One thing we heard consistently from users in this round of usability testing was “How does the amount I put in affect my plan?”
To address this, we added a dynamic message box that let the customer know what the number of installments and the last payment date would be based on the amount they inputted, giving them get a better understanding of the plan they were creating.
This was a response to user needs, but also had a positive outcome for the business as adding the messaging increased payment installment size by 10.6%.
Continuing the Migration
We are continuing the migration for the remaining sections of the Consumer Portal. We are currently migrating the payment plan management experience, the part of the product that provides tools that helps the customer manage the plan they created.
We’re following the same process used for Payment Plan Creation to migrate the remaining experiences:
- Defining goals and success metrics
- Doing discovery work, evaluating product analytics, talking to our customer service team, and doing usability on the current experiences
- Designing low fi wireframes and then applying our Design System
- Collaborating with the engineering team to ensure a great experience for the customer
- Iterating post-launch by usability testing and evaluating metrics
Getting Stakeholder Buy In
Slowing down engineering’s migration and getting buy-in from business stakeholders for the longer timeframe was challenging, but outlining a process with a clear roadmap early on helped. Showing that we were making smart choices about what we were going to take time redesigning helped show we weren’t redesigning for the sake of a redesign, but that we were finding where the problems were and fixing those.
After the launch of the payment plan creation experience, it was important to communicate the wins and positive metrics to stakeholders, giving the team time to evaluate the remaining flows and keep the project moving along.
Getting Engineering Involved Early in Planning and Discovery
Engineering was involved in planning, research, and defining requirements early.
It’s always important to have engineering involved as early as possible, but this project in particular had a lot of tech debt that we wouldn’t have been aware of causing design constraints we wouldn’t have been able to address. The engineers observing the usability testing of the current experience provided invaluable context to why certain design and implementation decisions had been made and how we could incorporate tech debt considerations into the design.
Balancing Satisfaction with Success
The lower CSAT scores threw us for a loop and we had to make the decision – do we try to shorten the experience to improve satisfaction and drive up our CSAT scores or do we make sure the experience aids the customer in being successful in the long run.
We made the decision to optimize for long term success. Ultimately, it helps the customer get out of debt and raise their credit score which we believe would raise the customer’s overall satisfaction with TrueAccord.
Building, growing, and leading product design teams that create great customer experiences by understanding the complex relationship between design, business, and technology.