Chime

Project: Chime

Role: UX Designer

UI/UX Case Study

Mobile music streaming app for Chime

Case Study Presentation

Project Overview

The Goal

The Problem

Design a website for Chime that allows users to easily stream music, download music, and share music with friends and family using a free subscription or a premium subscription.

Young people, students, and other music enthusiasts who wanted to listen, share and get music suggestions easily but are not willing to pay a huge amount for a subscription.

The Product

A music streaming app for Chime, which enables users to stream, download and share music.

My Role

Design Process

User Research
Persona
Problem Statement
User Journey Maps

Sitemap
Paper Wireframes
Digital Wireframes
Low-fidelity Prototype
Usability Studies

Mockups
High-fidelity Prototype
Accessibility

Takeaway
Next steps

Chime is a music streaming service that primarily allows users to be able to listen and download music easily within the website. Chime aims to provide free streaming of music, and free royalty-free songs to download and also offers a cheap premium subscription for ad-free listening. Chime targets customers mostly young people, students, and music enthusiasts who listen, share, and enjoy music on a daily.

Understanding the User

User Research

Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. The primary user group identified through research was students who listen to music while commuting or studying but are not willing to pay a huge amount of money for subscriptions.

This user group confirmed initial assumptions about Chime customers, but research also revealed that other features including recommendations, music collections, and sharing options are necessary for the designing and development of a music streaming service.

Pain Points

Subscription

Expensive subscription services

“ Music has been one of my stress relievers. I love discovering new music but I can’t afford to spend a lot on subscriptions since I’m still a student. ”

Name: Christine

Age: 20

Occupation: Student

Christine is a 20-year-old communication student who is living with her parents. Listening to and discovering new music has always been a habit of hers while studying or traveling to university. She loves sharing new and upcoming music with her friends. She is frustrated with expensive music streaming subscriptions and listening to dozens of ads just to listen to a song.

Sharing

Inefficient sharing of music through social media platforms

Recommendations

Need for a recommendation list

Features

Limited app features such as a discovery tab, offline access, sharing options, etc.

Persona

Problem Statement

Christine is a student who needs an inexpensive music streaming service that provides a good deal of features because it is hard for her to be able to pay a lot for a premium subscription.

User Journey Map

Goal: Needs a music streaming service that provides an inexpensive subscription for students to be able to discover, listen and download music flexibly and with no added interruptions.

Starting the Design

Sitemap

One of the most important factors in designing a website is navigation. Clear navigation and interface are essential to make users feel comfortable intuitively navigating through the website.

Paper Wireframes

Home Page

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a search feature, featured playlists, recommended song lists, navigation, a music player, and a footer to help users easily navigate the website.

Screen size variations

Because Chime customers access the site on a variety of devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.

Screen Size Variations

A responsive website is preferred at present and is essential in improving user experience. The digital wireframes are not only limited to a Desktop version but also to both tablet and mobile versions. The navigation, suggested playlists, songs, and footer are resized accordingly to each screen size.

Low-fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was searching for a song, picking the desired song in the results list, logging in for a free account, upgrading to a Chime+ account, and downloading a song.

View the

Chime low-fidelity prototype in XD

Usability Studies

Parameters

Study Type

Unmoderated usability study

Participants

5 participants

Location

Philippines, remote

Length

20-30 minutes

Findings

More Options

Voice Search

Shuffle Play

Users need a more option feature for each song or playlist

Users need a voice search option for easy searching

Users need a shuffle-play option to allow them to be able to play songs in a playlist randomly at their own expense

The final high-fidelity prototype presented cleaner user flows for searching for a song, selecting a song in the list of results, logging into an account, upgrading to a Chime+ account, playing and downloading a song, and finally sharing the song link with friends.

High-fidelity prototype

View Chime's

Provided a voice search feature in the easy search function for users who have mobility impairments to use.

Refining the Design

Mockups

Based on the insights from the usability study, I’ve added a see more button to each song panel to indicate the more option list. Some added options are "Add to queue", "Go to artist", "Go to album", "Add to playlist" and "Copy song link" for sharing.

Before usability study

Another added feature that was added was the voice search feature. This isn’t only an accessibility consideration, but it also is very helpful for users to search for their desired keywords easily.

Before usability study

After usability study

For users to be able to play songs in a playlist randomly, a shuffle play option is added. The playlist name, category, artist, number of songs, and playlist duration are also placed in such a way that the users would be able to find the details of each playlist properly.

Before usability study

After usability study

Key Mockups

Desktop version

Screen Size Variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users stream music from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

Tablet version

Mobile version

High-fidelity Prototype

Accessibility

Considerations

Used icons and labels to help make navigation easier.

Provided access to users who are visually impaired by adding alt text to images for screen readers.

Used detailed imagery for songs, playlists, and artist covers to help all users better understand the designs.

After usability study

Impact

What I learned

Our target users shared that the design was intuitive to navigate through, has an engaging visual design, and has a clear visual hierarchy.

One quote from peer feedback:

“

The overall look of the website is just pretty. The suggested song lists and curated playlists are really helpful especially if I had a hard time looking for new songs to listen to. Everything is easy to follow through.

”

Designing Chime was rewarding for me since I’m a music enthusiast myself. I learned more about some Adobe XD features and used some UI kits which were helpful in my designing process. I also realized how small details are still important in the overall user experience. Usability studies are very essential in knowing how the users would interact with the website and an additional usability study is still recommended subsequently.