A subscription organizer to track your spendings
UX/UI Product Design | Subscription Tracker | Finance app
SubTrack is a personal subscription management application for individuals to manage and track their subscription products and services in one place. The project involves introducing a mobile-friendly version for new and existing users to increase their market reach.
I am the sole UXUI designer. This project requires recreating the user experiences and user interface for the mobile version in 5 weeks.
Some of the existing business problems are suggested as follows:
While the desktop version has a generous amount of space to fit all subscriptions, the mobile version is preferred to show a comprehensive view of all the subscription products, services and costs.
The subscription did not provide a third-party link to unsubscribe from the product or services. It is easy for users to see the money spent each month but without a quick action to unsubscribe from the product.
The notification function is not available for the existing desktop version. As for creating a mobile-friendly version, adding a pop-up notification for users to inform them of any payments or incurring auto-renewal subscriptions will be more handy.
Nowadays, more businesses release their product and services digitally in subscription-based models to achieve more predictable and stable revenue, and it is becoming more popular among businesses. When people started purchasing digital products and services with subscription bases, this led people to consider having a tool to organize and manage their subscriptions in one place to track down the products and services they are subscribed to and the cost they have spent.
While the business already has an existing desktop version of the application, this time I have focused on recreating the process flow for the mobile-friendly version:
While I had the option to decide on the project plan, I decided to do a mixture of Design Thinking and Lean UX approach for this project.
Secondary research was conducted as a starting point for this project. While knowing all the products and services today are leaning towards digitalization on a subscription basis, I studied how people managed their subscriptions in the earlier days and whether they utilised any tools to track their subscription expenses and have noticed most people intend to check their bank statements to determine their monthly subscription expenses. This is because bank statements are reliable documents for seeing their expenditure records on different types of products and services. However, this method was not effective for people to unsubscribe an auto-renewal service. It will be too late for people who want to unsubscribe from a service before the next auto-renew period occurs.
With a subscription tracking platform, those issues can aid people better in managing their subscriptions consciously.
Other than the research above, further analysis of other subscription management trackers available in the market has assisted in defining areas that can refine better user needs and user experiences. The findings are as follows:
With the early research insights, the Affinity Map is created to consolidate the research into 7 categories that are surrounded by the goal of helping a user organize their subscriptions, it includes:
This is the initial design that helps me establish a basic structure of how the navigation will run on the actual screen. There are 6 major flows designed for the screen navigation:
Flow 1: Sign up / Login
Flow 2: Dashboard
Flow 3: Subscription
Flow 4: Calendar
Flow 5: Report
Flow 6: Account
The early sketches I created are centered on the idea of trying to not reduce the information in the desktop version yet provide different screens of data representation.
Once the sketches were complete, I recruited 5 participants to do a series of tasks with the sketches to gather feedback on the design. Most participants did not have issues understanding the screens and completing the scenario task, except for the navigation bar, as it was represented in lines on the top bar. Some provide suggestions to make some of the icon representations bigger, use colour codes on different subscriptions, and create an editing button specifically for editing the subscription instead of combining the screens of viewing and editing the subscription together in one screen. Other than those issues, all participants think the UI makes the flow intuitive to interact with.
.png)
After completing the high-fidelity screens, a second moderate usability test was conducted with another 5 participants. This time all participants completed their scenario task swiftly. However, users provided several feedbacks as follows:
Some suggested that the application would be nice if there were an option to change the application to dark mode, so later on I did a little experiential design on 3 screens to try out the dark mode.
The prototype is the iteration after the first version of High Fidelity Mockup. In this iterate version, I have made a minor update on some of the UI elements and refined the chart display on report pages. Additional screens on the account page were also created to give clear instructions on subscribing or unsubscribing to third-party services.
In this project, I decided to experiment with a different type of navigation, which is using finger gestures to swipe left and right to navigate the page instead of using a bottom navigation bar with icons for a user to navigate between pages. Sometimes I would think what if a user preferred a typical bottom navigation bar on their mobile? But one thing that reminds me is that the finger gesture of swiping left or right would be convenient for users navigating pages around.
The major takeaway from this project is that in my first high-fidelity mockup, I had been trying to use different styles of buttons to represent different functions, but sometimes having lots of button styles may confuse the users.
I appreciate this project as it has advanced my knowledge further not only on UX and UI skills, and also it helps me to learn how to create an user-centric design by balancing various techniques and understanding user requirements.