Xbox Music
The music you love
Built for the web
Taking Microsoft Music beyond Windows with a responsive web player. I established the design foundation and became design lead after the MVP, shaping a web interaction model through research and product data.
01 / At a glance
A new environment for the music
The Windows app’s interaction patterns did not translate naturally to a browser. The web player needed its own approach.
Define a web design foundation
I created end-to-end wireframes, contributed to visual design and used research to advocate for familiar web interactions.
A direction that traveled back
The responsive player reached non-Windows listeners, and its design patterns were later adopted by the Windows Music application.
02 / The experience
Find a favorite
Follow the music
Move through discovery, an album and the collection within the web player.
- 01 / 03 Discover
Start with an artist
Artist discovery gives listeners a visual way into the catalogue while navigation and playback stay close.
The Top Music view brings artists into a browsable grid. - 02 / 03 Listen
Open the album
The album page gives the music a clear identity and keeps the track list connected to playback.
An album detail view with its tracks and persistent playback controls. - 03 / 03 Collect
Make room for your own mix
Playlist management connects listening to a personal collection, with the selected tracks available in a familiar list.
A playlist brings its tracks and related content together.
03 / Design & leadership
Familiar to listeners
Natural in a browser
Research helped establish an interaction direction suited to the web, which then informed the wider product.
Design for the environment
I proposed alternatives to the Windows-specific patterns and advocated for intuitive web interactions. Leadership approved the direction after successful qualitative research.
Give empty states a purpose
Playlist creation needed a useful beginning. The empty state points listeners toward ways to start adding music.
Keep learning after launch
After the MVP, I took on design leadership and used product data and research insights to guide improvements.
04 / What changed
Designed for the web
Adopted beyond it
The project established an interaction direction that influenced more than the browser experience.
Music beyond Windows
The responsive web player brought the service to millions of non-Windows users.
Patterns adopted by Windows
The web design received positive user and press feedback and informed the Windows Music application.
Discovery through to playback
The experience connected content discovery, search and playlist management in a coherent web player.
Keep exploring
All projectsXbox Support
View project