SUBZEN

UX Design I Product Design | UX Research
Prototype
Duration
5 Weeks
Role
User Research, Designing User Flows and Wireframes, Prototype and Usability testing
Tools
Figma, FigJam

Project Overview

In today's world, it's easy to sign up for lots of subscriptions, like streaming or monthly memberships. But sometimes, we forget about them, and our money keeps going out for things we don't really need. This can be tough on our wallets and bank accounts. Some subscriptions renew automatically, making it even trickier to keep track. To address this, it's a good idea to regularly check our bank statements, set reminders for renewals, and think about whether we still need each subscription.

THE PROBLEM

Struggle While Managing Subscriptions

Users struggle to effectively manage their subscriptions and keep track of recurring expenses. They lack a simple and intuitive tool that specifically caters to subscription management. There is a need for a solution that provides clarity on costs, helps users stay organized, and empowers them to easily track and manage their subscriptions.

THE SOLUTION

A Centralized Hub For Managing Subscriptions

The solution to this problem is a platform that gives you control over your subscriptions, makes managing expenses easy, and helps you make better financial decisions. It provides timely reminders and allows you to cancel unwanted services with ease.  Users can live a peaceful life by saying goodbye to the stress of handling multiple subscriptions and enjoy a simpler, more organized financial life.

Company Objective

Currently, SUBZEN offers a desktop-only product that tracks subscriptions but is limited to serving customers in the United States. However, recognizing the need for expansion and capturing a wider audience, the company has strategically decided to develop a mobile-friendly app.

This app aims to enhance the user experience, attract more users and the company is also planning to facilitate the company’s growth in the German market. With this new venture, SUBZEN is set to bring its subscription management services to a broader audience and establish a stronger presence in the industry.

The Result  

I have successfully designed a mobile app that allows users to view and manage their subscriptions on a user-friendly and trustworthy platform.

       Track and manage subscriptions

  • Streamlined the process of automatically adding  subscriptions by connecting bank cards.
  • Provided users with a total count of subscriptions and spending details on the home page.
  • Implemented notifications to inform users about subscriptions due soon.

      Cancel unwanted subscriptions

  • Ensure users have a seamless and hassle-free experience when canceling a subscription.
  • Optimize for efficiency and user-friendliness.
  • Offer insights into subscription usage data to help users make informed decisions about whether to keep or cancel a subscription

        Give timely reminders

  • Keep users regularly informed about their recent subscription-related activities.
  • Advise them on spending through notifications.

UX Process

Discover

SECONDARY RESEARCH      ( VIEW LINK HERE)

For secondary research, I chose to conduct competitive analysis since there are already apps available in the market addressing this issue. I initiated the process by comparing industry-leading apps, specially Rocket Money, Subscription Stopper, and TrackMySubs. Throughout this analysis, I evaluated each app, noting both positive and negative aspects. I identified features I liked and those I didn't, and considered what elements I could incorporate into my own app.

POTENTIAL USERS

SCREENER SURVEY

In consideration of the company's target audience, I devised a screener survey and distributed it through various channels, including social media platforms, Slack, and personal networks. Subsequently, I recruited five participants for a 30-minute session conducted via Zoom.

COMPETITIVE USABILITY TESTING

To gain a deeper understanding of users, their needs, and pain points, I opted for competitive usability testing. Since there are already established apps in the market, I selected the Rocket Money app for evaluation. Users were assigned tasks such as creating an account, checking their list of subscriptions, and canceling subscriptions. In addition to task-oriented activities, I posed questions about their subscription management practices to gather valuable insights and understand their perspectives.

I asked questions focusing on three main metrics.

AFFINITY MAP     

Based on the information gathered from the interviews and testing results. I decided to create an Affinity Map. I generated codes from the insightful quotes and  grouped them into similar themes. After synthesizing all the data, I identified these key takeaways.

MAIN INSIGHT

PERSONA

I decided to create one persona to serve as a constant reminder of the user throughout the entire design process. This approach helped me understand the users goals, desires, frustrations, and motivations when it comes to managing subscriptions. This persona will aid me in ideating a solution created specifically for users.

HOW MIGHT WE?

After developing a better understanding of my users and analyzing their needs, it gave me two ‘How might we’ questions to create my solution designs. It also provided me with necessary MVP feature and nice-to-have features that I should include in my solution.

Design + Ideate

BRAINSTORMING

To visualize solutions that I synthesized and learned from the research process, I sketched my solution ideas. During brainstorming for my app design, I asked myself about user needs from research and the company’s objectives.

USER FLOW

Next, I created user flows to map out the steps users would need to take to achieve their goals in the app. User flow provide a high-level overview of the key interactions users have within SUBZEN app. I created 4 users flows i.e. Register Account, Subscription Cancellation, Add New Subscription and Notifications.

Register Account Flow

The Register Account user flow guides users through the seamless process of creating a SUBZEN account. It involves entering essential details, connecting financial account details, verifying information, and completing the process to access personalized subscription management features.

Subscription Cancellation User Flow

The Subscription Cancellation user flow facilitates a straightforward process for users to end their subscriptions. It includes selecting the subscription to cancel, logging in to subscription provider account and confirming the action, ensuring a hassle-free experience.

Add New Subscription Flow

The Add New Subscription user flow simplifies the process of incorporating a new subscription into SUBZEN. Users input details like subscription name, cost, and billing cycle, ensuring easy addition and management of subscriptions on the platform.

Notifications Flow

The Notifications user flow enables users to set up timely reminders for subscription renewals. Users can customize their notification preferences, choosing between push notifications, emails, or other channels, ensuring they stay informed and in control of their subscription-related activities within the SUBZEN app.

WIREFRAMES

