Overview
The Challenge
The company has launched a desktop-only website that is not mobile-friendly and now needs to create a mobile version of its product that can be used by a broader audience. Right now the company only benefits from desktop users but they know that adding a mobile-friendly version of their product will significantly increase their market reach (with more than half of potential users on mobile devices). This will ultimately result in more users and more business.
Business Goals
Identify potential users and find solutions to keep track of all their subscriptions and their spending through a mobile-friendly App. Also, be notified if any of the subscriptions are about to be auto-renewed.
The Solution
Design a mobile-friendly App to support :
1. All the subscriptions are in one place so that users can get a comprehensive view of spending on subscriptions.
2. To unsubscribe from a subscription so that needless spending can be reduced.
3. To be notified if any of the subscriptions are about to be auto-renewed.
Upcoming payment due with View budget
Trackbill budget reports help users keep track of their spending.
Pause or cancel subscriptions
Trackbill users are able to easily cancel /pause subscriptions within the same app.
Send notification reminder
Trackbill users get notifications to be notified if any of the subscriptions are about to be auto-renewed.
My Role
User Experience designer
User Interface designer
Prototyping
Usability Testing
Tools Used
Figma
Timeline
May-August
Process
Understanding the Problem
A lot of people waste more than $50 each month on subscription services/recurring spends. These recurring payments that get automatically withdrawn from bank accounts each month can add up fast - especially when people forget about canceling that one free trial. It’s normal to forget some subscriptions at times.
Knowing how much one’s recurring expenses cost every month and year can help one save money when it is needed the most. However, there is no mobile-friendly App to alert about subscriptions so as to get a comprehensive view of spending on subscriptions. Throughout the end-to-end design process, I used Design Thinking to guide my decision-making.
Conducting Research
I began by conducting secondary research to get a better understanding of the current market. During the research, I found there were a bunch of desktop and mobile apps trying to solve the subscription problem. I studied TrackMySubs, Truebill, and Trim for their pros and cons.
Understanding the Competition
I further conducted a heuristic analysis of 3 different competitors in the current market as well as the specific features they offer to users regarding their subscriptions. This analysis helped identify each app’s strengths, and weaknesses and where there could be room for improvement. The 3 competitors that were looked at included: Truckmysubs, Truebill, and Trim.
Affinity Mapping
After understanding suggestions from each of my five user interviews on Post-It notes, I organized the notes into related groups. I quickly learned:
An average user is enrolled in about 4 subscription services at any given time.
Most of the users notice unexpected charges on their bank accounts.
60% of users forget to cancel subscriptions and end up paying more.
The most important features for users are the amount owed for each service, payment due date, and cancelation of subscription.
Meet the User
To best illustrate an ideal user, I created a user persona with realistic goals, expectations, motivations, and pain points gathered from research insights.
User Flows
Based on the user and research insights previously gathered, I created user flows for the common routes that users would take to interact with the mobile subscription App. Creating these user flows helped provide a foundation for the interaction between the user and the app.
User Flow Key Symbols
Below are the 4 user flows I created for the commons routes that users would take:
User Flow 1: Cancel or pause your subscription (from notifications) and see the yearly Budget.
User Flow 2: Add a new subscription.
User Flow 3: Change or edit a payment reminder date
User Flow 4: View your profile.
Ideation with Crazy 8's
After sufficient research was performed, I applied the Crazy 8’s method where I sketched 8 possible screens and solutions in 8 minutes. This ideation method allowed me to generate as many ideas as possible without committing too much time.
Medium Fidelity Wireframes
Due to time constraints, I created medium-fidelity wireframes that I could easily transform into high-fidelity wireframes. Once I was satisfied with the content and overall layout of the wireframes, I conducted Guerrilla Usability Testing with 5 participants using the medium-fidelity wireframes and identified 4 minor usability issues. The required changes were implemented to sort out the minor issues.
Guerrilla testing Takeaways
Challenge 1
The notification of auto-renewal had two subscriptions showing simultaneously as a single message. This was a bit confusing for the users.
Solution 1
The notification of auto-renewal was amended to show only one subscription which was due for auto-renewal instead of two. This helped users to understand and take the necessary action required.
Challenge 2
On the Edit page, the various options were taking the user to another page to add or edit. This was found inconvenient by the users.
Solution 2
For the convenience of the users, I added the feature of a drop-down menu in various options provided. This was easier and more comfortable while editing.
Challenge 3
The profile page did not have any payment details option.
Solution 3
As desired by users, the credit card details option was provided. This helped users to sync their credit card details automatically elsewhere in the app.
Design System
To ensure that a consistent design is applied throughout the app that also aligns with the company’s brand, I created a design system.
High Fidelity Wireframes and Prototyping
Based on the user feedback from the Guerrilla Usability Testing and the design system created, I put together high-fidelity wireframes and assembled a prototype for users to test. I conducted 1 round of usability testing with a group of 5 participants. Through usability testing, I identified areas where users had issues and where the app did well.
Below are some of the tasks I had users complete for the Prototype Usability Testing:
Task 1: Cancel or pause subscription (from notifications) and see the yearly Budget
Task 2: Add a new subscription
Task 3: Change or edit a payment reminder date
Task 4: View your profile
Prototype Usability Testing Findings
I conducted 1 round of usability testing with 5 participants and identified a total of 4 minor usability issues. I implemented changes as required.
Challenge 1
The auto-renewal notification was showing both the options of pause and cancel. This was somewhat confusing for the users.
Solution 1
I amended the auto-renewal notification to make it clearer and easily understandable. The option of pause was totally removed. Now it only asked the users whether they wanted to auto-renewal or cancel.
Challenge 2
On the add subscription page, the users were being made to enter their next billing details in the beginning. Thereafter they could enter other details like name, category, and so on. Users were not liking the way they were directed on this page. They wanted to start with entering the name of the subscription instead of the next bill details.
Solution 2
I amended the page so that the users could enter the name first followed by category and other billing-related details.
Challenge 3
On the profile page, users wanted to have an option to add a family member, which was not provided.
Solution 3
On the profile page, I added the option of adding a family member, which was earlier not provided.
Check out the final prototype!
Conclusion
From the insights gathered through usability testing, the app was well-received by 100% of users and the outcome of the product met the business goals as intended.
What's Next for Trackbill?
Overall, I believe the project was a success based on the positive feedback from users. As previously mentioned, there were a total of 4 minor usability issues which were identified during the prototype usability testing. As users were curious to learn more about the screen time for each subscription individually, I would also like to expand on the said feature and gather insights from users through additional usability testing.
Reflection
From creating the project plan to executing the designs, I learned to apply select design thinking methods that would help optimize my time and efforts during each phase of the design process. Through each usability test, I found it helpful to jot down all the insights gathered from users and highlight the issues that were mentioned by multiple users. This process helped reduce the amount of time spent on identifying usability issues.