SpaceXM
A mobile-based media service that lets users stream music to their mobile devices with a free plan. Those who want to listen to high-quality music and have better features can do so after purchasing a premium subscription.
My Role
UX/UI Designer
Technology
a freemium model with a mobile-web experience
a mobile app for iOS and Android
Duration
April 2023
Tools
Figma
FgJam
Google Form
Zoom
UX Process
Five stages of the Design Thinking approach in Agile
Epathy
1
Define
2
Ideate
3
Prototype
4
5
Test
Background
The startup launched a media product two years ago, using a freemium model with both mobile and web experiences, including iOS and Android apps. Initially offering a free product to build a user base, they now aim to design an experience that encourages users to subscribe and pay a monthly fee for premium services.
Problem Space
The frustration of newly registered users upon subscribing to premium products
Empathy Phase
Objective
To understand why, who, when, people might be ‘unhappy’ in paying for the product, and possible motivation point.
Secondary Research
Secondary research entails delving into existing data pertinent to my product's problem. Here are key insights from the research on why newly registered users subscribe to premium products:
-
Ad-free listening experience
-
Background listening capability
-
Cost savings
-
Offline listening option
-
Community engagement
-
Family subscription benefits
These factors contribute to making premium subscriptions more convenient and enjoyable, reducing cognitive overload for users.
Competitor Analysis
After analyzing industry leaders YouTube Music, Spotify, and Pandora, here are the key findings:
-
YouTube Music offers over 40 million tracks, Pandora offers tens of millions, and Spotify provides around 50 million tracks.
-
Each platform offers various subscription packages like Student, Plus, Premium, and Family.
-
Pandora is prominent in the US, while Spotify and YouTube Music are popular internationally.
-
Pandora offers unique customized Station modes not found in Spotify or YouTube Music.
-
Spotify occasionally offers promotions like access to Hulu for an extra fee.
-
All three platforms allow users to create favorite playlists in paid services.
-
Offline listening is available in paid services for mobile devices on YouTube Music and Pandora, while Spotify allows offline listening on both mobile and desktop.
-
The subscription process on all three platforms may involve several steps, potentially causing user frustration.
Define Phase
Goal
Enable new users to subscribe to the premium product during the signup flow.
Persona
I crafted a user persona based on research data and an ideal application user, providing insights into their frustrations, personality, and goals. Here is an example of the persona:
HMW (How Might We)
How Might We convince John that premium products add value?
How Might We convince John that premium products are more enjoyable?
How Might We convince John that premium product is personalized?
Solution Statement
Design trigger that will bring John from free to premium products by showing enjoyable features.
Ideation Phase | Round 1
Low-Fidelity Wireframes
I designed low-fidelity wireframes for the Space XM mobile app, incorporating client needs, research insights, user persona, and the user flow for newly registered users. Here are examples of all the screens in the low-fidelity wireframes:
Wireflow
Here's a wireflow example with low-fidelity screens connected by arrows, illustrating John's journey as a new user to obtain a primary membership in the Space XM media services mobile app.
John, as a new user, goes through the sign-up process from screen 1 to screen 11, providing email, creating a password, and signing up. He then lands on the home screen (screen 12.1) with options for free music and premium content marked by a "crown" icon. Clicking "Go Premium" redirects John to a description of premium benefits and the option to start a 30-day trial (screens 14 to 20). The payment card details provided will be charged after the trial. On screen 21, John can view trial and payment information, cancel membership, and set a reminder. Clicking "Subscribe" on screen 22 confirms successful payment, redirecting John to the new home screen (screen 23.1) to enjoy Space XM's music library.
Testing Phase. Round 1
Usability Testing
I conducted usability testing with an interactive low-fidelity prototype involving 5 participants to assess feedback and validate usability. Tasks encompassed registering for the Space XM app, subscribing to the premium product, and inputting payment information for a 30-day free trial.
Findings
Usability testing revealed pain points, leading to adjustments in high-fidelity wireframes. Here's an example of the findings and changes made:
Screen 12.1. Findings
Screen 12.1. Changes
Finding 1. Confusion with the meaning of “Crown icon”.
Change 1. Incorporate a "Crown" icon alongside the "Go Premium" phrase within the button to signify to users that it initiates the subscription process for the premium product. This visual cue will enhance user recognition and understanding of the button's purpose.
Ideation Phase. Round 2
Style Guide
I aimed to maintain the company's bold, smart, and hip brand attributes while conveying elitism, warmth, and cheerfulness. To make the content stand out while keeping the design simple and fun, I chose a dark theme with engaging colors.
High-Fidelity Wireframes
Based on feedback from the first usability test, I refined my design and created a new prototype for a second round of testing with 5 participants. Using a UI kit for inspiration and efficiency, I developed a high-fidelity design guided by the Material Design system to ensure the dark theme met accessibility standards.
Here are the high-fidelity wireframes:
Testing Phase | Round 2
Usability Testing
I conducted a second round of usability testing with a new set of 5 participants using an interactive high-fidelity prototype to gather feedback and validate design solutions. The tasks for each participant remained consistent with the first round:
-
Sign up for Space XM media services mobile app.
-
Subscribe to the premium product.
-
Provide payment information for a 30-day free trial.
Findings
As a result of the second round of usability testing, I found several pain points based on which I made changes to the final high-fidelity screens. Here is an example of my findings and changes:
Screen 7. Findings
Screen 7. Changes
Finding 1. Test participants had the feeling that the location of the button “Go Premium” is too aggressive and the contrast of the button color is too light.
Change 1. Relocated the "Go Premium button" to the right top corner of the screen and made it a Ghost button.
Prototype Phase
Final High-Fidelity Screens
Here are the final screens and link to the interactive prototype of the Space XM media services mobile app.
Next step for the project
Given additional time on this project, I would integrate the following enhancements:
-
Expand registration options to include Google and other social media accounts for streamlined onboarding.
-
Incorporate a broader range of payment methods such as Google Pay, Apple Pay, PayPal, etc., offering users more flexibility and convenience.
-
Implement a verification flow during the payment process, ensuring security by sending a verification code to the user's phone for input into the application.
Conclusion
I gained insights into designing and motivating users to subscribe to premium products. Additionally, I discovered key considerations for users before making the decision to subscribe to premium services.