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 platforms
Outcome
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 principles
Optimization goal



▷  Previous state
▷  Previous state


2. UX Strategy & Information Architecture


Defining the User Journey

  • How users interact with Mediaroom across different devices
  • Optimizing for a TV-first interface with multi-device support
Wireframes & UX Flow
  • Structure for navigation and content browsing




3. Conceptual Directions 

4. Visual & Interaction Design

Establishing the Look & Feel
  • High-contrast, minimal UI for ease of readability
  • Grid-based layouts optimized for different screen sizes
Navigational Components
  • Scrolling behavior
  • Content categorization & search

▷  Hub Landing
▷  Details Modal
▷Details Modal Transition
  Details Full Transition

Hub Iterations

  ▷  Phase 1
 
  ▷  Phase 2


▷  Phase 3

▷  Phase 4



5. Chosen Route + fleshout
▷  Additional wireframes




5. Iconography & Interaction Elements


Icon System
  • Custom icon set for navigation and playback controls
Motion & Interaction Design:
  • How transitions and animations improve usability

▷  Custom icons designed within a 4:3 grid structure inspired by poster art
▷  Custom icon set for navigation and playback controls
▷  How transitions and animations improve usability


6. Final Implementation & Prototyping


Refining the Product
  • Usability testing results & iterative improvements
End-to-End Experience
  • Content browsing, selection, and playback integration


▷ Hub 

▷  Details Full

▷  Details Modal

▷  Discover

▷  Electric Program Guide + Zoom


▷  Your Stuff


▷  Details Full As Modal


▷  Companion Remote



SEE MORE PRODUCTS → CONTACT ME