Scroll ↓

SHAZAM! ⚡️🙅‍♂️

Concept redesign of the Shazam app

“Shazam is a mobile app that recognizes music around you. It is the best way to discover, explore and share the music you love. Shazam connects more than 1 billion people. It took us 10 years to reach 1 billion Shazams and now we deliver 1 billion song results every month! It's an amazing app, available now in the Apple and Android stores. And we're always looking for new and innovative ways to delight our users.” - Shazam.com

Role | UX Designer / Research Lead

Duration | 2 Weeks

Team | 3 UX designers

Project Type | Native App Redesign / Concept Project

Tools | Figma / Slack / Zoom / Trello

Methods | User Surveys / User Interviews / Competitive & Comparative Analysis / Affinity Mapping / Journey Mapping / Wireframing / Prototyping / Usability Testing / Site Mapping / User Flows / Personas

Challenge

Working in a team of 3 UX designers in a 2 week design sprint my colleagues and I were tasked to redesign the Shazam app. The goal was to increase time in app by providing services to help connect users and their music.

Problem

Despite the overwhelming amount of human-centered data they’ve collected on music taste, Shazam has done very little to leverage this information into useful features. Research indicates that the most common use case of Shazam lasts less than half a minute - suggesting that users are using the app to identify a song, then immediately bounce to a different app to collect or listen to the song.

Initial Ideas

  • Highlight existing features

  • Add new features that involve connectivity

  • Tie in 20th Anniversary of Shazam

Design Process

Research

*August 2002:

Shazam launches as a text message service in the UK. At the time, users could identify songs by dialing “2580” on their phone and holding it up as a song played. They were then sent an SMS message telling them the song title and the name of the artist.

Synthesized data from all surveys & interviews

Key Findings

  • Most users are between 25-36 yrs old (48%)

  • The top features for users when using music streaming platforms are: playlists, favoriting songs & music recommendations

  • Users value convenience/simplicity & staying connected with friends via social media

  • Although Shazam offers more features than its competitors, it seems as though users are not aware of them

Concept & Design

Persona:

  • Avid music listener

  • Wants to connect with friends

  • Values convenience

  • Creates playlists

  • Millennial (31yrs old)

Moodboard:

  • Y2K

  • Incorporate 20yr anniversary (2002)

  • Simple & Loud

  • Appeal to largest user demographic (Millennials)

User Flow

Prototype (Mid-Fi)

  • Set up a search bar at the top center of the screen for easy access from any page within the app

  • Added global navigation to highlight all features of the app including music collection and music discovery

  • Implemented Y2K theme to celebrate Shazam’s 20year anniversary (limited time)

  • Focused on redesigning existing features in fun/easy way

  • Introduced chat feature to cater to users want for connectivity and business goal to keep users in app longer

  • Provided a music share/player option to listen with other users in the chat

Testing & Iteration

Users weren’t opposed to the visual aesthetic overall, but had a lot of trouble moving through it and were confused by certain elements like the older computer windows look that were mistaken for pop-ups.

Usability Test Results:

Visual Hierarchy ❌

  • Users were unsure as to what was a heading, a button, or a graphic.

Consistency ❌

  • Icons, headings, and body text were in different sizes which lead to confusion. Call to action buttons were not placed together which was also unclear to users

Sizing/Spacing ❌

  • Most of the text throughout pages were too small to read, icons were too small and placed too close together

Prototype (Hi-Fi)

We addressed the issues that were brought about from usability testing.

  • Increased text and button sizes to adhere to WCAG compliance for mobile devices

  • Did away with pop up like widow elements in the artist & song pages

  • Kept consistency with headings, buttons & graphics

Next steps & Takeaways

To fine tune our limited edition redesign we would focus on the following:

  • Further usability testing on new prototype to get new feedback

  • A/B testing, with various color palettes and visuals designs for potential future themes

  • Implement onboarding for new features and to highlight existing features plus the potential for more

This project was a fun experiment, and one I’d love to devote more time to in the future. From initial research to final deliverables, I enjoyed every stage. Working together as a team through ups and downs was a great learning experience. Collaborating with two other team members was valuable lesson for me as I was able to think / articulate topics critically, and solve problems through an overarching approach.