"Do you know how much did you spend on subscriptions this month?"
It's hard to keep track of all the products and services we subscribe to each month. So at this time, I would help an imaginary company with a product to help users to keep track of subscription fees.
Each subscription service has a different plan, but users can't remember the details such as payday, duration, renewal day, and price.
The users sometimes forget about subscribing to the service when they don't use it anymore.
Some people feel stressed when they don't notice the price change for a long time.
Complex cancellation processes leave an awful impression on the service. For example, one participant encountered a service that didn't allow him to unsubscribe from his mobile phone and required him to go to the desktop. He felt that the service didn't consider the users' convenience and didn't want to return.
This company has launched a desktop-only website that is not mobile-friendly. It needs to create a mobile version of its product that a broader audience can use.
The company's target users are over 25 years old and subscribe to many services. The design should be trustworthy but looks friendly at the same time.
At the discovery phase of my project, I conducted user survey and user interviews in order to get a better understanding of the problem.
I made the user survey with Google form and posted it on Facebook, Linked In, and Slack communities.
・Demographics information about users - Age, Gender, Device they use daily (Mobile or Desktop)
・How many subscriptions they use and how much they spend on average per month
How many subscriptions do participants use?
15 (60%) people use under 5 services.
6 (24%) people use more than 6 subscriptions
4 (12%) people don't count how many subscriptions they use.
How much do they spend on average per month?
12 (48%) users spend under $50, while 12 (48%) users spend more than $50.
One user doesn't know how much she/he uses per month.
Remote User Interview
Contact to survey participants
・5 people who subscribe to more than 6 services
・1 person uses under 5 services and spends more than $50 per month
・Everyone uses both a mobile phone and desktop every day
・Everyone is older than 25 years old.
" I don't have a way to check all subscriptions in one place."
"The service suddenly increased the fees, and I didn't notice for more than 6 months."
After the discovery phase, I synthesized interview information into an affinity map. Then, I created a Persona to focus on the target users in the rest of my design processes.
I wrote down all information on the digital sticky note with Miro and made some groups that had similar opinions/thoughts.
Especially, I focus on where people feel frustrated when they use subscription services so that I can find the problems.
I built a persona who uses more than 10 subscriptions and spends $120 per month. He loves to try and seek new services but sometimes forgets to cancel unused subscriptions.
I came up with some solution ideas to solve the problems I found in the define phase. Then, I decided on the red routes that I focus on creating in this project which include solution ideas. Next, I made user flows to think about the possible flows to accomplish the red routes.
The users can list up subscription services and check the detailed information in one place.
Users can know how much they pay in total this month and check the payday in the calendar.
Users get notifications when the renewal day or payday is approaching.
Users can cancel or change the plan through the app.
Users check the total expense in this month, payday, and the list of subscriptions on the top page.
Users go to the detail page and cancel the service.
Users change the plan after getting notified of the renewal day.
1) Unsubscribe from a service
When the user clicks the objective service from all subscription lists, s/he go to the detail page. S/he can cancel instantly or schedule cancellation beforehand.
2) Change a service
When the user clicks the objective service from all subscription lists, s/he goes to the detail page. S/he just needs to choose from the options listed in the payment plan section. A new plan will be applied from the next billing day.
4-1. Prototype - sketching
I sketched the screens on each step of the flow and built the low-fidelity mockup with Marvel.
5-1. Usability test for the low-fidelity prototype
I conducted the usability test remotely with 5 people to get quick feedback on my solution ideas.
Look at the first page. Tell me what you find on this page.
What do you think you can do in the bottom navigation bar?
Where do you see all of your subscriptions?
You want to unsubscribe from Netflix because you don’t use it these days. How do you do?
You got the notification that Netflix’s next payday is coming soon. You are the premium member but want to change to the basic member. What will you do?
At first, I thought about the bottom navigation, which had three main pages: "My subsc" as a home button, "search" to search for a new subscription service, and "feed" to check the user's followers' recent actions.
However, participants didn't understand immediately what they can do on those pages. In addition, those pages are out of red routes in this project. So I decided to eliminate the bottom navigation to focus on the main route and make the UI more straightforward.
Go back to the previous page
I forgot to add the go back button when the user moves to the service detail page. I drow the "cancel" button to cancel from a subscription service, but some users were confused with the "cancel" and go back buttons.
I added the renewal message on the top page, but some participants didn't recognize it because of the grayscale color. So I chose a vivid color to catch users' eyes in a high-fidelity mockup.
4-2. High-fidelity prototype
Next, I incorporated my sketching and feedback into high fidelity mockup. While creating the UI, I also keep in mind the brand's personality and attributes to maintain the design's consistency.
A trusted friend who is helping you save money.
Trustworthy, Caring, Friendly, Casual
5-2. Usability test for the high-fidelity prototype
I recruited 5 people to conduct the remote usability test.
Look at the first page.
How much do you need to pay in total in December?
How to change the graph’s duration to one year?
On Dec. 15, what services do you need to pay?
What services do you need to pay on Dec. 15? (Cancel subscription flow)
How do you unsubscribe from sakura coffee? (Cancel subscription flow)
You got the notification that Netflix's next payday is coming soon. You are the premium member but want to change to the standard member. What will you do? (Change the plan flow)
Scroll to the aimed services
When users clicked the date on the calendar, the screen scrolled to the service. However, some people needed more than 10 seconds to find the aimed service. So, I added the frame around the subscription to improve the visual hierarchy.
When I asked the participants to unsubscribe from Sakura coffee, they checked the "your plan" section first and took time to find the "cancel" button at the top navigation. Also, some people were confused with the go back button. So I changed it to the "unsubscribe" button and moved it to the "your plan" section.
Change the plan button
On the confirmation page to change the plan, I made the "change the plan" button as an opposite option of the "confirm" button. However, some participants thought that both buttons had the same meaning. So, I changed the "change the plan" button to the "back" button to go back to the previous page.
4-3. Updated high-fidelity prototype
I updated the prototype based on the feedback I collected in the usability test.
If I have more time on this project, I will add the following functions.
Search and add subscriptions
In the interview, some users wanted to get some recommendations or check the rankings of subscription services. They are interested in new services but don't have much time to search for them. So if the app can suggest a new subscription service based on their interest, it will be valuable for them.
Check other's recent actions
One interviewee mentioned the function of social media. She wanted to see her favorite stars or friends' reactions about subscription services to gain reliable reviews.
Some participants expected something to happen after the screen scrolled to the area. Therefore, I needed to reconsider the sequence of the animation. However, Figma doesn't support the dual animations with one tap reaction, so it was challenging for me how to make it happen under the software limitation.
In this project, I learned that button design is complicated. I didn't realize that I chose the misleading word on button labels until I conducted the usability test. Next time, I will care much more about the UX writing to the user-friendly design.