Optimising app calculator tool to help users reduce debt faster
Optimising app calculator tool to help users reduce debt faster
Optimising app calculator tool to help users reduce debt faster
OVERVIEW
This is a redesign of Superfi’s debt calculator experience. The goal was to improve engagement and increase conversion, as well as helping to reduce customers time to becoming debt free.
ABOUT SUPERFI
Superfi is a UK fintech startup focused on helping people to manage multiple debts in one mobile app. The repayment calculator is Superfi’s core feature that creates a personalised repayment plan from specialised debt strategies that will guide customers out of debt faster.
Superfi is a UK fintech startup focused on helping people to manage multiple debts in one mobile app. The repayment calculator is Superfi’s core feature that creates a personalised repayment plan from specialised debt strategies that will guide customers out of debt faster.
Superfi is a UK fintech startup focused on helping people to manage multiple debts in one mobile app. The repayment calculator is Superfi’s core feature that creates a personalised repayment plan from specialised debt strategies that will guide customers out of debt faster.
ROLE
Lead end-to-end design project, from synthesising UX research to ideation, to testing and build.
Lead end-to-end design project, from synthesising UX research to ideation, to testing and build.
Lead end-to-end design project, from synthesising UX research to ideation, to testing and build.
TEAM
Product Manager + Developers + Me
Product Manager + Developers + Me
Product Manager + Developers + Me
TIMELINE
August 2023 - Nov 2023. Built and ready to launch.
August 2023 - Nov 2023. Built and ready to launch.
August 2023 - Nov 2023. Built and ready to launch.
THE HUMAN PROBLEM
Having multiple debts and falling behind on debt repayments can be extremely stressful. Superfi’s current debt repayment calculator experience is currently confusing and uninformative, creating even more stress.
Having multiple debts and falling behind on debt repayments can be extremely stressful. Superfi’s current debt repayment calculator experience is currently confusing and uninformative, creating even more stress.
Having multiple debts and falling behind on debt repayments can be extremely stressful. Superfi’s current debt repayment calculator experience is currently confusing and uninformative, creating even more stress.
USER RESEARCH
User testing revealed areas of friction around usability and content.
User testing revealed areas of friction around usability and content.
User testing revealed areas of friction around usability and content.
I conducted remote usability tests with existing design to identify areas of friction. Participants all had multiple debts and considered themselves struggling with their finances. Here are our key findings:
I conducted remote usability tests with existing design to identify areas of friction. Participants all had multiple debts and considered themselves struggling with their finances. Here are our key findings:
I conducted remote usability tests with existing design to identify areas of friction. Participants all had multiple debts and considered themselves struggling with their finances. Here are our key findings:
of participants were confused and unclear about the different strategies (avalanche and snowball) and language used. Only participants who had pre-existing knowledge could understand.
of participants were confused and unclear about the different strategies (avalanche and snowball) and language used. Only participants who had pre-existing knowledge could understand.
of participants were confused and unclear about the different strategies (avalanche and snowball) and language used. Only participants who had pre-existing knowledge could understand.
“I’m still not sure what avalanche and snowball [strategies] is...The term’s aren’t clear. I’d like to know a bit more.”
“I’m still not sure what avalanche and snowball [strategies] is...The term’s aren’t clear. I’d like to know a bit more.”
“I’m still not sure what avalanche and snowball [strategies] is...The term’s aren’t clear. I’d like to know a bit more.”
of participants are unsure what the effect of increasing repayments meant to overall debt. Users were not clear on which components they could interact with on screen.
of participants are unsure what the effect of increasing repayments meant to overall debt. Users were not clear on which components they could interact with on screen.
of participants are unsure what the effect of increasing repayments meant to overall debt. Users were not clear on which components they could interact with on screen.
“I want more functionality. Want to know… what it all means“
“I want more functionality. Want to know… what it all means“
“I want more functionality. Want to know… what it all means“
“I don’t understand what to do on these [pages] ... not sure what these represent”
“I don’t understand what to do on these [pages] ... not sure what these represent”
“I don’t understand what to do on these [pages] ... not sure what these represent”
DESIGN PRINCIPLES
Help users easily understand different repayment strategies
Help users easily understand different repayment strategies
Educate the user on impact of increasing their repayments to reducing their debts
Educate the user on impact of increasing their repayments to reducing their debts
Boost interaction by simplifying usability and promoting encouragement
Boost interaction by simplifying usability and promoting encouragement
FRAMEWORK
Mapping the user journey to highlight effective educational touch points in the experience.
Mapping the user journey to highlight effective educational touch points in the experience.
Mapping the user journey to highlight effective educational touch points in the experience.
Considerations in design iterations:
Considerations in design iterations:
Considerations in design iterations:
🧠 How to present content progressively to avoid cognitive overload, especially with the use of financial jargon?
🧠 How to present content progressively to avoid cognitive overload, especially with the use of financial jargon?
🧠 How to present content progressively to avoid cognitive overload, especially with the use of financial jargon?
📚 Reviewed copy and content to be concise with the same level of importance and effectiveness
📚 Reviewed copy and content to be concise with the same level of importance and effectiveness
📚 Reviewed copy and content to be concise with the same level of importance and effectiveness
📝 Different ways to present and surface information
📝 Different ways to present and surface information
📝 Different ways to present and surface information
User flow capturing different steps of presenting information in the journey so it flows smoothly and is not overwhelming
User flow capturing different steps of presenting information in the journey so it flows smoothly and is not overwhelming
User flow capturing different steps of presenting information in the journey so it flows smoothly and is not overwhelming
IDEATION
Interactive elements encourage users to explore the impact of increasing repayment amount.
Interactive elements encourage users to explore the impact of increasing repayment amount.
Interactive elements encourage users to explore the impact of increasing repayment amount.
Our focus in ideation included:
🎬 How can we show users how increasing payments will impact the rest of their lives?
💸 How do we encourage users to explore the tool to eventually reduce their debt?
👉 What components already exist in the industry that people will understand and interact with instantly?
Our focus in ideation included:
🎬 How can we show users how increasing payments will impact the rest of their lives?
💸 How do we encourage users to explore the tool to eventually reduce their debt?
👉 What components already exist in the industry that people will understand and interact with instantly?
Our focus in ideation included:
🎬 How can we show users how increasing payments will impact the rest of their lives?
💸 How do we encourage users to explore the tool to eventually reduce their debt?
👉 What components already exist in the industry that people will understand and interact with instantly?
Exploration sketches of different components and screen composition to see what’s easiest to understand and interact with.
Exploration sketches of different components and screen composition to see what’s easiest to understand and interact with.
Exploration sketches of different components and screen composition to see what’s easiest to understand and interact with.
PROTOTYPE
We tested 2 prototypes with users to gather insights on which design solution was providing a more intuitive experience.
We tested 2 prototypes with users to gather insights on which design solution was providing a more intuitive experience.
We tested 2 prototypes with users to gather insights on which design solution was providing a more intuitive experience.
Through an iterative design process we settled on different design solutions with varying levels of content, but needed to validate which design fit the user’s requirements better.
Through an iterative design process we settled on different design solutions with varying levels of content, but needed to validate which design fit the user’s requirements better.
Through an iterative design process we settled on different design solutions with varying levels of content, but needed to validate which design fit the user’s requirements better.
Var 1
Var 1
Var 1
Intro page to explain current financial situation.
Intro page to explain current financial situation.
Step by step flow to select repayment amount first. Slider interaction with clear CTA
Step by step flow to select repayment amount first. Slider interaction with clear CTA
Step by step flow to select repayment amount first. Slider interaction with clear CTA
Select the strategy with simple explanation
Select the strategy with simple explanation
Showing breakdown of all debts owed and what priorities are. Clear instructions
Showing breakdown of all debts owed and what priorities are. Clear instructions
Breakdown of all debts owed and what priorities are. Clear instructions
Var 2
Var 2
Var 2
Slider component with live changes to debt free time to show impact
Slider component with live changes to debt free time to show impact
Avalanche information. Clearly showing value and benefits with breakdown
Avalanche information. Clearly showing value and benefits with breakdown
Avalanche information. Clearly showing value and benefits with breakdown
Pagination swipe for Snowball information
Pagination swipe for Snowball information
Can also manually input if slider is not precise enough
Can also manually input if slider is not precise enough
Showing breakdown of all debts owed and what priorities are. Clear instructions
Showing breakdown of all debts owed and what priorities are. Clear instructions
Breakdown of all debts owed and what priorities are. Clear instructions
VALIDATION
We conducted usability tests with 6 users. 1 design variant succeeded in providing an easy-to-understand interface through the clarity of language in instruction and education. Results at a glance:
We conducted usability tests with 6 users. 1 design variant succeeded in providing an easy-to-understand interface through the clarity of language in instruction and education. Results at a glance:
We conducted usability tests with 6 users. 1 design variant succeeded in providing an easy-to-understand interface through the clarity of language in instruction and education. Results at a glance:
Var 1
Var 2
Var 2.
Task success rate
Task success rate
83%
83%
100%
100%
Participants that understood the avalanche and snowball repayment strategies and it’s impact
Participants that understood the avalanche and snowball repayment strategies and it’s impact
66%
66%
83%
83%
Participants that thought designs were simple and easy to understand
Participants that thought designs were simple and easy to understand
100%
100%
100%
100%
Var 1 feedback
“Instructions were clear, simple and easy to use.”
“Instructions were clear, simple and easy to use.”
“I expect some more explanation of how the method works.”
“I expect some more explanation of how the method works.”
“I like the straightforward, simple approach to finance which is usually difficult”
“I like the straightforward, simple approach to finance which is usually difficult”
Var 2 feedback
“Much more informative and more in-depth...”
“Much more informative and more in-depth...”
“Clear to understand. Very easy to interact.”
“Clear to understand. Very easy to interact.”
“Easy to understand that these are different strategies on how to pay off debt and what the benefits are of each.”
“Easy to understand that these are different strategies on how to pay off debt and what the benefits are of each.”
FINAL OUTCOME
The calculator tool was redesigned to be an impactful and interactive experience for the user, increasing it’s value within the app by improving it’s usability and ability to educate. By utilising engaging components and presenting all relevant information intuitively, users are guided through the journey smoothly and can more easily comprehend the benefit and importance of this feature to their financial situation.
The calculator tool was redesigned to be an impactful and interactive experience for the user, increasing it’s value within the app by improving it’s usability and ability to educate. By utilising engaging components and presenting all relevant information intuitively, users are guided through the journey smoothly and can more easily comprehend the benefit and importance of this feature to their financial situation.
The calculator tool was redesigned to be an impactful and interactive experience for the user, increasing it’s value within the app by improving it’s usability and ability to educate. By utilising engaging components and presenting all relevant information intuitively, users are guided through the journey smoothly and can more easily comprehend the benefit and importance of this feature to their financial situation.
Tool name updated to make more sense
Explains more of benefits and value for the tool
Icons help to explain functionality easily
Primary CTA is conversational and approachable for the user while also offering alternatives to not alienate the user
Tool name updated to make more sense
Explains more of benefits and value for the tool
Icons help to explain functionality easily
Primary CTA is conversational and approachable for the user while also offering alternatives to not alienate the user
Before
Easily access extra information about the repayment strategies via drawer as an option for users who need it
Not overwhelming with amount of text, no financial jargon to confuse users
Clearly shows the pros and cons of each strategy without being too wordy
Emphasising important information without overloading
Before
Before
Easily access extra information about the repayment strategies via drawer as an option for users who need it
Not overwhelming with amount of text, no financial jargon to confuse users
Clearly shows the pros and cons of each strategy without being too wordy
Emphasising important information without overloading
Easily access extra information about the repayment strategies via drawer as an option for users who need it
Not overwhelming with amount of text, no financial jargon to confuse users
Clearly shows the pros and cons of each strategy without being too wordy
Emphasising important information without overloading
Utilising buttons for adjusting amount following feedback that slider is too complicated technically and will lag. Slider also had accuracy issues for larger amounts of debt
Providing support link for users that need it in approachable way
‘Debt Free’ time which will live update with changes to the £ amount to show the impact of increasing repayment to debt amount
Showing interest saved as a positive reminder
‘Debt Free’ time which will live update with changes to the £ amount to show the impact of increasing repayment to debt amount
Showing interest saved as a positive reminder
‘Debt Free’ time which will live update with changes to the £ amount to show the impact of increasing repayment to debt amount
Showing interest saved as a positive reminder
Before
Utilising buttons for adjusting amount following feedback that slider is too complicated technically and will lag. Slider also had accuracy issues for larger amounts of debt
Providing support link for users that need it in approachable way
Utilising buttons for adjusting amount following feedback that slider is too complicated technically and will lag. Slider also had accuracy issues for larger amounts of debt
Providing support link for users that need it in approachable way
Before
Pill button to convey repayment strategy selected
Pill button to convey repayment strategy selected
CTA language is conversational and easy to understand
Edit icon button for users to control their plan easily
CTA language is conversational and easy to understand
Edit icon button for users to control their plan easily
Before
Before
IMPACT
The app is currently waiting for FCA approval to be released due to the outcome of the calculator tool being closely aligned with financial advice. Unfortunately this means we cannot gather live metrics for assessment, but the feedback from user testing showed good signs. It was validating hearing users say this is a useful tool that they would use going forward.
The app is currently waiting for FCA approval to be released due to the outcome of the calculator tool being closely aligned with financial advice. Unfortunately this means we cannot gather live metrics for assessment, but the feedback from user testing showed good signs. It was validating hearing users say this is a useful tool that they would use going forward.
The app is currently waiting for FCA approval to be released due to the outcome of the calculator tool being closely aligned with financial advice. Unfortunately this means we cannot gather live metrics for assessment, but the feedback from user testing showed good signs. It was validating hearing users say this is a useful tool that they would use going forward.
“When you’re in debt you need hope, and information and data is the main thing, this app has that”
“When you’re in debt you need hope, and information and data is the main thing, this app has that”
“When you’re in debt you need hope, and information and data is the main thing, this app has that”
“I can see myself using this tool... this is a page I would be on a lot”
“I can see myself using this tool... this is a page I would be on a lot”
“I can see myself using this tool... this is a page I would be on a lot”
Get in touch. I’d love to connect
I’m in Melbourne, Australia
Get in touch. I’d love to connect
I’m in Melbourne, Australia
Get in touch. I’d love to connect
I’m in Melbourne, Australia