Overview

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.

Problems

1. Each subscription service has a different plan, but users can't remember the details such as payday, duration, renewal day, and price.

2. The users sometimes forget about subscribing to the service when they don't use it anymore.

3. Some people feel stressed when they don't notice the price change for a long time.

4. 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.

Challenge

1. 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.

2. 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.

Process

1. Discover

At the discovery phase of my project, I conducted user survey and user interviews in order to get a better understanding of the problem.

User survey

Recruiting

I made the user survey with Google form and posted it on Facebook, Linked In, and Slack communities.

Survey Questions

・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

Takeaways

Remote User Interview

Recruiting

Contact to survey participants

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.

2. Define

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.

Persona

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.

3. Ideate

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.

Solution Ideas

1. The users can list up subscription services and check the detailed information in one place.

2. Users can know how much they pay in total this month and check the payday in the calendar.

3. Users get notifications when the renewal day or payday is approaching.

4. Users can cancel or change the plan through the app.

User Flow

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.

Tasks

1. Look at the first page. Tell me what you find on this page.

2. What do you think you can do in the bottom navigation bar?

3. Where do you see all of your subscriptions?

4. You want to unsubscribe from Netflix because you don’t use it these days. How do you do?

5. 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?

Takeaways

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.

5-2. Usability test for the high-fidelity prototype

I recruited 5 people to conduct the remote usability test.

Takeaways

4-3. Updated high-fidelity prototype

I updated the prototype based on the feedback I collected in the usability test.

What's next?

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.

Lessons Learned

• 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.