Subscription Manager App (Mobile iOS)
5 week PROJECT
Company X (fictitious) has a desktop-only website that keeps track of online subscriptions.
They want to improve their conversion rate by redesigning the product for a mobile market. My job was to improve upon the existing framework and create a new brand and UI for the mobile product.
The company has set a goal of collectively saving customers $1M over the course of one year by helping them manage their subscription spending. They plan to launch the app in both US and German markets
SubTrackr is an iOS mobile app that operates as an all-in-one subscription management tool and allows users to link their subscription accounts directly to the app. This enables users to upgrade or downgrade their subscriptions plans, analyze expenditures, and track renewals from one dashboard for a small monthly fee.
This was a student project that was part of the curriculum for Springboard’s UX/UI bootcamp. The goal of the project was to become adept working within business goals and to learn how to independently make strategic and intentional decisions under constraints. I was given a case scenario and had 90 hours to complete the assignment.
My role was to develop and execute a UX plan to research, design, and validate a mobile app version of the website. I was also responsible for developing its brand identity and determining how the platform would be monetized.
The Springboard capstone project outline did not include a persona to work from, but did provide target demographics and user stories to help me define the audience.
Users find it difficult to track all of the products and services that they subscribe to each month and tend to lose money to forgotten or unwanted subscriptions.
Company X’s target audience are middle class men and women over the age of 30 who are budget-conscious and use both phone and desktop devices.
Their major pain points are:
Since I was working solo and under time constraints, I decided that this information was adequate enough to work from and that developing a persona was unnecessary. Also, I am redesigning an existing project so I worked off of the assumption that the company’s current website is performing well for their intended audience since I did not have any analytics or access to stakeholders for additional input.
As part of the assignment, I was given three industry leaders to study for the purposes of understanding how well they are accomplishing similar business goals. These companies were Truebill, Trim, and TrackMySubs. I focused on studying how they presented an overview of subscription spending since this was a major user pain point. I jotted down features that I liked and disliked to gain inspiration for my app.
One of the biggest takeaways was that two of the apps (Mint and Truebill) are complete financial managers so they import all financial information and then sort out what they think are subscriptions. Bobby was the only app of the three that solely focused on subscription management but it relies on manual account input.
I noticed that the apps that import account information are directly linked to banking institutions, not the actual subscription accounts.
Initially, I wondered if it might be more beneficial to the user to design an app that manages all their financial information, like Truebill and Mint. However, when testing out these apps for myself, I felt overwhelmed with the amount of information contained within the app and decided that following this format was unnecessary and would just risk scope creep.
I decided to shoot for developing a better subscriptions manager by providing an import option to link to existing accounts, rather than just the financial transactions. This way, the app would really serve the audience as an all-in-one manager where the user could change individual account plans and even cancel the accounts all from one source.
This exercise helped me become acquainted with subscription management dashboards and I learned that the ability to link accounts vs. manually add them is an important feature disparity across platforms. However, Truebill was the only product that had a mobile app version so I felt I needed to dig further to learn more about specific iOS features.
view studyI searched the App Store to identify the highest rated Subscription Manager apps and read through their reviews to uncover some user pain points and delights. The top three were Truebill, Bobby, and Mint. I downloaded each and performed a competitive benchmark analysis to explore how well they supported the user stories and other notable features.
The user pain points highlighted three main categories: account management, reporting, and notifications so this became the framework of the app:
Task flows helped me focus on the goals that the user would need to achieve from each category and break them down into action steps so I could formulate my red routes.
Within account management, adding an account and viewing it are the two major actions that a user might take so I narrowed my focus on how they might go about adding an account and what information should be included within those account pages. I also set up user flows for cancelling an account and setting up notifications.
One of the features I really liked about Truebill was the ability to automate or manually add or cancel accounts so I built this idea into the user flows.
However, I struggled to understand why both would be necessary. I decided that testing would help me validate whether or not I needed both options.
I created my wireframes so that I could test them on my personal device (iPhone SE) and used Apple iOS UI patterns to frame out the design to align with common user mental models.
One of the challenges for this assignment was to consider how the app would help the company make money so during this stage, I also thought about how monetization should be incorporated in the wireflows.
I decided to use a 7-day free trial format that captures account and financial information during the onboarding process. I wondered if this would turn users away from wanting to use the app.
I tested five participants between the ages of 35-45 and had them perform a series of tasks on the prototype on my iPhone. Prior to the testing session, I asked each participant to tell me about the companies they subscribe to and to describe a negative experience they had in forgetting to cancel a subscription. I did this to gain more evaluative information about the user to ensure I was on the right track.
Testing validated my monetization plan. A 7-Day Free Trial is perceived as standard and was well received by all five of my test participants.
I also validated the issue that came up in creating my user flows. Are automatic and manual options both necessary? How might the manual options be used in a real-life scenario? My test participants saw value in having both and provided me with answers to the second question. For example, a user might opt to manually add an account whose source does not have an online account to link to such as a local gym membership. A user might also opt to manually cancel his or her account in case they wish to try to negotiate a better offering before deciding to cancel.
My most critical issue from Round 1 testing resulted from an edge case I designed for my account link wireflows.
A user is given the choice to either automatically link to their online subscription account or manually add one. In the first option, when the user types in the name of the account they want to link to, the search produces automated results to select from. For my edge case, I had to consider what would happen if the user mistyped a name or the autofinder couldn’t return a result so I created another flow with the option to manually enter a URL to link to in case of an error. This would be activated by an “Add” button or link.
I comped in a button with an icon to “Add ‘Name’” and it competed with the hierarchy of the search field since the link was the default blue color so some of the test participants clicked on it thinking it was the primary action they needed to take after entering the search term when I expected them to click on the auto-populated search return (i.e. Netflix).
I added an extra screen that would activate if the search does not return a result with instructions to search by URL.
The brand personality specs were defined as a “trusted friend who is helping you save money” so I decided to call the product SubTrackr. A “tracker” can be defined as someone who is following clues to look for something (financial savings) or someone who is keeping a record of something (subscriptions). SubTrackr is also a condensed version of two words: “subscriptions” “tracker” which describes its overall purpose.
I chose Raleway Bold Italic for the logotype because it offered a lot of contrast and the roundness and slant of the letters conveyed a friendly, casual tone. I also liked the unique characteristics in the lowercase “k” and felt that it strengthened the mood of the wordmark.
To align with the brand attributes (trustworthy, caring, friendly, casual), I chose a color palette of blues, grays and greenish yellows. Blues and greens are popular choices for financial institutions so I selected a muted, deep navy blue as the primary color then brought forward a brighter, more cheerful lime green as my secondary color to break up the seriousness with a carefree, fun pop of color. I used contrast checkers to help guide my color combination choices to comply with accessibility standards.
I chose illustrations for the onboarding screens to play upon the friendly, casual attributes and brought forth some of those green tones since I used a lot of blue in the splash screen.
When choosing my icon set, I wanted to carry through the drawing style, but decided that thicker line weights and solid elements balanced the overall appearance and made it easier to navigate. I opted to make the icon for the subscriptions page the most prominent in the bottom menus by enclosing it with a circle and making it larger so it stands out as the home screen.
Originally, I wanted to use the Raleway font throughout my design but decided that SF Pro worked better because it was more flexible in terms of legibility when using a mix of styles. With blue as the dominant color, I relied heavily on text weight, size, and color shades to differentiate headings and text links.
Since there was a lot of monochrome working within the foundation of the design, I thought it was important for brand icons to be included with all account information and to color code spending category assignments to help users visually sort through information.
Overall, the second round of testing did not reveal any critical issues nor was the feedback unanimous. The participants identified some minor issues with labeling and a few user flow errors so I incorporated about 90% of the feedback into my iterations since they made sense from a heuristic point of view.
I didn’t add the login pages to the account that I wanted the user to link to so it created confusion when they were asked to confirm their account info, but hadn’t even logged into anything
I screenshot the login screens for Netflix and added them to the prototype.
When a user adds an account manually, it limits what notifications they can receive because the app is not importing data from an external source. Some users felt that when they add something manually, it gives them more control; however, in this situation, it limits the information they can access through the app.
First, I decided to change the “Start Bill Date” input field to “Bill Day” so that we could define the data for the auto renewals. Since that is the only alert we could really assign for a manually loaded account, I added a notifications switch list item and labeled it to specify that it only alerts when there is a renewal. I also added some text and a text link to allow a user to upgrade by linking their account to access more information.
To start the free trial, the app takes you through three onboarding screens that explain the function of the app. Each screen includes a button to bypass the onboarding screens. However, the label has the same content as the first screen. This was confusing to one of the test participants since she already technically activated the free trial in the first screen.
I replaced the buttons with a “Skip” text link and renamed the button on the last screen “Create Account” to improve the familiarity of that user flow and establish a better sense of expectation through progression of the onboarding experience.
In the cancel account user flow, one of the users was concerned about the immediacy of the action and asked if she could set the date that she wanted the account to close. This problem surfaced with a couple of testers in Round 1 so I thought it was important to revisit.
I resolved this by adding an additional screen with an iOS alert that asks if you want to set a cancellation date. If the user were to choose “Set Date,” it would open a new page with a calendar picker so that the user could choose their date.
On the notifications page, I had designed a tab menu with different types of alerts that a user might want to access: Renewals, Offers, Trials, and Advice. Some of the users felt that they would only access renewals and expected to see what was upcoming for the month.
I resolved this by eliminating the tab menu and adding the options to the dropdown filter instead. I replaced the header with the month and year so that the user would have a time reference for the alerts.
The goal for this assignment was to help a business increase their market share by developing a mobile app for their existing web product.
Competitive benchmark analysis helped me identify an opportunity to directly link subscriptions accounts to the app rather than pull in data from financial information.
This resulted in an all-in-one product solution that offers the value of convenience through consolidation.
Other key product features include:
This assignment taught me how to balance the interests of the user and the client while working within the parameters of project specifications. It also taught me how to decide which tools and processes to apply within the time constraints.
Testing validated the strength of some of my bigger design decisions while also teaching me to sweat the small stuff. Although the feedback was varied, I found that applying many small tweaks and changes had a big impact upon the final deliverable.
