Earlier this year, our team unveiled an ambitious project we’ve been working on for 18 months with Israel’s leading satellite TV provider, yes. The resulting experience, yes+, reimagines the entire yes TV service for tvOS in an inspiring way.
To do all this, we had to reimagine yes’ digital experience and graphic language, design a bilingual typeface and run iterative, time-compressed design processes.
As part of this process, we looked for ways to test a variation of the yes+ experience for an existing yes TV set top box and the current yes remote. We looked at several methods of prototyping TV apps, but didn’t find an adequate tool.
After looking at different ways of building this large-scale prototype, we decided to build a prototype generator with Framer Classic and the Framer Joystick library that would allow our design team to continue designing screens in Sketch, import them into Framer Classic and have the generator create an interactive, TV-remote-enabled prototype:
Here’s how we made that happen:
Framer Joystick
The Framer Joystick library provided the main interactive component we needed: a way to have an up, down, left, right, back, and forward interactions and focus movements in a prototype that would mimic TV menu systems and screens.
Using layer names to indicate interaction
First, we needed to provide a way for designers to describe the prototype’s interactivity in Sketch, in a way that would specify which thumbnails and buttons should lead to which screens. We were inspired by MacRabbit’s superb Slicy* tool, and chose to do this using layer names in Sketch. This way, each group of thumbnails named c## (lowercase c + number) became a side-scrolling collection in the Framer prototype, and each thumbnail or button which had a ->DestinationScreen in its name, became interactive and would transition to DestinationScreen when clicked.
Preparing to paste into Framer
To make transferring large numbers of art boards to Framer Classic easy, we flattened each symbol instance in Sketch and copy and pasted the entire set to Framer.
Generator
Our prototype generator in Framer was written in a straightforward way, iterated over all frames, built side-scrolling collections based on layer names, and connected all frames that have a ->DestinationScreen layer name to a function that transitions to a destination screen.
Supporting different TV remotes with Flirc
Our team tested several ways of connecting existing IR remotes to our Macs, but then discovered the wonderful Flirc (🥰). Using Flirc USB, we could easily connect the existing yes remote and bind its relevant keys to the keyboard keys recognized by the prototype. Seriously, the whole thing took five minutes from unboxing to fully running with our TV remote.
Reflections
Looking back at this experience, taking a prototype generator approach was highly beneficial for the project: A creative technologist could focus on writing the generation code while designers on the team focused on creating an elaborate series of screens and connecting them via art board and layer names, which in turn created the entire prototype.
Further reading
To learn more about yes+, check out our jam-packed case on designit.com
If you live in Israel, we highly recommend checking out yes+ on the App Store.
