Design.

For our stakeholders, we present to you, Henry.

Persona.

The persona, Henry, was created based off of our user interviewees. Everyone we had interviewed were in between the ages of 28 and 38 years old and are young professionals.

Discovering that life has ups and downs.

Journey Map.

The journey map shows Henry’s emotional state throughout the user flow’s happy path. The path shows that Henry is sent a push notification about a song that he had previously Shazamed. With music discovery being the most important aspect for our users, we created a feature where you can rediscover songs based off of location. As we continue into the journey map, we can understand that rediscovering music can be just as exciting as if finding new music. We just add the emotion of nostalgia.

Following the music lovers happiest path.

User Flow.

This project required two user flows. Flow 1 outlines Henry's journey from receiving a personalized push notification about his friends' music interests, exploring those songs to opening the full song on Spotify. The process includes:

• Receiving an alert about friends' music activity

• Viewing a curated feed of friends' listening habits

• Selecting a song from a friend's activity

• Exploring the artist's page

• Discovering additional tracks by the artist

• Transitioning seamlessly to Spotify for the full song

Friend’s music history page.

Push notification for users to discover music via their friend’s activity.

Flow 2 illustrates Henry's process of rediscovering and sharing a previously Shazamed song based on location:

1. Accessing the map feature within the Shazam app

2. Locating the specific place where he originally identified the song

3. Retrieving the forgotten track from the location-based history

4. Sharing the rediscovered song with his friends

Find previous Shazamed songs by location.

Open the map to find where you were when the song was discovered.

Locking in a organized system, making sure everything stays in tune.

Design System.

Where simplicity meets sound. Our sleek design strips away clutter, letting your music take center stage. Intuitive navigation and seamless transitions create a fluid music discovery experience. With a minimalist aesthetic and cohesive color palette, the Shazam app offers a visually pleasing journey through your audio world. Every element serves a purpose, ensuring your focus remains on what matters most—the music.

Components.

As our design evolved, we developed content cards for each element, maintaining a clean and cohesive aesthetic. By storing all components in our library, we ensured consistency throughout the project.

Color.

For color, I chose true black, the Shazam blue, orange, and gray. The primary color is black, the secondary is orange, and the tertiary color is the Shazam blue. For the dark mode design, we employed dark gray for playlist and song cards, creating contrast against the black background.

Typeface.

We decided to continue with the typeface Shazam originally used. We wanted a typeface that is clear and readable and to also follow Shazam’s business requirements. Being a company owned my Apple, SF Pro was decided on to keep cohesiveness within the design.

Wireframes.

Each wireframe was structured to offer sleek design, easy and usable function, and organization. As the design lead, I wanted to consider creative design but to use what has been proven to work. Inspiration from Shazam and Spotify, song cards were created. We created song cards that look familiar so users would know how to use the app easily without having to learn something new and to prevent confusion.

Putting it all up to the task.

Usability Testing.

• Conducted 3 usability tests with users who are music fanatics and Shazam users.

• Users were based in Colorado, California, and Kentucky, ages were between 28 years old to 37 years old.

100%

Usability Tasks:

User Goal 1:

Henry tried to find a song that he previously Shazamed in North End, Boston. After he finds it, he needs to make sure that it is the right one and to share with his friend, Emilio.

of the users were able to successfully complete each task without errors.

Each user selected the icon “Shazams” when asked to go to the history page. We gave users the ability to access this music history in two ways.

Prompt 1:

Task 1: Can you open the app and go to the shazam's history?
Task 2: Can you find the area North End above Boston Downtown and zoom in?
Task 3: Can you now find the Shazam icon button next to Carmelina’s restaurant near the Paul Revere’s house and select the song?
Task 4: Try to share it via text message to Emilio, please.

Prompt 2:

Task 1: Can you click on the push notification that mentions your friends music history?
Task 2: Can you now select the song Feel Good Inc. and open it on Spotify?

User goal 2:

Henry had received a push notifications telling him to check out his friend’s music activity. Henry needs to to look at their music. After finding a song he likes from a similar artist, Henry will open in Spotify..

Shazam’s friend’s history song cards and option selection for for each song.

Illustrating how to find Shazamed songs based off your previous locations.