Subsequently, due to time constraints, I initiated the design process. After sketching out my ideas in my notebook, I proceeded to create clickable high-fidelity wireframes. Utilizing the Figma tool, I found it easy to translate my low-fidelity designs into a more polished form. These wireframes encompassed all the design elements intended for the SUBZEN app, integrating insights gathered from end-user feedback during the research phase.

USABILITY TESTING

TESTING + IMPROVEMENT

Following that, I conducted testing on my low-fidelity designs. To ensure that participants aligned with the SUBZEN user base, I sent out a second screener survey. Subsequently, I crafted a user testing plan and guide, equipping myself with essential questions. I then selected and finalized five participants for a 30-minute user testing session conducted on Zoom.

I continuously iterated throughout my designs. After getting insights from users I made all necessary changes in  my designs. These tests helped me validate initial ideas and receive feedback early in the process.

Walkthrough screens

Problem

  • Not all users realized that there are additional walkthrough screens to understand the app.
  • Users perceived that the progress bar was meant for the account creation process.

Solution

  • To address this issue I removed ‘Create account’ CTA button on first screen and replaced with one ‘Next’ button and ‘Skip’ button. This solution aims to improve the user experience and reduce confusion.

Linked card details screen

Problem

  • When users arrived at the linked card screen, they found the heading confusing and expressed a need for more information to understand the content.
  • Some users were unaware that a checking card is synonymous with a debit card.

Solution

  • To enhance clarity, I modified the heading to 'Bank Cards' and included additional details about the linked cards. I provided guidance to users on how to add more cards.
  • Additionally, I incorporated the text 'Bank level security' to inform users about the security measures implemented in the app.

Subscription information screen

Problem

  • Users appreciated the feature that allows them to see the usage of the app. However, they had a question about how the app acquires data from services without requiring users to log in to those services.

Solution

  • To address this issue I decided to Include a subscription provider's login page before displaying the usage data.
  • Initially, I will ask the user for permission to access the usage data for their subscriptions. This feature will apply only to subscriptions used through digital devices.

DESIGN SYSTEM + STYLE GUIDE

Logo Design:

For the SUBZEN logo, I chose a sans-serif font. Sans-serif fonts provide easy readability and a straightforward design, contributing to a casual and modern aesthetic. The brand name SUBZEN is a fusion of 'Subscription' and 'Zen,' where 'Zen' embodies the concept of peace. Through the SUBZEN app, users discover a sense of tranquility in managing their subscriptions. For the SUBZEN brand, I selected the Fugaz One font to convey a casual and modern feel.

Color Palette and Style Guide:

In developing the style guide, careful consideration was given to color psychology and the overall theme of the brand. The primary color, 'Celtic Blue,' reflects loyalty, security, trustworthiness, and peacefulness. Additionally, accent colors such as Green, Light Coral, and Yellow were chosen to represent money, harmony, modesty, and happiness. Throughout the design process, inspiration was drawn from various apps, and different visual elements were experimented with to shape the overall aesthetic of the application.

Illustration Style:

Aligning with the brand attributes of trustworthiness, friendliness, and casualness, I opted for an illustration style that complements these qualities. The illustrations feature a palette of primary and accent colors, crafted to display friendliness. The style incorporates filled design elements and embraces curvy, natural lines, fostering a sense of casualness throughout the app. This approach aims to create a comfortable and approachable environment for users as they navigate and explore the application.

Tools Used:

All these illustrations were created using Figma, a versatile design tool that allowed for seamless integration of visual elements and the development of a cohesive and appealing design for the SUBZEN app.

HIGH FIDELITY DESIGNS

I crafted high-fidelity mockups for SUBZEN using Figma, bringing my design decisions to life. This phase marked a pivotal moment as SUBZEN took its closest form to the final product.

During the finalization of high-fidelity designs, I conducted a comprehensive accessibility audit. I meticulously adjusted colors to align with WEB AIM guidelines, ensuring an inclusive and user-friendly experience.

Usability Testing

TESTING + IMPROVEMENTS

3 major improvements in my design

Afterwards, I distributed a screener survey to recruit new participants for the conclusive usability test, focusing on high-fidelity designs. After selecting five participants, I conducted a 30-minute usability testing session. Participants were assigned tasks within the app to evaluate the resolution of previous issues and identify any new challenges.

This final usability testing round proved instrumental in revisiting and rectifying UX problems. In response to user feedback, I addressed and corrected several highlighted issues.

Some Minor Improvements

  • On walk through screen, The ‘Forward Arrow icon’ was replaced with the Word ‘Next’.
  • Created a single page for the ‘Know more’ option, which consolidated information onto one page.
  • Added a link to the plaid website for users to access more information about the brand.
  • An asterisk '*' was added to denote mandatory pages.
  • Included the current date on the home page to eliminate the need for users to check the calendar on another app

The Final Product

Learnings and Takeaways

Simplicity and Core Focus

Users like apps that are simple and focused on their main purpose.

Data Security and Privacy

Ensuring data security and privacy is crucial, particularly when dealing with sensitive information. Building trust through clear communication and transparency regarding data handling, encryption, and privacy policies is essential.

User Preferences Drive Design

I realized that the sooner we start testing, the better it is to avoid assuming user behaviors. Aligning design choices with user preferences and habits significantly enhances the overall user experience. Hence, user feedback plays a crucial role in enhancing the user experience. User comments or suggestions contributed to refining features and addressing pain points.

For Next time

  • As the company plans to expand the app services into the German market, I will conduct research on German market behavior and implement design changes accordingly.
  • I will make “the stats page” which will make the SUBZEN app more interesting.
  • Users expressed that they want an option to clear the unwanted messages on notification page, Which will be a valuable feature to explore and work on it.

Other Projects