Project Brief
Design a TV experience with D-pad as the primary input, where the user can order a meal while watching TV. Your designs should include information architecture and high-fidelity mockups or prototypes of 2 or 3 key screens.
Phase 1
Research
An availability of large display real estate provides multiple layout options that facilitate vastly different experiences.
Identifying the types of food ordering experiences as well as a broad study of the competitors examples, was the first step within the research phase.
Most of my findings relied on a fullscreen experience that detracted from the viewable content and didn’t maximize the use of a fullscreen food ordering experience (ex. GrubHub and Papa John’s AppleTV apps).
With that in mind, I set out to improve existing patterns and perhaps introduce a few new ones that would elevate the multitasking experience of ordering food while watching TV.
Slide Up Panel
Utilizes a native panel navigation and extends it vertically for a seamless transition into an app experience.
Side Panel
“Quick action” panel utilizes a familiar compact content structure and maximizes the viewable area without interrupting the movie.
Fullscreen Overlay
Perfect for taking a break in-between episodes for a robust ordering experience when you can’t decide what to get.
PnP Mode
Can’t wait to watch the next episode? No problem, Picture in Picture Mode allows you to continue watching your favorite show while ordering food, without skipping a beat.
Phase 2
Information Architecture
Once the four directions were identified, the next step was to create an IA to test wether or not they would, not only work, but also provide an enjoyable and pleasant ordering experience.
Slide Up Panel
Cons
Takes up the majority of the viewable content.
Possible Solve
Apply a frosted, semi-transparent look to the background panel in order to have the content faintly show through.
Side Panel
Cons
Does not follow the existing navigation pattern.
Possible Solve
Utilize animation to assist with the directional transitions.
Fullscreen Overlay
Cons
Disrupts and obstructs the viewable content.
Possible Solve
Apply a frosted, semi-transparent look to the background panel in order to have the content faintly show through.
Picture in Picture
Cons
Possibility of content obstruction.
Possible Solve
Option to either move or scale the content panel.
Phase 3
Visual Design
The visual direction follows the principals of transparency in order to reduce the obstruction of the viewable content. Below is a brief sample of various screens throughout the food ordering flow.
