GoPro

Project Brief

While at Vertigo, GoPro came to us to bring streaming to Smart TVs. As a video-intense application, designing a fast and intuitive product easy for the user to navigate on a television was of utmost priority. I joined the team as an additional developer and designer to bring the visual designs to life and perfect the UI for final presentation.

Type
Smart TV App
Role and Scope
UX Design and UI Development using HTML5, Javascript (Enyo.js), Less
When
2014
Team
With Keith Craig, Matt Carrier, Sean Dolinksy at Vertigo

The Challenge

Designing for the 10 Foot Experience

This was very different from the websites and mobile apps I was used to working on— instead, I was designing and developing for a whole new medium, the TV. I had to take into account a whole different set of parameters.

  1. 1. The remote control: The method of input is using a remote control or d-pad, not a touch screen or mouse, which presents a new challenge.
  2. 2. Readability: The greater distance between the viewer and the TV compared to a laptop or mobile device calls for excellent legibility and clear content hierarchy.
  3. 3. Safe zones: All TV platforms have title-safe regions (though not clearly defined) that content must fit within.
  4. 4. Focus: Since input is limited to the remote, navigation must be extremely clear. At all times, the user must know what item is currently selectable. Obvious focus states were critical.

It's important to note that the TV experience is a sit-back-and-relax mindless activity. We had to insure the UI was as simple and intuitive as possible.

UI Design

HOME SCREEN - When the user first opens the app, the first playlist is already focused on. The design is constrained because the user is limited by the remote. Therefore, discovering new content requires horizontal navigation. The item that is currently selectable is always clear to the user.
VIDEO PLAYER - After selecting a video or playlist, the main controls appear and additional information about the video. The main area of the video is never obstructed from view so the user can continue to consume content uninterrupted.
PLAYLIST VIEW - Selecting the playlist button at the buttom right opens up the list of videos currently in queue. This allows the user to watch and browse content simultaneously. It is always clear to the user what item is currently selected with borders and highlights.
END OF VIDEO - At the end of the video, the user is presented with the option to replay or select a new video. Otherwise, the first playlist listed will automatically begin to play. At all times the user can sit back and continue to watch videos uninterrupted.

Takeaway

This project is still one of my favorites, because this was my first experience also as a developer on a product that would be shipped and used by millions of people. My team was determined to create a high-quality experience on the TV.

We were constantly testing interaction with the remote to make sure it was a fluid experience with no focusing issues. Excellent communication throughout the entire project ensured a delightful product, by discussing clean code and tracking down bugs as they came by. I truly learned the importance of clean, perfect code. It also gave me valuable perspective of being on the engineering side, which has helped me to empathize with and communicate better with developers.

Previous Project

Rebuilding Alliance

Next Project

Hamilton Benefits Group