APPLE MUSIC
CASE STUDY

Timeline

3 Weeks

Role

Product Designer

Deliverables

Hi-Fi Prototypes

Tools

Figma & Protopie

01. Discovery

While Apple Music is an industry leader, user feedback often points to a "sterile" interface. Navigating between lyrics, queues, and playlists requires too many taps.

The goal was to eliminate friction and bring the album artwork to the forefront of the experience by mapping out a new, streamlined user journey.

User ResearchUX Flow
Current Flow
Tap Player → Tap Menu → Tap Lyrics → View
New Gesture Flow
Swipe Up on Player → Seamless View

02. The Solution

I introduced a Dynamic Glassmorphism System. Instead of a solid background, the player extracts the dominant colors from the album art and creates a fluid, animated mesh gradient.

Controls were shifted to the lower third of the screen to improve reachability on larger iPhones.

UI DesignGlassmorphism

03. Wireframing

Before jumping into high-fidelity designs, I mapped out the core user flows using low-fidelity wireframes.

This allowed me to test the new gesture-based navigation (like swiping down to minimize the player) without getting distracted by colors and typography.

WireframesPrototyping

04. Interaction Logic

The final prototype was built to handle complex, logic-based micro-interactions. Using spring physics rather than linear easing curves ensures the player feels alive, reacting naturally to the user's swipe velocity and touch.

Micro-InteractionsSpring Physics
AnimationController.ts
const playerSpring = useSpring({
  damping: 20,
  stiffness: 120,
  mass: 0.8,
  restSpeedThreshold: 0.01
});

// Gesture handler for minimizing the player
const onSwipeDown = (velocity) => {
  playerSpring.start({
    y: 800,
    scale: 0.85,
    config: { velocity }
  });
};
← Back to Overview