Services
UI UX Design
Client
Shazam
Year
2025
Team
Solo
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 Redesign
Shazam Redesign
A little bit of neomorphism
A little bit of neomorphism
Services
UI UX Design
Client
Shazam
Year
2025
Team
Solo
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.
Services
UI UX Design
Year
2025
Client
Shazam
Team
Solo
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.
Challenge
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.
Approach
To start, I recreated Shazam’s core screens pixel by pixel. This exercise gave me a deeper understanding of its visual language — bold typography, minimal interactions, and a focus on instant recognition.
To start, I recreated Shazam’s core screens pixel by pixel. This exercise gave me a deeper
understanding of its visual language — bold typography, minimal interactions, and a focus on instant recognition.
Competitor Analisys
To understand the music discovery landscape, I studied competitors such as Soundhound, Musixmatch, Genius, and Song Finder.
Soundhound has strong branding but a cluttered interface.
Musixmatch excels in lyrics and discovery, but can feel overwhelming.
Genius provides editorial content, though its usability is limited.
Song Finder is simple, but lacks a distinctive identity.
To understand the music discovery landscape, I studied competitors such as Soundhound, Musixmatch, Genius, and Song Finder.
Soundhound has strong branding but a cluttered interface.
Musixmatch excels in lyrics and discovery, but can feel overwhelming.
Genius provides editorial content, though its usability is limited.
Song Finder is simple, but lacks a distinctive identity.
To understand the music discovery landscape, I studied competitors such as Soundhound, Musixmatch, Genius, and Song Finder.
Soundhound has strong branding but a cluttered interface.
Musixmatch excels in lyrics and discovery, but can feel overwhelming.
Genius provides editorial content, though its usability is limited.
Song Finder is simple, but lacks a distinctive identity.
Moodboard
The moodboard defines the visual and emotional foundation of the redesign, guided by three attributes: calm, comfort, and sophistication.
Calm → achieved through soft shadows and rounded shapes, creating a tactile and reassuring feel.
Comfort → flowing textures and smooth gradients suggest ease, natural movement, and familiarity.
Sophistication → a refined balance of minimal geometric elements with pops of blue and orange that add energy and creativity without losing elegance.
Direction: Shazam should feel modern and inspiring, yet approachable — a companion that brings both clarity and personality to music discovery.
The moodboard defines the visual and emotional foundation of the redesign, guided by three attributes: calm, comfort, and sophistication.
Calm → achieved through soft shadows and rounded shapes, creating a tactile and reassuring feel.
Comfort → flowing textures and smooth gradients suggest ease, natural movement, and familiarity.
Sophistication → a refined balance of minimal geometric elements with pops of blue and orange that add energy and creativity without losing elegance.
Direction: Shazam should feel modern and inspiring, yet approachable — a companion that brings both clarity and personality to music discovery.
The moodboard defines the visual and emotional foundation of the redesign, guided by three attributes: calm, comfort, and sophistication.
Calm → achieved through soft shadows and rounded shapes, creating a tactile and reassuring feel.
Comfort → flowing textures and smooth gradients suggest ease, natural movement, and familiarity.
Sophistication → a refined balance of minimal geometric elements with pops of blue and orange that add energy and creativity without losing elegance.
Direction: Shazam should feel modern and inspiring, yet approachable — a companion that brings both clarity and personality to music discovery.
Style tile
The style tile defines the visual foundation of the redesign, blending calm, comfort, and sophistication with Shazam’s bold identity.
Colors: Deep blues and soft neutrals create calmness, while a bright orange accent adds energy and creativity.
Typography: Manrope for headers and buttons, paired with Outfit for body text, ensures readability and a modern, refined feel.
Visual Language: Shadows and soft gradients bring depth and tactility, making interactions feel natural and intuitive.
Result: A cohesive system that feels fresh, approachable, and distinctly Shazam.
The style tile defines the visual foundation of the redesign, blending calm, comfort, and sophistication with Shazam’s bold identity.
Colors: Deep blues and soft neutrals create calmness, while a bright orange accent adds energy and creativity.
Typography: Manrope for headers and buttons, paired with Outfit for body text, ensures readability and a modern, refined feel.
Visual Language: Shadows and soft gradients bring depth and tactility, making interactions feel natural and intuitive.
Result: A cohesive system that feels fresh, approachable, and distinctly Shazam.
The style tile defines the visual foundation of the redesign, blending calm, comfort, and sophistication with Shazam’s bold identity.
Colors: Deep blues and soft neutrals create calmness, while a bright orange accent adds energy and creativity.
Typography: Manrope for headers and buttons, paired with Outfit for body text, ensures readability and a modern, refined feel.
Visual Language: Shadows and soft gradients bring depth and tactility, making interactions feel natural and intuitive.
Result: A cohesive system that feels fresh, approachable, and distinctly Shazam.
Redesign - high fidelity
The high-fidelity redesign brings the concept to life, applying a neomorphism-inspired style across Shazam’s core screens.
Visuals: Soft shadows, gradients, and subtle depth create a calm yet modern atmosphere.
Clarity: Clean typography and balanced layouts improve readability and usability.
Identity: The neomorphic treatment refines Shazam’s iconic simplicity, making it feel both familiar and elevated.
Result: A fresh take on Shazam that blends calm, comfort, and sophistication with a modern, neomorphic aesthetic — recognizably Shazam, but more engaging and immersive.
The high-fidelity redesign brings the concept to life, applying a neomorphism-inspired style across Shazam’s core screens.
Visuals: Soft shadows, gradients, and subtle depth create a calm yet modern atmosphere.
Clarity: Clean typography and balanced layouts improve readability and usability.
Identity: The neomorphic treatment refines Shazam’s iconic simplicity, making it feel both familiar and elevated.
Result: A fresh take on Shazam that blends calm, comfort, and sophistication with a modern, neomorphic aesthetic — recognizably Shazam, but more engaging and immersive.
The style tile defines the visual foundation of the redesign, blending calm, comfort, and sophistication with Shazam’s bold identity.
Colors: Deep blues and soft neutrals create calmness, while a bright orange accent adds energy and creativity.
Typography: Manrope for headers and buttons, paired with Outfit for body text, ensures readability and a modern, refined feel.
Visual Language: Shadows and soft gradients bring depth and tactility, making interactions feel natural and intuitive.
Result: A cohesive system that feels fresh, approachable, and distinctly Shazam.
high fidelity - Dark mode
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.”
Key-learnings
In this project, I explored neomorphism to bring a softer, more tactile feel to Shazam — with buttons that look pressable and cards that almost lift off the screen. This approach gave the interface a playful depth while keeping it clean and minimal.
I learned that neomorphism shines when balanced with clarity and usability. Subtle shadows and highlights can make interactions feel delightful, but they need to stay functional.
In the end, just like Shazam finds the right song in seconds, I found the right rhythm between style and simplicity.
In this project, I explored neomorphism to bring a softer, more tactile feel to Shazam — with buttons that look pressable and cards that almost lift off the screen. This approach gave the interface a playful depth while keeping it clean and minimal.
I learned that neomorphism shines when balanced with clarity and usability. Subtle shadows and highlights can make interactions feel delightful, but they need to stay functional.
In the end, just like Shazam finds the right song in seconds, I found the right rhythm between style and simplicity.
In this project, I explored neomorphism to bring a softer, more tactile feel to Shazam — with buttons that look pressable and cards that almost lift off the screen. This approach gave the interface a playful depth while keeping it clean and minimal.
I learned that neomorphism shines when balanced with clarity and usability. Subtle shadows and highlights can make interactions feel delightful, but they need to stay functional.
In the end, just like Shazam finds the right song in seconds, I found the right rhythm between style and simplicity.
