Refining Apple Music. Connecting design to code.
Lead product design, a Sketch-to-Figma design-system migration, and an MCP-connected repository workflow.
See my design decisions- My role
- Lead Product Designer · Consultant
I led product design across Apple Music experience improvements and the design foundations behind the work. The scope combined interface exploration, research and prototyping with a move from Sketch to Figma and a connected design-to-code workflow.
- Client
- Apple
- Timeline
- 5 months
- Tools
- Sketch
- Figma
- Jira
- Miro
- MCP
01 / DESIGN DECISIONS
Problem → My decision → Result
- Problem
- Explore improvements to listening and discovery while working within Apple Music’s established interface patterns.
- My decision
- I connected research and flow mapping with sketches and Now Playing prototypes, and converted the Sketch work into reusable Figma foundations.
- Result What I delivered
- I delivered interface explorations, user flows, interaction prototypes, and a Figma design system with shared libraries.
Explore the supporting designs
Listening experience wireframes
Original hand-drawn explorations of library navigation, playlists, playback controls, and screen transitions.
Navigation and flow mapping
The original navigation map documents the connections between interface states considered in the design work.
Listening interaction notes
Annotated Apple Music screens explore playback controls, library actions, and navigation details.
02 / MY ROLE & SCOPE
Experience, systems, and implementation context.
Product experience
Led interface exploration, user-centered design and rapid prototyping, working within Apple Music’s established patterns across desktop and mobile.
Sketch → Figma
Converted Sketch design work into a Figma design system and shared libraries, bringing reusable design foundations into the new workflow.
MCP → repository
Connected MCP-assisted workflows with the code repository so design and implementation context could be reviewed together.
03 / DESIGN SYSTEM & WORKFLOW
A connected path from design to code.
A summary of my Sketch-to-Figma migration and MCP/repository work. Expand a stage for context.
From design context to a working UI.
A natural-language prompt connects design intent, component knowledge, and code through an AI assistant and a local MCP server.
Example promptCreate a compact listening view using our existing components.
Describe the UI you need and provide the relevant design context: layout, components, and interaction intent.
- Design → development
- Carry design intent and reusable patterns into the implementation context.
- Development → product UI
- Use existing components to move from a request to a preview that can be reviewed and refined.
04 / RESEARCH & FLOWS
Research & supporting flows
Research explored listening and discovery needs, compared streaming features, and informed task flows and low-fidelity exploration. The work considered how new interactions could fit Apple Music’s existing design patterns.
Login flow
Original user-flow artifact for access and entry into the experience.
Navigation flow
Original map of navigation and the connections between interface states.