top of page

SubSmart

ROLE

UX Researcher & UI Designer

  • Process of researching and building upon app concept

  • User researching to gain insights and data to design the apps features and design

  • Prototyping and designing the app to create usability tests to gain additional research insights

DESCRIPTION

Subscription based services are becoming more and more common every year, from simple streaming platforms to software or mailed ‘boxes’. Managing all of these subscriptions can be difficult and people can often forget that they’re subscribed to some and end up paying for services they no longer need or use. Canceling subscriptions or knowing when some subscriptions renew can also be a struggle. Having a dashboard to manage all of these things in a single place is what the app hopes to accomplish. SubSmart is a service that allows users to manage all of their subscriptions and recurring payments all in one easy to access place. Currently, SubSmart has a website but is looking to expand into the mobile market with an app. This app is designed to be easier to access and use to reach a wider audience of users.  

Duration

6 Weeks

September - October 2023

Try Out The Figma Prototype Here!

View The Full UX Case Study Here!

SubSmart_edited.jpg

SubSmart Logo

Preparation

Before beginning the main phases of the project, I put together a style guide to help speed up the design process. I chose a color palette and the typography that would be used, along with some sample UI elements. After creating the style guide, I began looking for possible competitors and analyzing their platforms. After going through each of these competitors I compiled a list of likes/dislikes and what actions were taken to accomplish the similar goals across the three apps. Some of my main takeaways were allowing users to create custom subscription/payment notifications and providing clear information through visuals such as graphs.

Phase 1: Discovery

I focused my research on users subscription habits, types of subscriptions, and how the app could reach a larger demographic. I also looked into the various types of subscriptions, from streaming services to product boxes. I wanted to see if there was a correlation between the type of subscription and how easy it is to forget. While I could not find any information on this subject, it gave me good ideas on how some users may use this app outside of standard subscription services. During this research I sent out a survey to gain feedback on the main points of my findings and to gather participants for user interviews. Using all of my findings from both independent research and the user interviews I put together an affinity map and user persona to represent the ideal user for the platform.

View all low-fidelity files Here

Before designing the UI of the app, I created User Flows that would go through the three ‘Red Routes’ of the app. These were designed to show the various screens I would need to build to create a functional prototype. The three main ‘Red Routes’ chosen were as follows: Sign In/Create an account and link a bank account, Add a custom subscription listing, Access the calendar and view daily subscriptions. Knowing the main screens I would need, I began designing low fidelity wireframes to get a better idea of how things would be laid out. While these would be low fidelity, I still needed them to have enough detail for users to test them in a screen walkthrough for feedback.

Phase 2: Low-Fidelity

Phase 3: Validate

After creating all the necessary wireframes and putting them into a walk-through prototype, I reached out to five users who responded to the initial research survey to schedule usability testing interviews with them. Most of the feedback revolved around ease of use and adding features to improve readability and usability. For example, users suggested that having filter options on the Payments section would help users sort through all of their subscriptions and allow them to organize them better. Some other complaints were around the calendar and what parts of it could be interacted with.

View full validation files Here

Phase 4: High Fidelity

Taking the feedback from the low fidelity usability test and the style guide created beforehand, I designed high-fidelity mockups of all the screens needed. This included all the main screens in the red routes and any sub-screens or popup menus.  These screens were put together into a Figma prototype with various interactions that would be used for usability testing. 

View all high-fidelity files Here

Phase 5: Validate

With the first high fidelity prototype completed, I contacted five users to run usability tests on them. This test would be more in depth than the previous low fidelity prototype test. Users would be able to interact with more things in the design and they would be given more clear directions on what to do. Users would be directed to navigate through the app with three tasks. These tasks were as follows: create a new account and link a bank account, add a custom subscription, and view the subscriptions for a specific date. One of the most consistent pieces of feedback was around button/text sizing. Many users thought some buttons were too small and that some text could be too hard to read when viewed on a phone. This was especially apparent on the individual cable listings and the calendar view. Clicking on specific days when viewing the calendar could be difficult and the layout of the calendar was something some users did not like in general. Some users also had issues with the “tags” system for the subscriptions. 

View full validation files Here