Redesign the Shazam App

A UX/UI Case Study from Heuristics to Hi-Fi Prototype

Introduction

This case study documents the full UX/UI redesign process of Shazam, following a structured, end-to-end methodology suitable for a real product redesign.

I chose Shazam because it is one of the most widely used music apps in the world, yet parts of its experience feel unclear and emotionally distant. This combination makes it a strong candidate for usability improvements and for exploring a deeper emotional connection with music.

The redesign follows a clear pipeline:

• Atomic Design
• Heuristic Analysis
• Existing Design Clone
• Visual Competitive Analysis
• Moodboard & Brand Attributes
• Colors & Typography
• Style Tile
• High-Fidelity Prototype

The goal was not to reinvent Shazam, but to refine clarity, control, and emotional engagement while respecting the core product.

1. Existing Design & Screenshots

I started by capturing screenshots of the current Shazam app to understand its structure, flows, and interaction patterns.

At a functional level, the app works. However, several moments in the experience lack clarity:

Users are often unsure whether the app is listening, processing, or idle System feedback is minimal Failure states are not well explained The interface feels cold and inconsistent between screens

These observations guided the next step: heuristic analysis.

2. Heuristic Analysis

Using Nielsen’s usability heuristics as a reference, I identified the main UX issues in the existing experience:

• The system does not clearly communicate its current status
• Users are unsure if the app is listening or waiting
• When a song is not found, there is no clear explanation
• Users are not guided on what to do after a failed result
• Cancel or stop actions are not obvious
• Some interactions are confusing for first-time users
• Visual style changes between screens, creating inconsistency
• The interface works, but feels emotionally flat and disengaging

These insights became the foundation for all redesign decisions.

3. Existing Design Clone

Before redesigning, I recreated the original Shazam interface in Figma to deeply understand its structure.

To do this:

I used Auto Layout to maintain consistent spacing, alignment, and component behavior I placed the original screenshots behind the frames and reduced their opacity I traced layouts, sizes, and spacing precisely

This cloning process helped me work faster and more accurately, and ensured that any improvements were intentional rather than accidental.

4. Visual Competitive Analysis

To understand how other music apps balance utility, content, and emotion, I analyzed three competitors:

• Genius Genius focuses heavily on content and text. The design is simple and places lyrics, explanations, and music knowledge at the center. It feels more like a reading and learning platform than a quick music recognition tool.
• Musixmatch Musixmatch uses warm colors such as pinks and oranges, creating a friendly and emotional experience. The app feels expressive and social, with a strong focus on lyrics and music discovery.
• SoundHound SoundHound is more utility-driven. It uses dark colors, high contrast, and a technical visual language. Advanced features like voice and humming recognition are highlighted, prioritizing functionality over emotion.

This comparison clarified where Shazam currently sits and where it could evolve: maintaining its speed and simplicity while adding emotional depth and clarity.

5. Moodboard & Brand Attributes

The moodboard explores music as something that can be seen and felt, inspired by the concept of synesthesia.

The visuals translate sound into color, light, and movement. Waves and abstract forms represent rhythm and vibration, while faces and eyes suggest listening, presence, and emotional connection.

Chosen Brand Attributes

• Artistic
• Expressive
• Dynamic

These attributes guided all visual and interaction decisions.

6. Atomic Design System

This project follows the Atomic Design methodology to structure the interface in a scalable and consistent way.

Atoms

The smallest building blocks of the interface, including: Colors, Typography, Icons, Shapes, Spacing, Opacity.

Atoms do not function alone, but they form the foundation of the entire design system.

Molecules

Combinations of atoms that already serve a clear purpose, such as: Buttons, Song list items, Search fields, Progress indicators, Small cards.

These elements are reusable and ensure interaction consistency.

Organisms

Larger sections composed of multiple molecules, including: The Shazam recognition area, Listening and processing states,Music player, Library and history sections.

Organisms represent complete and functional interface blocks.

7. Colors, Typography & Style Tile

The style tile defines the visual identity of the redesigned app.

Color System

Purple is the primary color, representing music, emotion, and immersion. Green is used as a micro-accent to highlight active states, confirmations, and key actions. Dark backgrounds reduce distraction and help users focus on the listening experience.

Typography

The typeface chosen is Poppins, using Regular and SemiBold weights. It feels friendly, modern, and highly readable on mobile screens.

UI Language

Rounded components Soft lighting effects Solid colors Minimal visual noise

All components follow the same visual logic to ensure consistency across screens.

8. High-Fidelity Prototype & Usability Improvements

The high-fidelity prototype brings together usability, emotion, and visual consistency.

Key Improvements

Visibility of System Status The app now clearly communicates what is happening:

• “Hold to Shazam”
• “Listening…”
• “Estimated Time: 00:08”

Error Recognition and Recovery A dedicated “No Result” screen explains why a song was not found and guides users on next steps.

User Control and Freedom Cancel and retry actions are clearly visible, giving users confidence and control.

Recognition Rather Than Recall Clear instructional text reduces cognitive load:

• “Hold to Shazam”
• “Prevents accidental activation”

Consistency and Standards Visual language is unified across all screens.

Aesthetic and Minimalist Design The purple and green palette creates:

• Emotional atmosphere
• Immersion
• Focus

Distractions such as overly dominant ads are visually balanced to keep attention on the main task.

Confidence and Trust Clear feedback, predictable behavior, and consistent visuals make the experience feel reliable.

What if Shazam had a cute little mascot?

Imagine a small, lovable character that feels the music before you even see the result. A companion that pops up the moment you press and hold, gently signaling: “I’m listening.”

I’d call him Shazam Pulse. It fits perfectly, because he’s basically the heartbeat of the experience: the moment sound becomes recognition.

Shazam Pulse could guide you through the entire journey:

• When you start scanning, he appears with a subtle “Listening…” vibe, like he’s tuning in with you.
• If the match is close, he reacts with growing energy, showing progress without needing heavy UI.
• When the song is found, he celebrates in a clean, satisfying way, confirming success instantly.
• If nothing comes up, he stays supportive instead of silent, explaining what happened and suggesting what to try next (move closer to the speaker, try again, check your connection).

He becomes the emotional bridge between the user and the system: turning silence into feedback, uncertainty into clarity, and “no result” into a moment that still feels friendly and guided.

In a world where music is emotion, Shazam Pulse makes the interface feel alive.

Conclusion

This redesign shows how a popular, functional app can be significantly improved through clarity, emotional design, and system thinking.

By combining heuristic analysis, Atomic Design, visual exploration, and usability principles, the Shazam experience becomes more understandable, more human, and more emotionally connected to music.

The result is not a different app, but a clearer and more engaging version of the same product, one that listens as well as it hears.