top of page
SubClarityThumbnail.png

SubClarity

SubClarity is a fictional product that allows users to have greater awareness and ease with their monthly subscription spending. In addition, it helps users plan for upcoming expenses and cancel those they no longer need.

My Role

Tools

Timeline

Figma, Miro

UX/UI Designer

4 weeks

The Challenge

SubClarity is a desktop-only product that is not mobile-friendly and needs a mobile version to expand its market share.

The Outcome

I translated the current core features of the desktop web app into the MVP iOS mobile app, considering mobile interaction patterns and the competitive landscape.

Final Outcome GIF

Competitive Analysis

SubClarity would be launching in the mobile space after existing as a desktop-only product, so I started by conducting a feature and heuristic competitive analysis on the top 3 iOS apps with similar solutions. This analysis allowed me to:

01.

Verify the need for a native mobile app rather than making the current web app responsive on mobile.

02.

Identify the core feature list to be competitive in the marketplace.

03.

Highlight areas for design improvements to create a stronger user experience.

Competitive Analysis Matrix

User Flow

The core user flows for the SubClarity mobile MVP were based upon three user stories (provided as part of the design challenge) that defined the key user needs.

01.

As a user, I want to see all of my subscriptions in one place to get a comprehensive view of my spending on subscriptions.

Add Subscriptions Flow

02.

As a user, I want to be notified if any of my subscriptions are about to be auto-renewed so that I can make a decision about if I want to continue spending money. 

03.

As a user, I want to unsubscribe from a subscription so that I can reduce needless spending.

Notify and Cancel Flow

Wireframes

With the completed user research and information architecture, I created a low-fidelity prototype of SubClarity's native mobile app in Figma. At this stage, my focus was on creating a simple representation of the user flows to conduct usability testing.

Wireframes

Casual and Trustworthy 

Before diving into the high-fidelity designs, I created a lightweight style guide that would form the look and feel of the mobile app based on descriptive tones provided in the design brief.

SubClarity Style Guide

Research-Backed Iterations

To test the functionality of the low-fidelity prototype, I conducted 5 usability testing sessions and uncovered a few key areas for improvement. Below are a couple of those iterative improvements based on research insights.

Wireframe Iterations

Clarifying Add Subscription Options

Enhancing Sense of Security

High-Fidelity

I translated the findings from the usability tests and increased the fidelity of SubClarity's UI.

High Fidelity Designs

Interaction Design 

When prototyping in Figma, I enjoy taking extra care to design microinteractions that integrate motion and reflect state changes. Here are a few examples from our onboarding flow.

Launch Animation

Launch Animation

Scroll GIF

Realistic Scrolling

Success Animation

Success Lottie Animation

Segmented Control Slide GIF

Realistic Segmented Control Slide

Further Iterations

I conducted another round of user tests to uncover any remaining opportunities to improve the MVP. I discovered even greater nuance and insights that would inform another revision to the designs.

HiFi Iterations.png

Adding User Choice & Freedom

Coach Mark Guidance

Final Designs

If you'd like to explore more, here you can access SubClarity's interactive prototype. Tap on the prototype to launch the welcome screen!

Retrospective & Next Steps 

01.

I enjoyed evaluating the areas for opportunity in the market for this hypothetical subscription-tracking app. I have a background in sales, and I enjoy bringing that business knowledge into my design work.

02.

Given the 4-week time constraint, there wasn't the opportunity to explore certain features that would certainly be beneficial. If I had more time, I would prioritize researching and designing the reporting feature of SubClarity to further provide a comprehensive overview of spending.

03.

As next steps, I would recommend: 

  • First, collaborating with the engineering team to build the iOS app.

  • Second, run an initial beta release with power users to discover bugs or further improvement areas.

  • Finally, make any necessary improvements to the design and code.

  • Launch and then track key metrics to identify areas for continual improvement

bottom of page