
CHIME
Project: Chime
Role: UX Designer
UI/UX Case Study
Mobile music streaming app for Chime


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
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.
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.
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Going Forward
Takeaways
Next Steps
Style Guide
Logo




Colors


Type


Buttons





