• Year: 2018
• Role: Senior Interaction designer at Accedo
• Location: Hong Kong

Client

Channel 4 is a British public-service free-to-air television network headquartered in London, United Kingdom.
The channel was established to provide a fourth television service to the United Kingdom in addition to the licence-funded BBC One and BBC Two, and the single commercial broadcasting network ITV.

Context

Channel 4 contacted Accedo during summer 2018 as they needed prototypes to test several variations of a new design for their Amazon Fire TV app. These prototypes had to be made so that they can be interacted with a remote control during Usability Testing sessions

Mission

The goal was to prototype the navigation interactions on a program detail page (after a user has selected a program).
Especially the transitions from the initial state of the landing screen to the state 2, after user has pressed down or on the play button. While the initial state was displaying prominently a hero image representative of the content, the second state was designed to allow navigation through seasons/series and episodes.

Multiple scenarios

There were multiple scenarios that the team in UK wanted to test with users:

• Scenario 1: when transitioning to state 2, the focus lands on the series stack
• Scenario 2: when transitioning to state 2, the focus lands on the episode stack
• Scenario 3: when transitioning to state 2, the focus lands on the episode stack and the series stack is displayed on the right
• Scenario 4: user has already started to watch the content, so the “Play” button should indicate which episode to resume and the episode stack should show the episode to be resumed in the first position (with the previous one dimmed out and partially masked by the upper part of the screen). The series’ stack is also updated accordingly. Episodes that have already been watched are displayed in black & white.
• Scenario 5: to get back to state 1, users can press up AND the “Back” button.

The tools of the trade

Framer Classic

As per Channel 4’s request, I built those prototypes using Framer Classic (Framer X hadn’t been released yet at that time). I recreated the designs within Framer Classic’s ‘Design’ tab. Then coded the logic within the ‘Code’ tab. Some prototypes were eventually made with more than 800 lines of code!

Focus Manager Module

As the logic used for managing focus on TV apps is quite complex and time consuming to write, I used a ‘Focus Manager’ module available on GitHub. It was also clearly explained by its author on a Medium post.

Key Binding for Remote Control

When building the prototypes, I could simulate the remote control keys with my computer’s keyboard. However, since the prototypes had to be tested in a setting as close as possible to reality, I had to use a solution to bind keyboard keys with remote control keys. To do so, I resorted to ControllerMate and tinkered with its node-based interface.

Testing the prototype with a remote control

The team at Channel 4 successfully led the user tests based on the prototypes I delivered. They could gather some user feedbacks and eventually asked me to create a couple more prototypes with some modifications so that they can test again and get more clarity on the best design to go for.

In total, I delivered 16 Framer prototypes.