Tracksy
Tracksy is a mobile app that helps users track their subscriptions to help them better understand their finances.
The project was made in dark mode to reflect the popularity of dark UI in the tech world.
It was made for Android Devices to better understand Material Design systems.
1.The Need for a Subscription Tracker
In today's digital age, the prevalence of subscription-based services has significantly increased. Especially when many companies have opted in to include subscription services alongside their online storefront.
As subscription economy continues to grow as an integral part lives, managing the multitude of subscriptions can quickly become overwhelming and confusing.
2.Financial Strain
3.Information Overload
The number of subscriptions that an individual can accumulate can quickly turn into an information overload. Remembering renewal dates, login credentials, and fact a service even exists can become challenging.
Without a centralized system to manage subscriptions, users may find themselves spending significant time and effort trying to keep track of their subscriptions manually.
Competitive Analysis
To create a unique product that stands out, I researched competitors to understand what users valued VS what they disliked and summarized them into key points. Each app navigated subscription tracking differently which gave me a wide view of what was already available in the market.
TrackmySubs
10+ screens to fully complete signup
Large amount of customization options
Busy & overwhelming UI
Rocket Money
Easy to customize to fit individual needs
Components clearly organized
Long signup process & setup wizard
Bobby
Manual entries for all subscriptions
Simple to organize & edit each subscription
Not all UI pass web accessibility
Creating a Persona
Before designing a solution I needed a clearer idea of who my ideal user exactly is. I conducted secondary research founded in the following questions.
How do individuals currently keep track of & monitor their online subscriptions?
What strategies or tools do individuals use to save money on their online subscriptions?
Are individuals generally aware of the total amount they spend on online subscriptions each month?
What are the key factors that influence individuals' decisions to continue or cancel their online subscriptions?
By answering these questions and analyzing competitors I could not only understand what type of solution was needed but who needed it. I created a persona profile to summarize my findings into an ideal user. Personas help build a tangible foundation for me that helps greatly during my own design process.
Proposing a Solution
Mapping a User Flow
Creating user flows I kept simplicity and accessibility in mind. I wanted to ensure Tracksy was a seamless experience for users to navigate through. I designed the user flow to eliminate any unnecessary steps or complexities.
Additionally, I wanted actions within the app to work for the user, not the other way around. This way, users can quickly understand and complete desired tasks without any confusion of getting lost within the app or experiencing information overload.
Sketching & Testing the flow
A quick prototype was made with sketches to test initial ideas. Sketches went through a couple iterations after user feedback to make sure the next phase would have a strong foundation.
Wireframes
Wireframes for Tracksy were made after assessing what was and wasn't working from prototype sketch testing. Due to the more complex nature of financial apps, I made the wireframes detailed and clean from the start. This way users wouldn't feel lost from lack of information on prototype screens.
5
users
7
tasks
20
minutes each
Key Takeaways
• Tasks were straightforward & easy to complete for users
• Users were looking for more familiarity, some elements felt out of place
• Buttons needed to be larger & reiterated to encourage users to use them
• Calendar should be more comprehensive at a glance and match Android UI
Style Guide
I decided to design my project in Dark Mode to reflect its popularity in the tech industry. It provides a sleek, modern feel that also helps important components pop!
I selected lavender and cyan as complementary colors to ensure users do not get overwhelmed by a single hue since financial apps can be packed with detail. Both colors are subtly muted to avoid causing eye strain in the dark background.
Tracksy aims to provide a user-friendly and trustworthy experience with this color palette. Components and icons follow Android’s Material Design for a universal feel.
High Fidelity - Version 1
Wireframes for Tracksy were made after assessing what was and wasn't working from prototype sketch testing. Due to the more complex nature of financial apps, I made the wireframes detailed and clean from the start. This way users wouldn't feel lost from lack of information on prototype screens.
Before finalizing anything I conducted another round of testing with new participants to ensure everything was intuitive & polished as possible within my projects’s timeframe.
5
users
10
tasks
30
minutes each
Key Takeaways
• Side scroll graph not immediately clear
• Graphs and charts were easy to understand and highly valued to users.
• Users liked option to explore competitors but distinguishing which one was selected wasn’t clear at first
1.Revised Home screen
Added side-scrolling bar
Added ‘Manage Subscriptions’ button
Updated icon for ‘+Add reoccurring payment’ to for consistency purposes across app
Before
After
2.Added 'Manage Subscriptions'
In order to create a truly centralized space for users to manage subscriptions I added a feature that helps users do just that. Instead of having to leave Tracksy to update subscriptions, users can now cancel or adjust their plans within the app.
Screen
Input
3.Selection Usability
Selection of an icon was low visibility for lighter backgrounds. I wanted to ensure it was clear for users to tell what they were clicking on so I updated it to have higher contrast.
Before
After
Final Product & Lessons Learned
Throughout the development of Tracksy, I embarked on a valuable journey of designing using Android’s Material Design guidelines. As somebody more familiar with IOS, this project required plenty of discusions & revisions to adapt to Android’s UI patterns.
This project was very rewarding because alongside learning more about Android, I got to exercise my love for data visualization. I had not previously created data visualization within an interactive space. It was a great experience to combine graphic design alongside User Centered Design.
Another challenge I enjoyed working with was designing with small, technical details. When so much information is being communicated, it’s with the most importance that everything is thoughtfully arranged and executed with precision. Otherwise users can easily get lost, entirely defeating the purpose of the application. I am excited to have practiced these technical skills as it paves the road to future projects. I had a lot of fun with this, and thanks for checking it out!
