Microsoft
As an in-house designer at Moving Brands San Francisco, I worked on redesigning Microsoft Mediaroom, a next-gen TV experience that redefined content discovery and navigation across multiple platforms—TV, mobile, and web.
Challenge
Reimagining Mediaroom’s content offering, across multiple platformsOutcome
An award-winning new dynamic identity (AIGA, CA, Graphis, Print...) that drove record-breaking attendance, reaching 1 million visitors post-launch.
1. Microsoft’s Vision
Microsoft’s UX principlesOptimization goal
Previous statePrevious state
2. UX Strategy & Information Architecture
Before drawing interfaces, we mapped how people actually move through the system: channel surfing, browsing, returning to favorites, and using second screens alongside the TV.
3. Conceptual Directions
With the architecture in place, we explored multiple conceptual directions, each framing content and navigation in a slightly different way.
4. Visual & Interaction Design
Once a direction was chosen, we refined the visual language and interaction patterns to feel both premium and effortless at living-room distance.
Hub LandingDetails ModalDetails Modal TransitionDetails Full Transition
Hub Iterations
Phase 1
Phase 2
Phase 3
Phase 4
5. Chosen Route + fleshout
Once the team aligned on a preferred concept, we expanded it into a full product system.
Additional wireframes
6. Iconography & Interaction Elements
We created a custom icon set to support navigation, playback, recording, and system actions.
Custom icons designed within a 4:3 grid structure inspired by poster artCustom icon set for navigation and playback controlsHow transitions and animations improve usability
6. Final Implementation & Prototyping
As concepts matured, we moved into prototyping and implementation support, refining details in response to testing and stakeholder feedback.
Hub
Details Full
Details Modal
Discover
Electric Program Guide + Zoom
Your Stuff