RACHEL GARNER

Wave Overview

Problem

A startup company launched a media product two years ago on a freemium model that currently has a large base of free users. They now need to find a way to offer a version of the product that users will pay for monthly. The original sign up flow did not have a call to action during onboarding for new users, nor did it have calls to action throughout the app experience that would give users the opportunity or motivation to subscribe.

Role

UX Designer

Tools

Figma

Timeline

Dec '21 - Mar '22

Photoshop

Design Process

Empathize & Define

Ideate

Prototype

Validate

01. Empathize & Define

Target Users

18-24 years old
Very tech savvy and frequent mobile users
Very budget conscious
Music is a very important part of their lives

Secondary Research

I wanted to take a detailed look at what factors were the most important to my potential users. While conducting my research,

I found that the majority of people were seeking the following features from a media streaming service:

A good value and low freemium to premium fit
- in order for a premium product to be successful, users need to know that they are getting it for a fair value, and that it is sIgnificantly better than the free version of the product.
Choices (with limitations)
- the best fit for one user may not be the best for all users. It’s ideal to give them a few options in special features or billing, but not so many that they are overwhelmed.
Ubiquity
- users are more likely to pay for a service if they are familiar with it since a recognizable brand is associated with increased trust and validity.
Discovery of new content
- it is important for the primary audience of music streaming apps to be continuously discovering new content. Therefore, the product should be good at identifying their preferences and suggesting new artists and songs frequently.

Multiple studies showed that a trial period that allows a user to experience premium features before they use the free version of a product has been consistently found to be more effective in getting users to pay for a premium service than the reverse scenario. This is most likely due in part to loss aversion, where the threat of loss is more powerful than the promise of gain.

Research Sources Link

Competitive Analysis

As part of my research, I conducted a competitor analysis of Spotify, Pandora, and YouTube to get a sense of what tactics industry leaders were using to promote their premium services. Although there were clear difference between what each one offered in their premium plans, skipping ads and downloading media were key features in all three. Spotify and Pandora shared a song skipping restriction in their free models that was lifted upon purchase of premium. For Pandora, creating a playlist or choosing listening order was a premium feature.

Each company gave their users options when choosing their premium plan, but they all organized their plans in slightly different ways.
Pandora had levels of premium, with a cheaper option with less features, and a more expensive full premium option.
Spotify constructed its plans based more on sharing with others with individual, family, duo, and student versions of premium.
YouTube premium only offered variety in its plans through billing structure, where paying yearly was more cost effective than paying monthly.

Some studies assert that YouTube Premium has had a much lower conversion rate than Spotify in part because they use their ad space for revenue instead of promoting their premium model. This hypothesis would also hold true for Pandora, which has a similar appeal to Spotify, but is not as popular as a paid service.

Goals

Create the opportunity for new users to subscribe to the premium product upon registration in the signup flow.
Create the opportunity for returning free users to become paid subscribers in the sign-in flow as well as within the product.

Hypothesis

By creating a paid product with significantly better features than the free version and giving users the opportunity to learn about the new product and upgrade, users will hopefully become motivated to purchase the premium version of the app.

This will allow the company to profit from the upgrades.

02. Ideate

User Flows

I wanted to create red routes that would allow me to the advertise the benefits of premium features to new and existing users. The first red route I made was the onboarding process, since users should get a nudge about signing up early on. I didn’t want to be too aggressive, so I made sure that the pop up was dismissible. Users could either click a link to learn more and sign up or ex out the notification and ignore it.

The next route I mapped out was signing up for a premium membership. To simplify, I started the user from the premium tab on the navigation bar. I decided the plan options would be Individual, Family, and Student, and that my prototype would follow the checkout process for Individual.

After that, I created flows for downloading a song and adding it to the user’s favorites so that I could advertise those features as part of premium and figure out where I wanted to place those notifications within the flow.

Low Fidelity Wireframes

With my red routes in place, I moved on to creating my low fidelity wireframes in Figma. Although at this point I wasn’t sure what I wanted the screens to look like with color, I felt like the wireframes gave me a firm sense of scale and helped me to visualize how much information needed to be displayed on each screen.

Branding

Brand Attributes: Bold, Smart, Hip
Brand Personality: Unique and diverse, but familiar

Moodboard

I started building my aesthetic design first by creating a quick mood board. I was most inspired by water and electricity when choosing images to pull from, particularly neon lights and jellyfish. I had originally intended to have three bold accent colors, but ended up dropping the bright turquoise for accessibility and contrast reasons. I thought these colors were bold and youthful, reminiscent of nightlife, self-expression, and excitement.

Style Guide

UI Kit

To save time, I used this UI Kit to create my media player pages. I was really drawn to the way that it incorporates the colors from the album art into the buttons so that the design feels fully immersive and never clashes with album art.

UI Kit Link

Key High Fidelity Screens

03. Prototype

Low Fidelity Interactive Prototype

Click for fullscreen!

High Fidelity Interactive Prototype

Click for fullscreen!

04. Validate

Low Fidelity Testing Feedback and Iterations

Solution

I replaced these with “confirm”, “learn more” and “dismiss” buttons to make it clearer to the user that action was needed.

Some users missed the “x” altogether and didn’t realize that they could easily dismiss premium notifications.

Problem

More calls to action were needed. In some screens, I only provided a link to continue to premium and an “x” to dismiss.

Problem

A few users said that they would like more clarity on the billing start date since the sign up process could get a little confusing with the free trial and promo share month stacked on top of each other.

Solution

To address this, I added a new screen with a purchase confirmation call to action that also displayed a message with the billing start date.

The start date was added to the terms and conditions as well. This also solved the issue of redundant screens in the checkout process addressed by some testers.

Problem

Choosing genres proved to be too vague to be helpful for most users, so I replaced that category with artists instead, and added a search function to look for any artist.

One user did not find the two questions about personal taste during the onboarding process helpful and said they would like to skip them.

Solution

I replaced the genre category with artists instead, and added

a search function to look for any artist.

I added skip buttons to the top and bottom of these screens.

I also added a “continue” button that lit up once a user had made at least one selection to make the process more intuitive.

Problem

About half of the testing participants did not go to the media player screen when asked to download or favorite a song, and instead wanted to do it from the search results page.

Solution

I added an ellipses next to each search result that would display all the same functions that would be available in the media player.

Problem

Multiple users suggested adding more sharing options to the promo code.

Solution

I added SMS, email, and airdrop to make sharing the link easier.

One major change in the function of the app was that I dropped the exclusively premium status of playlists and favorites. A couple of users said that that would be annoyed enough by that distinction that they would consider deleting the app. This also brought up an interesting point about Spotify vs Pandora. While both require a premium subscription to skip songs, only Pandora requires premium to create and save playlists, which could be a strong contributor to Spotify’s upper hand in popularity.

Other changes were a little more minor. In order to combat confusion about the free membership and trial period, I changed the language from “current plan” to “basic plan”. This was at the suggestion of a user who felt that the version of the app they were experiencing was unclear.. Overall, there was too much text on the premium info page and checkout process, so I tried to cut back on the wording where I could. I also rearranged the navigation bar to put search and home in more traditional placements.

High Fidelity Testing

Overall, I found this round of usability testing to go smoothly, but there were still a few changes that needed to improve the design.

Problem

One user mentioned that the bullet points on the premium info page were difficult to read and suggested moving them to be center aligned

Solution

I took their advice and re-aligned the bullet points.

Solution

In the iterated design, I aded “add to favorites” to the drop down menu.

I added a download icon to the main screen of the media player.

Problem

When looking for the favorites function, it was a pretty even split between users who immediately noticed the favorites heart and users who looked under the drop down ellipses menu.

Many people looked for a download icon in the same area where the favorites heart is located

Problem

One user pointed out that he would like to have more social media sharing options like WhatsApp, Facebook, and Instagram for the share with friends

Solution

I added more options for sharing with the promo code.

In addition to these changes, I also removed few exclaimation points throughout the app due to the feedback of one user who felt they were being screamed at.

There was also one critique that I did not accommodate, because it would have required a complete re-design. One user did not like that the free trial was not optional, and said they prefer to be able to choose whether or not to participate in a free trial. This was a really interesting lesson in the potential conflict between user interests and business interests for me. The imposed free trial made this user feel they lacked control, but my research strongly suggested that free trials were associated with a significantly higher premium conversion rate. In this case, I felt I had to consider the user's feedback but ultimately move on without implementing changes to accomadate it.

Final Thoughts

Aside from a few issues that were addressed in the iterated prototype, the final round of usability testing went smoothly and I am overall happy with how this product came out. I think that it fulfills the company’s goals of giving existing and new users motivation and opportunity to sign up for a premium membership. Wave is definitely far from perfect, but I think it does it’ job effectively. It was interesting to see how user desires could conflict with a company’s agenda, and to try to strike the balance between the two.

Back to Work