Overview

Timeline

February 2021 (2 weeks)

My Role

Sole Product Designer (end-to-end)

Context

Conceptual project for Springboard Academy UX UI Program

Background

This project was a conceptual prompt provided by Springboard Academy as part of the UX UI curriculum. A startup company launched a free music app two years ago and has built a strong user base. They now need to offer a premium experience with an evolved feature set to convert free users and monetize their product.  

The Problem

How Might We introduce the Premium product to new and existing users of Fix Music App?

Fix Music, Mobile Music App

New Users Interactive Prototype

The Solution for New Users introduces the Premium product during the onboarding sequence and throughout the experience.

  • Premium Ad with comparison to Free product and free trial offer during the onboarding

  • Premium Trial CTA indefinitely on the free user’s Library screen 

  • Varied ad delivery/paywalls when pain points occur ex. during an ad or when clicking on a premium feature

Existing Users Interactive Prototype

The Solution for Existing Users communicates the Premium product at various moments throughout the experience.

  • Pop-up ad upon opening the app 

  • Premium Trial CTA indefinitely on the free user’s Library screen 

  • Varied ad delivery/paywalls when pain points occur ex. during an ad or when clicking on a premium feature

Process

You can skip ahead to different sections by clicking on the navigation below

Discovery
Fix Music, Mobile Music App

Competitive Analysis

Curious how industry leaders were solving this problem, I looked into Youtube, Spotify, and Pandora's Onboarding and In-App flows. I paid special attention to how they communicated the value of their premium product.

Full competitive analysis here

Fix Music, Mobile Music App

What Competitors Did Well

  • Varied ad delivery timed to address pain points - when clicking a premium feature/during an ad 

  • Premium trial button in the library screen

  • Pop-up ad upon opening the app 

  • Labeling the button with the value proposition

  • Comparison screens between Free and Premium product

Fix Music, Mobile Music App

My research guided the creation of this Persona

Secondary Research

To make more informed design decisions, I gathered psychographics on the target audience - Generation Z, cognitive principles to increase conversion, and current best practices regarding onboarding. I also investigated the competitor's reviews to see what existing user pain points were.

Read the full summary of my research here

Fix Music, Mobile Music App

Top Cognitive Principles I Leveraged

Wanting to understand the reasons why competitors' solutions worked well, I researched cognitive principles.

  • Fogg behavior model - delivering the user what they need when they are looking for it

  • Advanced Personalization - important to Gen Z who want experiences that are tailored and relevant to them

  • Social proof/collaboration - music, in particular, is a popular medium Gen Z uses to connect with each other and friends and family

  • Time To Value/Aha moment -The younger generations are notorious for their attention span so it's important to show them the value proposition asap

See summary for more details

Design

Ideating Solutions

I brainstormed solutions by writing out my ideas. With the business goals, the research I had gathered, and time constraints in mind I set out to design and validate these solutions.

Fix Music, Mobile Music App

User Flows

I focused on the 2 user flows that were most relevant to the business goals:

  1. A new skeptical user -Nathan just downloaded Fix on the app store and is logging in for the first time, he wants to see what the value is in this app and if it's worth keeping on his phone

  2. A returning user - Sara has been using the freemium version of Fix for a while and loves it but is getting annoyed at the ads, she wants to listen to her music uninterrupted

Fix Music, Mobile Music App

Wireframes 

From these two user flows, I drafted the first wireframes. I focused on information hierarchy and ensuring the CTAs were clear.

Test & Iterate

User Testing Round 1 

I made a prototype with the wireframes and conducted moderated usability tests with 5 participants using this script. After synthesizing my notes from the tests, I iterated the wireframes. The detailed notes from these tests are here.   

Objectives for Usability Tests 

  • Observe the discoverability of and reaction to the CTAs

  • Gauge reaction of introducing the premium product in the onboarding sequence

  • Uncover usability issues 

Fix Music, Mobile Music App

Key Findings

  • 100% of participants easily navigated tasks

  • 80% of participants were not surprised or annoyed that premium was offered during the onboarding flow  

  • Participants voiced that they are usually indefinitely signed into the app until they sign out and love that convenience, I took away the sign-in sequence from the returning user flow to reflect that 

  • Tooltips were unnecessary, users were familiar with this common app layout

Fix Music, Mobile Music App
Fix Music, Mobile Music App
Fix Music, Mobile Music App

User Testing Round 2

I took the high-fidelity mockups and made the New User Flow Prototype and the Returning User Flow Prototype. I tested these flows on 5 participants using the moderated usability testing method over video calls. The full script is here. I iterated the high-fidelity screens with the findings in mind. 

Objectives for Usability Tests 

  • Observe the discoverability of the CTAs

  • Gauge reaction of introducing premium product in the onboarding sequence

  • Uncover usability issues 

Key Findings & Iterations 

  • 100% of participants navigated tasks easily

  • New User Flow - 3 of 5 participants opted to try out the premium trial 

  • Returning Flow - 3 of 5 participants chose to try the premium trial 

  • 100% didn’t do the tour and wouldn’t for a simple music app 

The full findings notes are here.

Fix Music, Mobile Music App
Fix Music, Mobile Music App
Fix Music, Mobile Music App
Final Designs

Style Guide & High Fidelity Screens

I created a style guide to set a cohesive visual language for the product. I then turned the wireframes into high-fidelity mockups

Fix Music, Mobile Music App

The 3 screens below were the most effective in converting users to the Premium product:

“I think having this pop up at a time when it’s directly affecting me is way more impactful” 

- Usability Test Participant refers to the timing of the Premium Ad, just as a pain point occurs, as opposed to the pop-up ad when first opening the app.

Conclusion
Fix Music, Mobile Music App

For this project, my designs were able to achieve the goal of introducing a premium product to new and existing users through various delivery points.

Key Takeaways

  • Users won’t see what they’re not looking for

  • Users have an instinctive reaction to say no to ads 

  • If you make an action easy to do at the right time to address a pain point, a user will be more inclined to do it (Fogg Behavior Model)

As a digital designer, I also realized I can teach myself any technical ability - in this case, advanced prototyping skills (scrolling up and down and horizontally within the same screen for a more authentic usability testing experience). While working in this problem space, I observed that timing and user intent are both crucial factors to consider when solving a problem. Through completing this project, I have a better understanding of the nuances behind the placement of CTAs.