sydney tong.
A concept to generate a custom playlist based on users music taste and recently Shazammed songs in order to bring users back to the app after the initial use.
My Role
Research, Design, PrototypeTimeline
March `21 - June `21Platform
AppTools
XD, Sketch, ProcreateOverview
Shazam is a song discovery app that can listen and name any song within seconds. They cater to music lovers wanting to learn the songs in their area. Paired with lyrics and videos. This new feature in the Shazam app prompts users to create personalized playlists based on their discovered songs in the app.
The Problem
Creating custom playlists is time-consuming. Users wanted custom playlists that closely matched their taste in music while still exposing them to new artists and songs.
The Goal
Design a feature that assists users to create personalized playlists that are based on their newly discovered songs. Make it fun, interactive and easy.
Custom playlists to match the vibe.
Generated playlists that mirror the songs you discover using the Shazam discovery feature. Discover new music, artists that match what you’re currently listening to.
Personalized
Music you want to listen to are currently listening to with the option to choose more mainstream or indie artists.
Feature
A feature designed to help bring back current users to the app past the initial song discovery.
Automatic
Autogenerated to reduce the time searching for new music and more time listening to the beats you love.
Discovery
Find new music, songs and artists based on your current and past tastes.
Research
To further my understanding of the target users I analyzed reviews on the app, articles and online forums. I found articles based around issues surrounding the app. I read iTunes app reviews to gauge feedback from users and conducted interviews to learn more about users' music listening habits. I created empathy maps to understand the user's needs and wants.
Competitive Analysis + The GapUser InterviewsPersonasUser JourneyStoryboarding
Competitive Analysis + Finding the Gap
Competitive audits allowed us to see how other song identification apps introduced features that brought listeners back to the app. We saw that we could find success in generating playlists, an engaging UI, and introducing new music.
Sound Hound
Musixmatch
Spotify
Soundcloud
Interviews
It was especially important to talk about the last time a user used the Shazam app and what they did after learning the artist name and track name to a song. A primary user group identified through research was music lovers who liked to discover new artists and wanted to create playlists based off of the newly discovered artist.
Many people are familiar with the app and use it to learn new songs but seldom revisit the app after learning the name of a song.
Time
Many people don’t have the time to research new artists/songs, create custom playlists.Knowledge
It is difficult to find new related artists on current music apps.Version
Users want to be able to discover live, studio, remixed versions of songs.Effort
Creating a quality playlist requires effort.Personas based on interviews
Nasra travels several times a month and enjoys discovering new music from the area she's in.
Vera loves going to music festivals and wants to be able to capture music playlists from the concerts she's at.
Claudia wants to discover new music but it is time consuming to put together playlists.
Journey Map
User Journey map revealed a lot of oppourtunties to engage users and improve their experience. Through interviews and white paper research we were able to see how we wanted users to navigate through our site.
Storyboarding
Through storyboarding we fine-tuned the user flow and screens needed to help bring the idea to life.
Design
Drafting various iterations of each screen ensured that the elements that were necessary made it to the digital wireframe. The playlist page was crucial in the feature’s success.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
User interviews, online review consideration and usability testing decided a lot of the design decisions. People online are brutal with their criticism.
WireframesUsability studiesIterationsApp hi-fidelity prototypes
Sketching for efficient flows and visualizations
After ideating and drafting paper wireframes, I created the initial digital designs for the playlist feature. These designs focused on delivering personalized playlists automatically to users after they had used Shazam to discover a song.
Digital Wireframes & Flows
Paper wireframes helped to guide flows, layouts and features needed to create a site that helped users discover new music based off of the song they most recently “Shazamed”. Based on various feedback from peers, I continually iterated my design over the span of 8 weeks- with 3 major improvements: flow clarity and organization, automatic generation and new artists.
Multiple rounds of usability testing helped us discover which components, flows and interactions needed more clarity.
1
Flow
User flow and intentions needed to be made more obvious2
Settings
Settings options for the app was confusing and needed clarity3
CTA
Most users used the CTA to create a playlist and needed more hierarchy4
Button
More emphasis on the buttons to help them stand out ot users
Condense screens
Usability testing revealed that the upfront time cost was too much. Users wanted to create playlists quickly and change settings later. Usability helped to reduce the number of screens and steps to create a playlist.
Prototype v1Icons
Use of icons to make the navigations easier.
Voice Assistant
Access to voice assistant capabilities.
Colors
Color matched imagery to track to help users better group like categories
Screen Readers
Provided access to users who are vision impaired through alt text to images on screen readers.
Personal touches unique to your style
The final high-fidelity prototype presented cleaner user flows for creating a playlist without overwhelming the user. Features to discover new music were moved to the homescreen to allow users the option of exploration.
Takeaways
Impact
This feature helps users to discover new music and create playlists to suit their personal tastes. It also brings users back to the app to use for more purposes than the initial discovery. I feel validated because similar features were implemented in Apple Music after I finished the study.
What I learned
While designing the playlist feature, I learned that isolation of a single feature is so important to user testing. The usability tests were vital in keeping the details and focus on the main goal of helping users create personalized playlists. There is a lot of growing room for Shazam to implement features that will bring value to them and Apple.
Next Steps:
1
Usability Testing
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.2
Research Features
Research the other playlist creation features to see if they are viable and if users would find them useful.3
Consult
Consult with experts on the amount of song/artist data available to Shazam & Apple. How can this data be beneficial to our users?4
Refine
Refine interactions to improve user experience navigation, fill in the holes to the flow..
Previous Case StudyOakland Avenue.An Oakland restaurant guide to encourage citizens to connect and order from locally owned restaurants during the pandemic. Informed users of restaurant operating status and specials.
Next Case StudyPark City Insider.Park City Insider is an event website that caters to visitors and locals searching for events in Park City Utah.
Designing out of
San Diego, California.
San Diego, California.
I'm always open to hearing about new project ideas and possibilities for collaboration. If you have an idea that you'd like to bring to life or if you're in need of a passionate product designer to be part of your team, I'd love to have a conversation.
hello@sydneytong.com
510.338.7860©2024 sydney tong. All rights reserved.