Channel 4 Television
.svg){kind=avatar}
UX Prototyper
Framer X, Sketch
The All4 app was transitioning to a new 1080 design featuring larger and more impactful hero imagery, with rows of scrollable carousels. User feedback for the All4 app had traditionally been gathered using Principle (a Mac animation tool) in combination with a keyboard and mouse in moderated user test sessions. Framer presented an opportunity to build a prototype that was closer to the real thing, as it was possible to interface with a real remote control.
My role therefore was to build a multi-page prototype, powered by real data that was pulled from the existing app into the Hero section and Carousel rows. The main aim was to be able to user test the app in moderated user test sessions, using a real remote control.
Before any prototyping work could begin, I needed to find the most suitable remote control that would work with Framer X. I spent the first week testing remotes and documenting the compatibility of each remote I was testing. Some worked better than others; we found that the remote that worked the best was the Amazon Fire TV remote. Fortunately, it was also one of the easiest remotes for a user to use due to the simple button layout.
The next challenge was how to setup Framer X's navigation system to support TV focus state behaviour and to work with multiple pages. As Framer is a relatively new tool, there is little to no guidance on how to approach TV prototyping, so lots of experimentation followed trying to figure out the most efficient way to navigate between pages and build components. Thankfully, Framer has various plugins that support this, so I was able to map the input from the remote control to a simple test page.
It became clear as the project progressed that component-based design was key to building an accurate and responsive prototype. I therefore had to make sure that components were published on the internal Framer Store so that they were available for other team members and could be inserted into new pages with ease.
• 1x UX Team & 1x UX Designer (me)
• 1x Development team
• 1x Product manager
• 1x Business analyst
The team worked in Agile sprints. There were regular catchups with the Lead UX Designer, other UX designers, product manager and developers.
I came across several challenges while building the prototype. Due to the fact that Framer does not currently have a Pages feature, each page had to be on a single canvas. This presented some challenges with the performance of the prototype, which was mitigated somewhat by using the component library that was published on the Framer store. This, coupled with the unpredictable scrolling behaviour meant that I had to customise Framer's scroll component in order to get closer to the expected behaviour.
Framer X allowed us to build a high fidelity prototype that was almost indistinguishable from the real thing. A subsequent user test session held at a designated user test facility in Farringdon proved successful in validating some of our original hypotheses about user preference and behaviour. It also allowed us to test previously untested variations of the All4+ offering on the All4 homepage, brandhub page and menu.
