Subby
Streamlining the sharing of recurring payments to combat subscription fatigue
ROLE
Lead UX Designer
DURATION
3 weeks
CATEGORY
Mobile application
Some background
Subscribers are utilizing their own make-shift systems for managing and sharing their subscriptions. Lacking clear pathways, users are led to confusion, awkward situations, which can breed disdain or mistrust.
This is where Subby comes in, to combat subscription fatigue. We understood that Subby’s goal is to allow users more access to subscriptions by safely and securely automating payments between subscribers and their friends. We felt the need to incorporate that value into every aspect of this project. Our mission was to aid Subby in implementing design solutions we found by synthesizing user research to arrive at the most user-friendly and trustworthy experience.
Analyze & Identify
Content analysis of current application
-
An option to hide the dollar amount of the recurring payment for privacy purposes
-
Add in icons for major subscriptions and the ability to upload an image for unique icons
-
Hide some details to reduce cognitive load; in this case the sharer icons
-
Address the user by their first and last name to add more of a friendly tone
-
Add excitement here to delightfully indicate that the user is saving money
-
This icon needs different wording; this is the current CTA button for adding a new subscription
Goal setting
We understood the need to convey warmth and friendliness while also maintaining a superior air of trustworthiness. Our research goals were to find out what users need in the realm of managing their subscriptions, what they currently do, what they are used to, what makes them comfortable sharing their financial info on other platforms, and what roadblocks they encounter.
This research will help to:
Identify pain points associated with sharing recurring payments
Uncover user mental models, emotions, behaviors
Inform the redesign of Subby’s UI
Inform specific key task flows
We conducted 7 user interviews and obtained 3 survey submissions.
Key observations revealed key trends:
-
RELYING ON AUTO-PAY
“I don’t manage my subscriptions, just auto pay them.”
-
WANT TO BE ORGANIZED
“Having one place where I could manage my subscriptions and recurring payments would absolutely be beneficial and save time.”
-
TRADING PASSWORDS
“My subscriptions aren't split but I have Netflix and Amazon Prime, my girlfriend has Disney+ and HBO.”
-
FORGET TO CANCEL
“I have totally forgotten about a subscription — and I forgot which one it was…”
Synthesizing our data we were able to arrive at the following problem statement:
Subby needs a redesigned application with a consistent and polished UI where users can efficiently split payments for subscriptions and recurring payments and effortlessly keep track of them.
How might we study the competition to convey trustworthiness in Subby’s UI and user flows? What might users be expecting from Subby that they experience from using competitors/comparative platforms?
Personas
-
Sam Sharer
Goals
Have access to more subscriptions. Limit expenses.
Payment habits
“Set it and forget it.” Relies on auto-pay and reviewing monthly statements.
Pain points
Hard to remember what he’s signed up for. Signs up for free trials and forgets to cancel. Awkward to remind friends to pay for subscriptions. Difficult to remember who owes what.
-
Olivia Organizer
Goals
Wants to automate splitting subscription costs. Stay organized
Payment habits
Uses Auto-pay. Receives notifications when auto-payments go through
Pain points
Feels guilty when she forgets to use a subscription. Doesn’t want to have to remember to pay friends every few weeks. It’s time consuming to keep subscriptions organized.
Ideate and Iterate
We conducted design studios for each screen sequence below to arrive at many possible solutions. To solve the problems at hand, no ideas were going to be overlooked. We took the time to sketch and speak to our design solutions and how we envisioned them to be implemented. The screens below show what we arrived at and how we changed them after rounds of user testing.
Onboarding
During our initial user tests, some participants were still confused about Subby’s purpose. We decided to add in some brief onboarding that included tooltips to disambiguate new users.
Homepage
We arrived at adding a prominent notification center on the homepage so users would be privy to important information. Invitations to become a sharer on a friend’s subscription as well as funding notifications are the top examples used here. No one needs to go hunting within the app to discover they actually had dozens of dollars waiting to be funneled into their bank account. We needed to create some excitement around the savings feature so we implemented a simple tap event that would open up an additional pill of information explaining how the savings were calculated. We had other ideas such as a stack of coins, garish bar graphs, and animations however we arrived at the conclusion that those would not necessarily convey the level of trustworthiness that Subby requires.
Friends page
For the friends page we saw the need to include friends’ activity to increase a warm social feeling. Some activities would include new subscriptions, both purchased and shared, and new connections made between friends. Our first iteration laid out activity instances below the user’s list of friends. Some user test participants made comments about its cluttered feeling so we decided to move the activity notes to a discrete tab.
Adding a new ‘subby’
As mentioned before, we needed to change the verbiage for adding a new recurring payment, or subby. We all decided that creating a button on the navigation bar was the most intuitive way to facilitate the addition of a new subby and our user tests proved that. All participants did not even hesitate when prompted to add a new subby of their own. In the first iteration we had incorporated adding a payment method but It was brought to our attention that there is really no need for that — subby itself is not integrated with these third party platforms. That shifted our focus on something users found more important which was the option of being reminded that a payment was about to drop.
Accepting an invite to a ‘subby’
We added labeling to the notification center on the homepage where invites would pop up. The accept button immediately adds the user to that subby followed by a pop up confirmation, affirming that the invite was just accepted and they have been added to that subby. There is also a link to go on and view that subby in more detail.
Discovery section
We discovered that users were a bit confused with no information on this page — by clicking the magnifying glass icon in the bottom navigation, some expected to find their friends listed there, or be able to search for them. We added succinct information in our next iterations and upon out last round of tests were able to introduce an actual subscription info page. Since adoption is a key goal here, we utilized a CTA button encouraging users to show this new subscription to a friend and get their thoughts on it before actually inviting them to subscribe.
Accessibility audit
Subby's branding color guidelines
As we conducted our 7 usability tests with rapid iterations in between, we were able to continuously arrive at a better prototype for each test, resulting in lower task completion times and virtually eliminated errors. An issue that arose in the final tests was contrast: a user was experiencing difficulty reading the lighter text on the white background. At first this was in relation to the lighter grey portions however we hadn’t even considered that the beautiful ‘tiffany blue’ color would be an issue as well. We decided an accessibility audit was in order so we ran the colors through the Web Content Accessibility Guideline’s (WCAG) contrast checker and discovered some bad news. This was a failure for accessibility discovered so late in the process. Thank goodness it was quite the simple fix for our prototype in Figma.
The main highlight color fails the WCAG contrast test
The darkest color was able to pass AAA standards
Hi-Fi Walkthrough
Next steps
-
More reminder customizations
When setting up reminders on new subbys, it occurred to us that more options should be readily available. Do they want push notifications only? Perhaps they prefer only an email. Would a text message be helpful? Supplying the user with more customizations on how they receive their reminders will allow them to be more on top of their subbys.
-
Add progression for onboarding, sign up
Displaying how many tool-tip cards are in the onboarding process will better inform the user on the amount of time they can expect to spend on quickly educating themselves to use the app. They can make an informed decision on whether to skip the process altogether or sit through the entire messaging sequence.
-
Llama illustrations, e.g. on confirmation popups
In the very early stages, the Subby team employed a delightful llama illustration as their logo and mascot. As a nod to how far this app has come, re-incorporating that llama as a guide for the user would interject delight and comfort and done correctly would not take away from the app’s overall sense of trustworthiness.
-
New features
I could speak endlessly on adding new features, but let’s not get featuritis. Some prominent additions that our users spoke to were adding a calendar that displays upcoming payments, the ability to add notes when sending invites, badges for sharers who always pay on time, and the functionality to locate friends who already own a subscription the user would like to join.