Landing Screen
Designed for the budget-conscious.
An average household subscribes to 3.4 streaming services at a time. That's about $30/month or $360/year; not including the popular try-it-before-you-buy-it model. Too often, users are charged with forgotten fees after the free trials expired.
Trace is a subscription tracking app that was developed in response to an existing desktop model. I was tasked with adding a mobile-friendly version to increase their market reach and help their users save money.
Business Goals & Impact
Adding a mobile-friendly version will significantly increase the company's market reach, with more than half of potential users on mobile devices. The impact of this mobile release will result in more users and more business.
Goals:
Design an iOS or Android mobile app to support the existing website
Increase its user base as the product expands to the German market
1. Comprehensive View
See all your subscriptions in one place and analyze your spending.
2. Unsubscribe
Cancel unwanted subscriptions and free trials before they are auto-renewed.
3. Setup Alerts
Get notified before subscriptions renew and free trials end.
4. Change Currency
View your financial data in a different currency wherever you are.
Project Overview
Category
fintech
My Role
UX/UI designer
Timeline
2 weeks
The Team
solo
1. Understanding the Problem
Competitor Analysis
To understand the current market, I analyzed three industry leaders: Trackmysubs, Truebill, and Trim. I focused on their product features to compare their strengths and weaknesses. Even though all the apps have a comprehensive way to visualize the financial data, other features are hidden under premium features.
Heuristic Principle of UI/UX Design
The heuristic analysis focuses on usability topics vital to using a subscription tracking app. This analysis helps understand why these current solutions are not appealing to the targeted demographics.
Competitive Usability Testing
I interviewed 4 users to test the usability of each competitor’s app: Trackmysubs, Truebill, and Trim. The main goal was to evaluate the users’ thoughts on what the competitors are doing, how they are doing it, what’s working and what’s not.
Here are my insights:
2. Reframing the Problem
Affinity Map
From my interviews, I organized all my notes into an affinity map. Majority of users do not want to enter their financial information, especially when they haven’t tested the product or trusted the company yet. Some users mentioned that they do not want another Excel sheet to enter their information.
User Journey
Mapping the user journey allows me to visually understand the product from the user's perspective. This asset ultimately answers the question: how do our users actually use the product?
3. Organizing a Framework
Sitemap
I organized my ideas and sorted the main features and functionalities through a sitemap. This was presented as a way to visualize the navigation structure and hierarchy of the screens.
User Stories & Flows
Using the user stories, I mapped out two user flows to illustrate the critical paths users will follow when using the app.
4. Designing for User-First
Wireframes
Because of time constraints, I decided to spend more time designing wireframes based on the information architecture above. I believe this will provide better quality usability testing as opposed to hand drawn sketches.
Key Issues:
2/5 users tapped on the ‘Test it out’ button to start the app, unclear on its functionality.
No ‘Free Trial’ tracking method.
Branding & Visual Identity
As a brand, I needed to create a consistent visual identity and a strong brand platform. The style guide underwent many iterations to incorporate design principles and accessibility standards.
High Fidelity Mockups
Interactive Prototype
After building my high-fidelity mockups, I used Figma to digitize my prototype for testing. This level of prototype gives a more accurate feel of the brand and will provide better quality usability testing.
**This is the final version of the prototype.
5. Test, Iterate, Repeat
3
Rounds of usability testing
15
Moderated tests conducted
98%
Increase in completion rate
Usability Testing
I ran another usability test using high fidelity mockups. The primary objective is to gather qualitative data to evaluate user’s interaction with the new design and quantitative data to assess common issues that arise.
Critical Issue #1
Users have a hard time distinguishing the text - either it’s too small or the colors do not have a strong contrast to the background.
Critical Issue #2
Some users don’t have digital mobile payment platforms and would rather enter credit card information.
Critical Issue #3
Although users were able to go through the registration process, the subheading under ‘Registration’ implies that they have to pay to use the app.
Final Product
Key Metrics
Quarterly sales growth increased
as users downloaded the mobile app as users saw value in the product.
Customer retention rate doubled
as users add their own financial data to track subscriptions and other transactions.
Product efficacy increased
in response to a high percentage of task completion rates.
Final Thoughts
Throughout this project, I had the opportunity to discover the practical aspect of Fintech. Unlike the psychological aspects of UX industries - notably, E-commerce and retail - Fintech is more methodical.
I wanted to figure out a way for non-targeted users to feel comfortable using Fintech apps to help with their own expenses. Based on my research, users feel more comfortable after testing out the features before releasing their actual information. It’s a non-committal way to let users see the opportunities within the app. Then, it’s matters of persuasion - in the branding, the user experience, and user interface.
What's Next for Trace?
I would like to experiment if my product would interest the non-targeted audience. It might take more resources to support my goal, but I believe the findings will expand the company's user base, doubling sales growth.