Hub: a subscription management tool

Hub: a subscription management tool

Hub: a subscription management tool

the problem

Users who subscribe to multiple products or services often feel overwhelmed and frustrated by the complexities of managing their subscriptions across various platforms. It is challenging to keep track of renewal dates, payment methods, and the overall picture of financial impact. These challenges often lead to missed or unintentional payments, duplicate subscriptions, and financial strain for users.

solution

Hub links user's financial accounts through a mobile app where they can visualize their subscriptions, renewal dates and content management options in a personalized dashboard.

role

sole UX/UI designer from
end-to-end on research, analysis, visual and interaction design.

timeline

April 2024 -
May 2024

the problem

Users who subscribe to multiple products or services often feel overwhelmed and frustrated by the complexities of managing their subscriptions across various platforms. It is challenging to keep track of renewal dates, payment methods, and the overall picture of financial impact. These challenges often lead to missed or unintentional payments, duplicate subscriptions, and financial strain for users.

solution

Hub links user's financial accounts through a mobile app where they can visualize their subscriptions, renewal dates and content management options in a personalized dashboard.

role

sole UX/UI designer from end-to-end on research, analysis, and UI design.

timeline

April 2024 -
May 2024

solution

Hub links user's financial accounts through a mobile app where they can visualize their subscriptions, renewal dates and content management options in a personalized dashboard.

role

sole UX/UI designer from
end-to-end on research, analysis, visual and interaction design.

timeline

3 months

learn

To kick off the project, the intentions for the learning phase were to gather context and empathize with users to understand their subscription management habits, challenges and ways in which subscriptions contribute to their overall financial health and goal-setting.

Research Questions:


  • What challenges do users face when managing their subscriptions?

  • What current methods do people use for managing subscriptions?

  • Would easier subscription management encourage users to subscribe

    to more or less subscriptions?

  • What are the user motivations to subscribe to a product or service instead of purchasing directly?

learn

To kick off the project, the intentions for the learning phase were to gather context and empathize with users to understand their subscription management habits, challenges and ways in which subscriptions contribute to their overall financial health and goal-setting.

Research Questions:


  • What challenges do users face when managing their subscriptions?

  • What current methods do people use for managing subscriptions?

  • Would easier subscription management encourage users to subscribe

    to more or less subscriptions?

  • What are the user motivations to subscribe to a product or service instead of purchasing directly?

Research Questions:


  • What challenges do users face when managing their subscriptions?

  • What current methods do people use for managing subscriptions?

  • Would easier subscription management encourage users to subscribe

    to more or less subscriptions?

  • What are the user motivations to subscribe to a product or service instead of purchasing directly?

Competitive Analysis Findings

User Surveys:

Balancing time constraints and project resources, user surveys were selected as a discovery research method in order to better understand user subscription management habits, motivations and pain points.


Key survey findings could be grouped into 4 main content categories:


  • User Motivations

  • User Challenges

  • Existing Methods

  • Desired Product Features


> Actions:

  • Flexible subscription visibility formats for users

  • Subscription notifications

  • Ability to adjust subscription settings within the app

think

3 methods of research synthesis were applied that built a deeper understanding of the problem space and would be used to drive future design decision making:

  • Identifying common themes between varying user types through Affinity Mapping

  • Unifying the needs of users to inform actionable next steps

  • Defining project goals to drive next steps and develop a benchmark for future success

Common Themes gathered from User Survey Results

unifying the User Perspective in an Empathy Map

wrapping up the disovery phase

Using the How Might we framework of thinking, these questions established goals for the design phase of the project:


  • How might we create a more positive association between users and subscriptions?

  • How might we provide transparency for users about the subscriptions they are enrolled in?

  • How might we help remind users of upcoming subscription renewals or changes?

  • How might we help users understand their subscription habits?

  • How might we help users have more control when managing their subscriptions?

create

Starting with diagramming information architecture and building to a final high fidelity prototype, the level of design detail became further refined at each step of the process. Integrating feedback from user testing and applying an iterative approach to the design process was key in each step.

structuring the dashboard experience

user flows

sketching

wireframing: refining loosely sketched ideas in low fidelity


These mockups illustrate key screens in the user experience including:

  • Home dashboard

  • Subscription summary

  • List of subscriptions

  • Statistics

  • calendar

  • Notification settings within the profile management interface

wireframing: refining loosely sketched ideas in low fidelity


These mockups illustrate key screens in the user experience including:

  • Home dashboard

  • Subscription summary

  • List of subscriptions

  • Statistics

  • calendar

  • Notification settings within the profile management interface

wireframing: refining loosely sketched ideas in low fidelity


