Streamlining Subscription Tracking to Empower Financial Control
Tracking monthly subscriptions can be a real headache. Many of us only notice money disappearing from our accounts, often for services we no longer even use. Ontrac is a subscription tracking dashboard enabling users to keep tabs on all their subscription fees from various websites, services, and apps over time, making it easy to stay in control of your spending. Their existing product is a desktop-only website that is not mobile-friendly, but their objective is to create a mobile version of the product better suited for a broader group.
Jump to PrototypeUI/UX Designer
6 Weeks - August 2023
Figma, Miro
Many consumers, particularly those over 30, struggle to manage their growing monthly subscription list effectively. With numerous digital services and subscriptions available, users often face challenges tracking expenses and making informed renewal decisions. Ontrac, a company with a product for monitoring subscription fees, currently offers a desktop-only website without mobile accessibility.
To meet the evolving needs of its user base, Ontrac aims to create a mobile app, accommodating the increasingly mobile-centric preferences of users. This transition caters to existing users and opens doors to a more expansive market, driving growth and user engagement.
The primary objectives are
By addressing these challenges and opportunities, Ontrac seeks to empower users, enhance their financial control, and tap into a broader user demographic.
Through a design thinking approach characterized by its non-linear and iterative nature, I concentrated on addressing users' most crucial needs. This methodology encouraged me to deeply understand ontrac's users, evaluate their challenges, and craft a valuable solution. While I presented this case study sequentially, the iterative nature of the design process has resulted in certain sections of my method being under different headings.
I chose to invest ample time in research to better understand the existing problem space and the general pain points users encounter. This equipped me with a solid foundation to back a design with a functional and intuitive user experience in my design. These were my research questions:
In the initial phase of the research journey, I discovered compelling statistics that shed light on users' challenges with managing their subscription services.
.png)
Studies and reports highlight the widespread underestimation of monthly subscription expenses, causing financial strain across demographics. This challenge stems from various factors, including subscription overload, renewal management complexity, cancellation difficulties, and better expense monitoring. Addressing these issues calls for a user-friendly solution to efficiently track and manage subscriptions, potentially reducing stress and waste associated with this modern overconsumption trend.
I conducted a thorough competitor analysis to understand how existing solutions assist users in subscription management. This involved evaluating the user experience of each competitor's mobile app as a new user adding a subscription, uncovering valuable insights and design opportunities to guide ontrac's design.
.png)
.svg)
.svg)
Given that this project aimed to expand an existing product into one that appealed to a broader user base, I focused on hearing from people across the target demographic.
I conducted five user interviews, delving into the pain points related to subscription tracking. I carefully selected participants aged 24-54 who actively use web and mobile services (3+ times a week) and manage at least three credit card subscriptions.
I gathered and restructured the insights from these user interviews using an affinity map. This approach allowed me to gain a comprehensive understanding of the challenges and objectives of the users to inform a user-centric solution. I categorized the information based on their struggles with managing subscriptions, the significance of efficient management, and their current methods for subscription management.
Extensive primary and secondary research validated the original project goals. The original design focus areas included creating an efficient central subscription management platform, streamlining the unsubscribe process, and implementing auto-renewal notifications. User research highlighted a new challenge: users couldn't easily determine their regular subscription spending at a glance.
I created a representative user persona named Derek to sustain a user-centered approach. Derek's profile is based on a synthesis of research data, incorporating insights from the company's existing data and all the research I conducted.
While designing the user flow, I kept the project's ultimate goal in mind. Grounded in user research and defined project goals, I developed a set of user flow diagrams that illustrate the main user interactions within the app.
.png)
Before creating the following wireframes, I conducted initial brainstorming sessions to explore various design possibilities for each of the app's key screens. I subsequently refined and streamlined these ideas into the wireframes below.
At this stage, I opted for a paper prototype to assess the design's intuitiveness and effectiveness in assisting users with subscription management. By conducting in-person tests, I engaged directly with users, gaining valuable insights into the strengths and areas for improvement in the user flow and design; it also allowed for real-time sketching of revised screens to enhance the overall flow.
.png)
For the ontrac usability tests, I conducted in-person interviews with five participants who closely matched our app's target demographic, mirroring our user persona, Derek. Each session lasted around 30 minutes, focusing on tasks like account setup, subscription management, and setting notification alerts on the paper prototype. These tests delivered essential user insights.
The user testing uncovered two critical issues, both around the primary user flow for adding subscriptions to the app.
I incorporated these critical flow changes in the design as I digitized them in Figma.
.png)
I continued developing digital screens for the subscription management app, aligning my design choices with the primary user goals of centralizing subscriptions, simplifying the unsubscribe process, and providing auto-renewal notifications. This involved refining screens from the initial paper prototype, incorporating user feedback, and creating additional screens, such as an Analytics section for tracking subscription spending, an Alert Center for managing notifications, and screens for canceling or changing plans.
I rebranded Ontrac to align with their brand personality of being a "trusted friend who is helping you save money." The vibrant orange and cool grey tones radiate trust, caring, friendly, and professional brand attributes.
.png)
I conducted a second round of usability tests with five fresh participants who matched the target demographic. These in-person sessions involved using the high-fidelity Figma prototype on a mobile phone, simulating the actual experience of using the subscription tracking app.
During the usability test, a significant issue surfaced concerning a core user task—adding a new subscription to the app. Participants encountered confusion when attempting to 'sync subscriptions from the bank.' The lack of user feedback in the app iteration left them uncertain about which subscriptions were successfully added, leading to a sense of ambiguity regarding the outcome of their actions.
I only need to create additional screens for this usability issues, I did not make any changes to the original ‘Add Subscription’ screen.
Major Design Change #1 Following Usability Test Feedback
Another significant usability issue emerged during the test. Users expressed concern when attempting to cancel a subscription that ontrac could not do directly in the app: ontrac correctly directed users to the third-party platform for cancellation. However, it did not verify whether the cancellation was successful, leaving users uncertain about the outcome. Additionally, the app had no functionality to delete or cancel a subscription.
I added a new pop-up that appears after the user returns to the app from the third-party site.
Major Design Change #2 Following Usability Test Feedback
After implementing crucial design refinements based on the second round of usability testing, I polished up the final high-fidelity prototype.
.png)
Effortlessly Add Subscriptions to ontrac: From Credit Card or Manually
Users can import subscriptions from their credit cards or add them manually, establishing a central hub for comprehensive subscription management.
Simplified Unsubscribe
Users can easily cancel subscriptions through an intuitive process, either directly within the app or via the third-party platform, in line with the project's goal of streamlining unsubscribing.
Auto-Renewal Management
ontrac's alert system enables users to set custom notifications for upcoming subscription renewals, supporting the project's aim to enhance auto-renewal management and equip users with timely information.
In-Depth Spending Analysis
Users can explore detailed analytics of their subscription spending within ontrac. This insightful feature aligns with the project's goal of helping users gauge their regular subscription expenses at a glance, providing a comprehensive view of their financial commitments.
This project has been a significant milestone in my journey as a UX designer, providing valuable insights and experiences that have fueled my growth. Remarkably, I completed the project in nearly half the allocated time, a testament to effective time management and organizational skills honed throughout the process. Despite the pace, I remained unwaveringly thorough in my approach.
The meticulous initial research and diverse research methodologies I used were instrumental in establishing a profound understanding of the user base and their pain points. This groundwork ensured that my design was firmly rooted in real-world issues, anchoring it in relevance. My iterative design process, involving ongoing testing and refinement, allowed me to make informed decisions and adapt to user feedback effectively.
While I am proud of the progress made, I recognize the potential for further enhancements in the design. Additional iterations and testing promise to fine-tune the user experience, aligning it even more closely with user needs and project objectives.
This project has reinforced the importance of user-centric design, time management, and iterative design. As I look forward, I am excited to continue pushing the boundaries of design excellence and further optimizing solutions to create impactful user experiences.
.png)
.png)