Overview
Roles
- UI Designer
- Product Designer
Project Deliverables
- Interaction Design
- Wireframes
- Mockups
Tools
- Figma
- Adobe Illustrator
Background
I worked at Microsoft's UX Division to deliver a video on demand service, for the Surface Tablet, using Microsoft's Metro Design Language. The service also appeared on wide screen TVs and had to consider 10FT UI's.
Our solution was similar to Amazon. Users could download shows and play them at their leisure away from a connection.
Users could find out all sorts of IMDB related facts about a show’s cast and production, much like Amazon X-Ray.
Mockups
I worked on depicting how interactions for Video on Demand, would look using Microsoft’s Metro Design Language.
I sketched initial ideas for each use case, on a whiteboard.
Once approved, I formalized our pathways in the mockups shown below.
Our goal was to navigate to key points of interest in three clicks or less.
Image: Landing Screen
Image: Recording Screen
Interactions
Working closely with a UX Researcher, we made sure that all interactions complied with the Microsoft guidelines.
Image: Most Recent Shows
Recording View
Here the user sees all recorded episodes for a given series, in this case, Boardwalk Empire.When the user taps and holds on a tile, they see all relevant episode info, (metadata). Here they can play this episode or remove it from their collection.
Image: Recording Episode
Flows & Wireframes
We ran a few brainstorming sessions to figure out user paths through the application.
The flow begins at the content hub and drills down to an individual episode.
Image: Sketches of Information Architecture
Flows Refined
This flow diagram maps out the AT&T U-Verse Media Hub for the Microsoft Tablet.
Image: Media Hub Site Map
Image: Media Hub Map
Wireframes
Spotlight Screen + Charms
The Spotlight screen lets the user set up recordings, search for programming, and find out about feature stories in the guide.
Image: Spotlight + Charms on Right
Search Query Example
The user starts a search with the keyword, "Mad."
We when see the results for, "Mad."
Image: Search Results
Search Results
User sees initial results for Search. user can filter on:TV Shows, All Categories, or Relevance.
The user drills down further to see different shows with "Mad" in the title. Users can search shows and series, On Demand and get IMDB style information if they select, "Cast and Crew."
The user can drill down by relevance / alphabetical order or by day and time.
Here, the user has narrowed their search down. At this level in the flow, the user can view the summary for individual episodes for a given season
Image: Series Summary
At this final step, the user can view an episode summary.