These mockups illustrate key screens in the user experience including:

  • Home dashboard

  • Subscription summary

  • List of subscriptions

  • Statistics

  • calendar

  • Notification settings within the profile management interface

To provide an organized dashboard that is quick to digest a large quantity of information, it was important to think about how much detail users would need to see at a given screen and what type of information would be most useful.

Dashboard Home: what subscription are coming up next?

  • Name

  • Renewal Date

Subscription List: what are all of my subscriptions and how much do they cost?

  • Name

  • Icon

  • Cost / renewal cycle

Subscription Details: what is all of the information included in this subscription and how can I edit these details?

  • Name

  • Icon

  • Cost

  • Category

  • 1st Bill Date

  • Cycle

Usability Testing: uncovering the issues

An initial round of usability testing was conducted early on in the design process with a Low-Fidelity mockup in Maze.

Users were prompted to complete the 3 key user flows through an interactive prototype.

The issues identified for users during the usability test were categorized into levels of severity in order to help prioritize development in the next design iteration.

dashboard content & atomic design

To provide an organized dashboard that is quick to digest a large quantity of information, it was important to think about how much detail users would need to see at a given screen and what type of information would be most useful.

Dashboard Home: what subscription are coming up next?

  • Name

  • Renewal Date

Subscription List: what are all of my subscriptions and how much do they cost?

  • Name

  • Icon

  • Cost / renewal cycle

Subscription Details: what is all of the information included in this subscription and how can I edit these details?

  • Name

  • Icon

  • Cost

  • Category

  • 1st Bill Date

  • Cycle

Usability Testing: uncovering the issues

An initial round of usability testing was conducted early on in the design process with a Low-Fidelity mockup in Maze.

Users were prompted to complete the 3 key user flows through an interactive prototype.

The issues identified for users during the usability test were categorized into levels of severity in order to help prioritize future design development.

Usability Testing: uncovering the issues

An initial round of usability testing was conducted early on in the design process with a Low-Fidelity mockup in Maze.

Users were prompted to complete the 3 key user flows through an interactive prototype.

The issues identified for users during the usability test were categorized into levels of severity in order to help prioritize development in the next design iteration.

critical issues uncovered in 1st round of usability testing

style guide

Implementing feedback in High Fidelity

After resolving issues from the Usability testing, I continued to develop the Hub interface in

2 iterations of High Fidelity wireframes. In this phase of design, I implemented the Style Guide established at the start of the High Fidelity phase, while iterating on and updating Style Guide elements as features developed.

While integrating feedback from the usability tests, it was important to keep in mind accessibility principles and the initial project goals that would support an intuitive and organized method for users to view and manage their subscriptions.

After resolving issues from the Usability testing, I continued to develop the Hub interface in

2 iterations of High Fidelity wireframes. In this phase of design, I implemented the Style Guide established at the start of the High Fidelity phase, while iterating on and updating Style Guide elements as features developed.

While integrating feedback from the usability tests, it was important to keep in mind accessibility principles and the initial project goals that would support an intuitive and organized method for users to view and manage their subscriptions.

After resolving issues from the Usability testing, I continued to develop the Hub interface in

2 iterations of High Fidelity wireframes. In this phase of design, I implemented the Style Guide established at the start of the High Fidelity phase, while iterating on and updating Style Guide elements as features developed.

While integrating feedback from the usability tests, it was important to keep in mind accessibility principles and the initial project goals that would support an intuitive and organized method for users to view and manage their subscriptions.

high fidelity user flows

sign up & log in

view all subscriptions in one place

set up a subscription notification

cancel a subscription

measuring impact

In the final round of Usability testing with a High Fidelity Prototype, users were asked some of the same questions from the initial discovery survey to measure the impact that the Hub app had on their likelihood to use the tool in the future, their perceived security of using the product and how the Hub features would affect their financial subscription habits.

Key Takeaways

  • Collaboration and gathering user feedback when working on a solo project can be challenging, but rewarding! User testing was critical during both the low fidelity and high fidelity stages of this project.

  • Simplicity is Key, particularly when designing for a financial product.

  • Familiarity with Atomic Design thinking was useful when designing a Dashboard scenario

let's make cool stuff together

let's make cool stuff together

Key Takeaways

  • Collaboration and gathering user feedback when working on a solo project can be challenging, but rewarding! User testing was critical during both the low fidelity and high fidelity stages of this project.

  • Simplicity is Key, particularly when designing for a financial product.

  • Familiarity with Atomic Design thinking was useful when designing a Dashboard scenario

let's make cool stuff together

let's make cool stuff together

let's make cool stuff together