top of page
Project: Microsoft Surface Tablet - Video on Demand
Roles
- UI Designer
Project Deliverables
- Interaction Design
- Wireframes
Tools
- Sketch
- Adobe Illustrator
Overview:
I worked at Microsoft's UX Division to deliver a video on demand service, for the Surface Tablet, using Microsoft's Metro Design Language.
Our solution was similar 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.
Full Color Mockups
My Contributions
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: Show All Recordings
Interactions
Working closely with a UX Researcher, we made sure that all interactions complied with the Metro UI guidelines.
Image: Series Landing Screen
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). In addition, they can play this episode or remove it from their collection.
Image: Metadata and Controls
Initial Flow Sketches
This image was part of a brainstorming session to figure out user paths through the application.
The flow begins at the content hub and drills down to listing an individual episode.
Image: Whiteboard Session
Wireframes:
Flow Diagrams
To the right is a diagram that maps out the AT&T U-Verse Media Hub for the Microsoft tablet.
Image: Flow Diagram and Pivot Menus
Spotlight Screen + Charms
The Spotlight screen lets the user set up recordings, search for programming, and find out about feature stories in the U-Verse guide.
On the right side of the sceen, in the fly-in "Search," panel, we see the "Charms," or features present in Windows Metro.
Image: Spotlight Video Guide
Search Query Example
IThe user starts a search with the keyword, "Mad."
We then see the results on the search string, "Mad."
Image: Using Search
Search Results
Image: 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."
Image: Search Results - TV and Series
In the image to the right, the user can drill down by relevance / alphabetical order or by day and time.
Image: Sort on Relevance
Here, the user has narrowed their search down.
At this level in the flow, the user can view the summary for individual episodes from a given season.
Image: Modal with Metadata at Season Level.
Drilling down further, the user can view the summary for individual episodes from a given season.
Image: Modal with Metadata at Episode Level.
Thank You
bottom of page