top of page

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.

 

See prototype

Headphones and Space XM.png

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

5 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 encouraging 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:

Parsona John. Cap 2..png

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.

User Flow

User flow for newly register user of media services mobile app - Space XM

User Flow Space XM.png

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:

LF Wireframes - Space XM.png

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.

Space XM - LF Wireflow.png

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

F1R1.png

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.

F1R1 Changes.png

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.

Style Guide.png

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:

HF Wireframe.png

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:

  1. Sign up for Space XM media services mobile app.

  2. Subscribe to the premium product.

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

F1R2.png

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.

F1R2 Changes.png

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.

Final High Fidelity Screens.png

Next step for the project

Given additional time on this project, I would integrate the following enhancements:

  1. Expand registration options to include Google and other social media accounts for streamlined onboarding.

  2. Incorporate a broader range of payment methods such as Google Pay, Apple Pay, PayPal, etc., offering users more flexibility and convenience.

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

bottom of page