Shazam Redesign
Shazam Redesign
A little bit of neomorphism
A little bit of neomorphism
Services
UI UX Design
Client
Shazam - Bootcamp Project
Shazam - Bootcamp Project
Shazam - Bootcamp Project
Year
2025
Info
Shazam is a mobile app that identifies music playing around you or within other apps.
It can recognize songs from various sources, including radio, TV,
and even within apps like TikTok, Instagram, and YouTube.
Shazam is a mobile app that identifies music playing around you or within other apps.
It can recognize songs from various sources, including radio, TV, and even within apps like TikTok, Instagram, and YouTube.
Pre-start
This redesign exercise was originally proposed by Ironhack, and I decided to challenge myself by adding a twist:
I filled a wheel with popular apps, gave it a spin, and fate chose Shazam.
This redesign exercise was originally proposed by Ironhack, and I decided to challenge myself by adding a twist: I filled a wheel with popular apps, gave it a spin, and fate chose Shazam.
This redesign exercise was originally proposed by Ironhack, and I decided to challenge myself by adding a twist:
I filled a wheel with popular apps, gave it a spin, and fate chose Shazam.
First steps
• Carefully replicated Shazam screens pixel by pixel to study structure and flow.
• Observed typography, spacing, and color accents shaping the style.
Result: a detailed study of Shazam’s design language, showing how it balances identity, usability, and clarity.
• Carefully replicated Shazam screens pixel by pixel to study structure and flow.
• Identified ways to simplify navigation and improve the user journey.
• Analyzed typography, spacing, and color use in shaping the visual style.
• Observed how typography, spacing, and color accents contribute to the overall visual style.
Result: a detailed study of Shazam’s design language, showing how it balances identity, usability,
and clarity.
Competitor Analisys
Next step was to analyse Shazam's main competitors like Soundhound, Musixmatch, Genius, and Song Finder to see how they approach music discovery and user flow.
This revealed opportunities for Shazam to stand out with cleaner navigation,
a stronger identity, and smoother interactions.
I analyzed competitors like Soundhound, Musixmatch, Genius, and Song Finder to see how they approach music discovery and user flow.
This revealed opportunities for Shazam to stand out with cleaner navigation, a stronger identity, and smoother interactions.
I analyzed competitors like Soundhound, Musixmatch, Genius, and Song Finder to see how they approach music discovery and user flow.
This revealed opportunities for Shazam to stand out with cleaner navigation, a stronger identity, and smoother interactions.
Moodboard
The moodboard explores calm, comfort, and sophistication through a neomorphism-
inspired style. Soft shadows and rounded shapes create a tactile, almost physical feel, while flowing textures suggest ease and natural movement.
Pops of blue and orange bring freshness and creativity, balanced by minimalist geometric elements that keep the look refined and modern.
I analyzed competitors like Soundhound, Musixmatch, Genius, and Song Finder to see how they approach music discovery and user flow.
This revealed opportunities for Shazam to stand out with cleaner navigation, a stronger identity, and smoother interactions.
I analyzed competitors like Soundhound, Musixmatch, Genius, and Song Finder to see how they approach music discovery and user flow.
This revealed opportunities for Shazam to stand out with cleaner navigation, a stronger identity, and smoother interactions.
Style tile
The style tile defines the visual foundation of the redesign, guided by a neomorphism-
inspired approach. The color palette balances deep blues and soft neutrals with a bright orange accent, creating both calm and energy.
Typography choices — Manrope for headers and buttons, Outfit for body text — ensure readability while reinforcing a modern, sophisticated feel. Shadows and soft gradients bring depth to components, making interactions feel tactile and intuitive.
Together, these elements establish a consistent system that is fresh, comfortable,
and distinctly Shazam.
The style tile defines the visual foundation of the redesign, guided by a neomorphism-
inspired approach. The color palette balances deep blues and soft neutrals with a bright orange accent, creating both calm and energy.
Typography choices — Manrope for headers and buttons, Outfit for body text — ensure readability while reinforcing a modern, sophisticated feel. Shadows and soft gradients bring depth to components, making interactions feel tactile and intuitive.
Together, these elements establish a consistent system that is fresh, comfortable,
and distinctly Shazam.
The style tile defines the visual foundation of the redesign, guided by a neomorphism-
inspired approach. The color palette balances deep blues and soft neutrals with a bright orange accent, creating both calm and energy.
Typography choices — Manrope for headers and buttons, Outfit for body text — ensure readability while reinforcing a modern, sophisticated feel. Shadows and soft gradients bring depth to components, making interactions feel tactile and intuitive.
Together, these elements establish a consistent system that is fresh, comfortable,
and distinctly Shazam.
Redesign - high fidelity
The high-fidelity redesign brings the concept to life, applying the neomorphism-inspired style across Shazam’s core screens. Soft shadows, gradients, and a refined color palette create a calm yet modern atmosphere, while typography and layout ensure clarity and usability.
The result is a fresh take on Shazam that feels familiar, but smoother, more comfortable, and visually elevated.
The high-fidelity redesign brings the concept to life, applying the neomorphism-inspired style across Shazam’s core screens. Soft shadows, gradients, and a refined color palette create a calm yet modern atmosphere, while typography and layout ensure clarity and usability.
The result is a fresh take on Shazam that feels familiar, but smoother, more comfortable, and visually elevated.
The high-fidelity redesign brings the concept to life, applying the neomorphism-inspired style across Shazam’s core screens. Soft shadows, gradients, and a refined color palette create a calm yet modern atmosphere, while typography and layout ensure clarity and usability.
The result is a fresh take on Shazam that feels familiar, but smoother, more comfortable, and visually elevated.
Redesign - high fidelity
To balance the clean light mode, I also designed a dark mode version—because, as one of my old managers used to joke, “if you use light mode, you’re probably a psychopath.”
To balance the clean light mode, I also designed a dark mode version—because, as one of my old managers used to joke, “if you use light mode, you’re probably a psychopath.”
To balance the clean light mode, I also designed a dark mode version—because, as one of my old managers used to joke, “if you use light mode, you’re probably a psychopath.”
