We embrace new technical designs every day and realize that it tends to overwhelm us. It's also hard to keep track of all the products and services we subscribe to each month.
The Goal
A mobile app to track users' subscriptions and manage them.
🏅 Final Impact
Research
In order to identify the problems and pain points users face within a restricted timeframe, I decided to conduct secondary research. The results are as follows.
Empathy Map
To better understand our target users, I used the synthesis method and an empathy map, based on research findings, to gain insights into their demographics, actions, feelings, goals, and pain points.
Solutions
After identifying the users' problems, I conducted a brainstorming session to generate solutions and decided on the following as the best options for Subhub users.
How might we help users to cut the cost of their subscription?
📍 Providing summary chart of monthly and yearly expenses
How might we help users to track all their subscriptions?
📍 Manually add all users’ subscriptions
📍 Linking users’ apple ID to automatically load their subscriptions.
📍 Categorze all subscriptions with a filter section
How might we help users to cancel their subscriptions easily?
📍 Provide a reminder feature to notify users when their subscription trial ends
📍 Provide a cancellation feature for quick and easy subscription cancellation
User Flow
To visualize users' behavior while using Subhub and how they might interact with it.
Design Library From Groundup
Dark blue is used as the primary background color to create a cool and calm feel, with red and yellow as contrasting secondary colors. SF Pro font was chosen for a modern and concise app appeal.
Wireframe
I conducted a low-fidelity mock-up based on the user flow to demonstrate how the app’s flow and functions look. The following are the main screenshots of the wireframe.
Usability Test 1
Testing the wireframe is the best way to understand how users feel and gather feedback on the design. I ran a first usability test based on the plan, test script, and goals to evaluate whether the user flow is reasonable and functional. The following are the main screenshots of the wireframe.
High Fidelity Mockup
I conducted a high-fidelity mockup based on the UI system I created and the revised wireframe. It demonstrates to users what the app will look like in detail, including color, images, and animations.
Usability Test 2
I ran a second usability test with 3 users to test the prototype with a more detailed demonstration. It allowed users to test the swipe and scroll functions in action. The biggest change was the primary color: red was too harsh and hard on the eyes, it was changed to a calm dark navy-black to allow all the multi-subscription elements to stand out without clashing
Iterations
After two rounds of usability testing. The iterations are as follows:
