Playhead

Playhead is a media app that features everything from music to podcasts and movies. Its target user base is young people 18-24 who are tech savvy, on a budget and frequently consume media. The main goal was to improve premium subscription sign ups.

Background

Discover

The first step on this project was writing a research plan. Explaining the background, the objective, the user and how and when you will complete your research. This helps to keep you on track. Having the research helps to understand the user your designing for.

Research Plan

Competitive Analysis

I chose to use competitive analysis for this project. I felt this method would help me understand best practices and common UI/UX patterns. I examined the big apps in this arena, Spotify, YouTube and Pandora.

Spotify

Good: They don’t bombard you with subscribing

Bad: The layout seems a little cluttered

Pandora

Good: UI is clean not overly complicated

Good: Easy to read and understand

YouTube

Good: Their choice of words is more enticing. They use “cancel anytime”

Good: Premium option is hidden in a sidebar menu

Research Synthesis

I then took the information I gathered from my competitive analysis and entered it in an affinity map. This allows me to see the similarities and differences between each app broken down by feature.

Design & Validate

User Flows

For this design I created three user flows. The first flow is the sign in or sign up flow. This helps to illustrate the steps a new or returning user would take when opening the app.

Legend

Sign In / Sign Up Flow

Primary Subscription Flow

Secondary Subscription Flow

The second user flow is two parts, a primary and a secondary flow. The primary flow shows how a user would deal with a subscription pop up. The secondary flow shows how a user would subscribe to premium if they were looking for it in the app.

Low Fidelity

I created my low fidelity designs using Figma. I could have sketched my designs. However I feel that using design software gives the user a better idea of what the app will look like when testing. I chose to focus solely on the music side of the app due to time constraints.

Sign In / Sign Up Flow

Primary Subscription Flow

Secondary Subscription Flow

Returning User Home Screen

High Fidelity Testing

In this round of testing I received similar results to the first round of testing. The users navigated through the flows fairly smoothly.

Sign Up Flow: The user was tasked with signing up. I found that everyone navigated this flow well. There were a few people who momentarily contemplated between sign in or sign up.

Subscription Flow: The user is tasked with navigating a subscription pop up on the media player screen. Each user chose to investigate the plan information. I prompted almost everyone to do so except for one user. The user still chose to investigate the plan however.

Subscription Flow 2: The user is tasked with finding premium information in another spot in the app. Some users took a second to find “account” others found it right away. On the account page they found the premium button with ease.

Customization Flow: Back on the home screen the user is told in this scenario they like country music and are asked for their next move. Everyone seemed to find the country tab with no issue. On the country music screen I told them they are interested in Brad Paisley, each user found Brad Paisley with no issue.

The users navigated most flows with ease. The difficulty seemed to come up when prompted to find information about premium another way. These results seemed to be 50/50. Some users found the “account” option with ease. Some contemplated. When it came to the customization flow people the order of operations to be easy. Ultimately the testing went well. However I am not sure most users are even interested in a “premium” account.

High Fidelity

My high fidelity screens closely resembled my wireframes. Early testing allowed me to move to high fidelity without many iterations I chose a dark theme approach because of its popularity and familiarity.

New User Sign Up flow

Primary Subscription Flow

Secondary Subscription Flow

Customization Flow

Testing and Findings

The user testing went fairly smooth sailing. I presented the participants with four different flows.

Sign Up Flow: The user was tasked with signing up. I found that everyone navigated this flow with no issues

Subscription Flow: The user is placed on the media player screen and met with a subscription pop up. The user is then prompted to investigate the pop up. Each person seemed to navigate through the plan information and billing without issue.

Subscription Flow 2: The user is placed on the home screen and asked to find another location for premium plan information. The results were mixed on this flow. Some users found the account option with ease, while others took a moment to find it. On the account page most users found the premium button with no issues.

Customization Flow: The user is placed on the home screen. I present them with a scenario that they are interested in country music. I ask what their next move would be. Each user chose the country music tab. I then prompt them to chose Brad Paisley when the screen asks for their favorite artists. They navigated through with no problems.

The user flows performed well in this round of user testing. I am happy with the way the users navigated the app. My high fidelity screens almost exactly mimic my wireframes. I did not have to make many changes between the two. The users seemed to understand how this type of app is supposed to work. They navigated fairly smoothly.


Conclusion

The Playhead media app set out to accomplish a set of goals. The app accomplished those goals and more. Even though the project was supposed to be for one age group and type of person. I found that people inside and outside of that group navigated the app with ease. This is because I took the time to evaluate how the industry standard apps operate, look and feel. Doing this allowed me to create an app that has features people are accustomed to.

The user chooses a song to play. A pop up appears. They choose to investigate by tapping “plan information”

The user is taken to the payment complete screen and upon tapping “exit” returns to the media player

The user chooses Sign Up

The user chooses Brad Paisley

The user is taken to the payment complete screen and upon tapping ”exit” returns to the home screen

The new home screen displays Brad Paisleys work

The user enters the required
information and upon review
taps pay

The user chooses “Premium”
from the nav bar

The user decides to
choose the “individual” plan

The user enters the required
information and upon review
taps pay

The user filters by music and
chooses country.

The user decides to
choose the “individual” plan

The user enters info and taps
continue

The user is on the home screen