A Personalized & Interactive Hero Experience

Project overview

This personal concept explores how Spotify’s homepage hero could feel more alive, personalized, and interactive.

Instead of a static promotional banner, the redesign introduces a dynamic “Mood Picker” experience that helps users discover music based on what they feel — making Spotify more intuitive and human.

Everything in the hero was created from scratch, including motion concepts, hover states, and floating category visuals.

Challenges & constraints

Spotify’s current homepage relies heavily on static imagery and marketing messages. While the product itself is highly personalized, the website hero doesn’t communicate that emotional intelligence.

The challenge: create a hero that feels fun, personal, and immersive, while staying true to Spotify’s brand identity and aesthetic.

Project goals

Make the hero feel more interactive and alive, reflecting Spotify’s personality.
Introduce a simple UX idea — a Mood Picker — to help users find music faster.
Add subtle animations and hover interactions to elevate the experience.
Keep the design premium, modern, and close to Spotify’s brand world.

UX process

Research

I studied Spotify’s existing web presence and identified an opportunity: help users discover music emotionally or intuitively.

Concept Exploration

I sketched out a hero focused on personalization, mood-based suggestions, and soft motion.

Interaction Design

Hover effects, animated buttons, floating mood bubbles, and a “genre ring” hover pattern were added.

High-Fidelity Design

I built the full hero in Figma with layered shadows, animations, and a moving composition of circular mood visuals.

Design solution

Dynamic floating mood bubbles representing Chill, Energetic, Sad, Focus, etc.
On hover, each bubble reveals a genre ring — circular text surrounding the image that rotates subtly.
The bubbles drift slowly across the hero for a magical, rhythmic motion.
Mood Picker CTA with a special gradient hover state invites exploration.
Other CTAs (“See Your Mixes” / “Browse Playlists”) gain soft color transitions on hover.
Soft green spotlight texture in the background adds depth and brand alignment.
Large, bold headline communicates personalization clearly.
Clean navigation and spacing maintain Spotify’s minimalist style.

Feel free to scroll around in the below prototype. With the arrow icon in the right hand corner you can also view the prototype in full-screen mode.

Results & feedback

This hero redesign demonstrates how small UX improvements and interactive elements can transform a static homepage into a personal, emotional, and memorable welcome moment.

The concept showcases UI craftsmanship, motion thinking, and product sensitivity — all within a simple, fast, 1-day design exercise.

Key takeaways

Interaction elevates emotion — especially in music products.
A small feature (Mood Picker) can dramatically improve the discovery experience.
Modern hero design is less about decoration and more about feeling alive.
Even one section can tell a complete UX/UI story.