top of page
The Product (conceptual)
Trebify launched a media product two years ago. It is a freemium model
that has a mobile-web experience and a mobile app for iOS.
The company’s business strategy was to first build a user base by offering a free product and then evolve the feature set so they could monetize on a premium (paid) product.
At this point, the product has been well received and has a healthy user base of free users. They now need to design an experience that will allow users to subscribe and pay a monthly fee.
​
Business Goals
1. Create the opportunity for new users to subscribe to the premium product upon registration in the signup flow.
2. Create the opportunity for returning free users to become paid subscribers during the sign-in flow, as well as mid-use of the product.
The existing signup flow does not have a call to action upon registration that gives the user the opportunity to subscribe, nor are there calls to action throughout the free experience that gives the user the opportunity (or a compelling reason) to subscribe.
By creating a paid product with better features than the free experience and giving users the opportunity to upgrade to a better product, users will pay the subscription fee. This will lead to a profitable revenue stream.
Industry Leaders’ Subscription Flow Analyses
The top 3 music media companies whose subscription practices I chose to research are Spotify, YouTube, and Pandora. All three have been leaders in the field of media for over a decade. In this report, I will break down the UX and UI of each app as related to their subscription user flows, labeling the pros and cons of each approach.
Analyzing these three companies, I developed some key takeaways:
​
-
Keep onboarding short
-
Make upgrading an option in the app
-
Allow for information to be more fully viewable on the screen.
-
Keep upgrading unobtrusive
-
Do not irritate user with the presentation of the subscription opportunity as a repetitious pop up
-
List out the benefits of upgrading
-
Make upgrade possible in the app
-
Keep patterning consistent
-
Make sure the upgrade is visible so the user can engage with it.
User Flows
Based on the research of competitors’ subtscription flows, I developed two flow charts. One for current users of Trebify (A) and one for new users of Trebify (B). The goal was to keep the onboarding short, make visible and easily accessible the subscription process, and to keep the subscription process unobtrusive to the user.
Click to view
Click to view
Wireframing and First Round of Testing
Click to view
With the emphasis of the design to remain familiar yet delightful, I set out to build wireframes utilizing the UI positives from my competitor research. The wireframes allowed for an unobtrusive showing of the subscription opportunity while the user is engages with the heart of the app. The idea was to create a smooth experience for the user to be able to subscribe without interruption of their music-streaming experience.
Testing
User Background and Testing Purpose
5 people were selected to test the wireframes created for the music subscription project. All of the users were tested in person, testing both the ‘current user’ user flow, and the ‘new user’ user flow.
The usability testing was conducted in order to see how users interacted with the subscription process. I conducted the test looking for design flaws, and trying to understand how intuitive the subscription process was for users. Feedback for both the new user and current user flows from the testers were the same for the screens that overlapped in both flows.
Click to view
Main issues that arose from the app were as follows:
-
3 users struggled with the icons on the bottom of the screen not being labeled. They asked what they were for.
-
2 of them suggested the icons to be labeled.
-
2 of the users looking at the third screen wondered why there wasn’t an account image to tap on, and thought they needed access to the account on all major screens.All users found navigating the popup screen easy and intuitive.
-
4 of the five users, when asked what drew their eyes first on the screen, said that the pop up did.
-
All the users went to hover the cursor over the premium info pop up.
-
The first User stated that they “liked how the app didn’t interrupt the music listening”, in reference to the popup appearing there.
-
All users found issues with the back arrow on screens 5-8, and thought it seemed out of place.
-
The pros of subscribing were clear, users liked that they could upgrade to the premium mode as a month-long trial.
-
All users questioned the box on screen six, which was a design mistake made by me.
To Implement:
Overall, the users liked how the app was easy to navigate, and liked that the popup design was unobtrusive and did not interrupt the experience of listening to music. The suggestions to add the account image to other relevant screens, the removal of the box on screen 6, and the removal of the back buttons on screens 6-8 will all be implemented.
High Fidelity Screens, Prototyping & 2nd Round of Testing
Color Palette
The users for Trebify are of a younger crowd, and desire something splashy, and mildly ostentatious. I took this information and wanted to look for bold yet inviting colors. The following color scheme is what I settled on.
Typography
I chose Montserrat, as I was looking for something legible, rolling as well as suggesting ease. Montserrat has a warm, fun and legible quality to it.
High FIdelity Screens & Prototype– Second round of testing
Click to view
Crafting the HiFi design was a joyful process. The logo itself, done in the style of a vinyl record, and the waves of music with lines matching the grooves on a record player, this time symbolizing the treble cleft of sheet music, really pulled the use of color and art together for the brand.
Testing Round Two
Feedback from the 5 testers engaged in the second round of prototype testing yielded interesting results.
Users enjoyed the graphic design elements of the splash screen. No issues on understanding the layout or button usage were reported. This led me to alter the design of the front page, opting for continued usage of imagery affiliated with the buttons already there, but to allow each button to take up roughly 1/5th of the screen in a rounded-edge rectangle format.
1. All 5 testers for this round of testing found the prototype flows easy to navigate.
​
2. There was no visible confusion on any of the screens as to any of the icons or other elements located on the screens.
3. 4 of 5 users liked how the pop up grabbed their attention.
4. Testing this updated prototype with 5 new people, I received comments from 2 users that they really liked the homepage, and really liked the map screen.
5. 4 out of 5 users said they liked how visible and unobtrusive the flow to sign up for a premium account, and described it with words such as ‘enjoyable’ and ‘fun’.
The list of what they’d get as a premium user was clear for all 5 users, with the last few screens of the subscription process being very familiar with the users, all of whom had experience purchasing in-app products.
Users were immediately drawn to the popup on the screen which offered the premium trial.
Final Thoughts
Next Steps
If I were to continue developing this project, I would add further payment methods to make it even more accessible to users who do not want to use apple pay, as well as design for the constraints of Android.
bottom of page