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