Undebit
Undebtit is a debt payment manager platform that generates a plan for you to get out of debt by paying extra amounts on individual accounts until they are paid off. All of the payment plans that Undebtitcan use is all rollover plans, meaning that additional fees are rolled from one debt to the next and so on.
The problem:
- UI and branding inconsistency with the rest of their products
- Present complex data in a way that is easy to understand for the user.
- Too many features to which some of them don’t add any value to the ultimate experience.
- Low amount of subscribers to the premium options.
Responsive design to access your debts wherever you go on any device.
The project
To redesign a new payment manager platform and develop a new branding system. Improve user interphase and define a hierarchy to avoid confusion and present complex data in a much digestible way. Build a design system to support, identify, and ensure consistency across all interphases.
Research: Components & patterns
At this stage, our main focus was to understand Undebtit branding and products. I began exploring some legacy projects done by the previous team and the utilization of their current style guide to identifying the main inconsistencies and key problems.
The next step was to take an inventory of their products; our goal here was to identify consistent components and patterns across all the digital platforms.
Next, we start drawing elements from their style guide and start developing a design system that works as the source of truth for this project and future interphases.
Research: Diving into the platform
I research a few financial platforms in the industries to identify patterns and features their offerings to users.
- Many industries utilize graphs and charts to describe financial data.
- Strong hierarchy
- Ability to customize the dashboard.
- An option that links to external accounts and import bank data to create a custom plan in minutes.
Sketches
With a clear understanding of what type of users we were and what kind of features we want to focus on, we sat down and start sketching ideas around these features focusing on mobile-first since the majority of our users account for 70% mobile.
After a ton of sketching rounds and voting on the best hight level ideas – it was time to move on to wireframing.
User Testing: Round 1
After designing the mockups in Sketch, I used invisionapp.com to launched a small test to identify how our users react to the dashboard interphase.
Feedback
- Some users were confused by the graphs we showed they didn’t understand how the chart relates to the money they are paying
- Users felt good by the information presentment but felt overwhelmed by the amount of it.
- I love the capability to customize their dashboard.
- The majority express they felt a bit intimidated by the amount of data and complexity of the app (one of the main goals was to simplify the current experience, we need to dive deeper and figure out a better way to present data.)
25
Usability Tests
85%
Confused
90%
Complexity
Pivoting
Once I identify the user’s needs, I revisit previous work and create new mocks using Sketch. I focus heavily on simplifying the experience and redesigning the graphs to illustrate users’ progress. I then focus on trimming down information present the user – we wanted to make sure we were not removing important information instead of focusing on presenting key metrics and letting the user choose how much information they wish to look.
Interface exploration
User Testing: Round 2
Using invisionapp.com, we are validating ideas, and testing if we improved the user experience and user emotions around using the platform.
Feedback
- I loved the clean interphase and the ability to customize views.
- The application feels modern and professional.
- Most users were able to understand the graphs and identify key metrics. The majority were able to customize their dashboard by hiding and reveal the most critical information to them.
20
Usability Tests
40%
Confused
10%
Complexity
UI Design
After finding all usability mistakes through testing, I began designing the final screens in Sketch. Using the design system components we created, I started creating mobile and desktop views.
I’m a big fan of the customization feature we added to the application because it allows users to control the amount of information they wish to see at once, this allows us to create a much cleaner application without sacrificing content.
Next Steps
- Continue testing the interphase with different segmentations.
- Interview the clients to identify new features.
- Support our engineers in the building process of the platform.
- Support implementation of the design system on other platforms.
You reach the end of this project.
Thanks for watching! Please keep browsing to watch other similar projects.
