Feel the beat!

Project Scale: 4 weeks

Role: UI/UX Designer & Researcher

What is Upbeat?

The music application Upbeat, a free product, has been well received since it was launched by a startup company and has a healthy user base of free users.

THE CHALLENGE

The product, Upbeat, has a healthy user of free users.
The company wants users to monetize on a premium (paid) product by evolving new feature set.

TASK

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

TARGET

I aim to design an experience that will allow users to subscribe to the premium product and pay a monthly fee.

Why use Upbeat Premium?

Ad-Free Personalized Music

• Upbeat Premium provides having access to ad-free personalized music that enhances the overall listening experience by eliminating interruptions from ads, allowing for uninterrupted enjoyment of music.

• This creates a seamless and immersive environment for users to fully engage with their favourite songs and playlists.

unlimited offline listening

• Upbeat Premium provides unlimited offline listening that allows users to enjoy their favorite music even without an internet connection.

• This is particularly useful during travel and commutes. Users can download their preferred songs in advance and have them readily available offline.

one month free trial and more!

• Upbeat Premium provides a one-month free trial feature allowing users to explore the new features and services of the application without any financial commitment.

• This enables users to thoroughly evaluate whether the service aligns with their needs and expectations before making a purchasing decision.

My Project Plan

Heuristic review of competitors

• Conducting a heuristic review of competitors allowed me to gain valuable insights into the design practices of my competitors, helping me understand what worked well and what didn’t in my industry.

• By analysing their strengths and weaknesses, I identified areas for improvement and innovation in my own design.

PERSONA

• Mert is a student who has been a new user of music app “Upbeat”. He wants to explore the app which he has heard from his friends.

• I put myself in Mert’s shoes and stopped at every point in his journey to understand his feelings and create better design solutions for his experience.

  
  

User Flow

• As a designer, I considered all the ways user could navigate through my application to identify the essential path, so I created the user-flow, a visual representation of a specific route, that a user might take through my app to achieve a goal.

Sketches

• Sketching was a quick way to make my ideas tangible so that I could test and adjust them before I made digital versions of my designs. Sketching provided me with an intimate insight on how layouts would work.

Wireframes

• Wireframe is a visual representation of a user interface that could help me determine how elements would be placed on the page. It was a great way to map my product’s content. Moreover, wireframe offered the flexibility and room for innovation that comes with sketching an idea.

Moodboard

• I gathered a collage of imagery (mood-board), from various sources to represent the visual aesthetic I would like to incorporate into the UI of my product. The Mood-board provided a great inspiration when I made decisions about color, typography, imagery as I built the style guide for my product.

Text Script

• I decided to create a text script to test sketches aiming to get initial feedback on the designs I made.
  

Guerilla Usability Testing

I conducted in person test aiming to observe the user’s body language, gestures and nonverbal cues.

Findings

• After they had logged in to the application, four of the participants got confused about the screen that comes after the welcoming page. They didn’t understand what they were supposed to do. 

  For that particular screen, I plan to write brief information to easily navigate the users. 

• Three of the participants asked me about the purpose of smiling and sad faces. 
  A brief information should be provided for the users to make the purpose of the icons more obvious. 
  

Interactive Prototype

• I built an interactive prototype for the Upbeat application to conduct the final test with users.  

2nd Text Script

• I tested the interactive prototype aiming to get more feedback on the high fidelity designs I made.
  I conducted the second usability test in person aiming to observe the user’s body language, gestures and nonverbal cues.

2nd Usability Testing

Findings

• The idea of a short introduction video of the application was appreciated by the users because they had the opportunity to have a brief info about the app. The video screen doesn’t have a skip option for the previous users and it doesn’t have any call to action button to keep on. 
  

  On that particular screen, I plan to add a skip intro option for the previous users and a call to action button to easily navigate the users.

• When the users opened the home page of the app,  I observed that it took time for them to discover the premium plan icon.  
  

  The premium plan icon should have a bright color to be more eye-catching. Thanks to that eye-catching feature the users can easily notice the icon. One of the main purposes of the company is making the users subscribe to the premium plan, so the premium related buttons, icons and information should be noticeable.   

• When the users opened the home page there was no noticeable sign about the premium plan.
  

  There should be an advantageous information for the users to become a premium member.    

Final High Fidelity Design