New Users Interactive Prototype
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?
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
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
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
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
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
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.
User Flows
I focused on the 2 user flows that were most relevant to the business goals:
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
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
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
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
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.
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.
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
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.