UX/UI

The Twelve

Discover how we helped the famous Flemish-language television series, The Twelve, by designing and creating interfaces used in the show.

The Twelve

The Twelve is a 2019 Flemish-language television series created by Sanne Nuyens and Bert Van Dael. A synopsis of the show details that “Twelve are called for jury duty for an unusual murder case: Fri Palmers is a school headmistress accused of two murders, one of which is her own child. As the trial progresses, each jury member reacts differently emotionally to the events of the case as presented by the prosecutor. It is their difficult job to decide on the guilt or the innocence of the accused.”  The show aired on Netflix.

Challenges for The Twelve

Cyrex was contracted by a producer company that was working on props for The Twelve and needed to create “real” interfaces that would appear on digital screens in the show. Rather than add digital interfaces in post production, the producers needed the actors to manipulate in real-time during the shooting. Cyrex were more than happy to take on this exciting project for a fan favorite show.

Solution

Because this was solely a design project, it was relatively small scale, with Bruno Dobres and Rita Branco were the only ones that worked on creating these interfaces. First they had to read the scripts and get a feeling from the producer on what they wanted the screens to show, the interactions the actors should do, what was actually to be shown on camera and so on. They also had to make sure that all the interactions would mimic the real ones on smartphones and computers: from typing, swiping, clicking, unlocking screens etc. while ensuring that those resembled the ‘real deal’ as much as possible.

Thirdly, most of the required interfaces were supposed to copy known apps – i.e. Facebook, Whatsapp, Tinder. So a part of their job was to create these app interfaces, which would replicate the real apps without being an outright copy. Thus they needed different branding (since the show didn’t have the rights to show these apps officially). After this, they created the mock-up screens and connected all the different interactions between them, so that in the end they would have a real working prototype that would look and feel like using a real app.

Challenges faced

The first major challenge was to find the “perfect” tool to create these prototypes. There are several tools in the market, however all of them have their pros and cons, but in the end the team found a good match in Framer.

The second biggest challenge was to create prototypes for both Android and IOS – rendering the prototype was different for both OS’s, and interactions behaved differently if used in the browser on or the Framer App. A couple of times they had to find a compromise between what could be tested as a prototype and what could be filmed (but the end result always matched the script requirements).

The third major challenge was working to a strict deadline but being flexible enough to change. Because we are talking about live shooting of a tv series, things have to be ready by the shooting day, but they can also easily change the day before. So, whenever they ask for last minute changes, we had to make sure those were ready before their cameras started rolling.

Misc

  • Stack: Framer App
  • Team: Variable between +2 people
  • Duration: 3 months

Result

Despite these challenges the team were highly successful with this project and were able to ensure they met all the necessary requirements and delivered on time. It was exciting to work on a television project and being able to see our hard work on screen!

Related Works

BNP Paribas Fortis
Finance SaaS UX/UI

BNP Paribas Fortis

We've designed and built a PSD2 compliant Developer Portal for BNP Paribas Fortis. The Ope...

Read more
Vito Remote Sensing
SaaS UX/UI

VITO Remote Sensing

Find out how we helped develop the perfect Remote Sensing SaaS Platform for VITO Remote Se...

Read more
SaaS Apps UX/UI

MobieTrain

Through MobieTrain, learning is fun again with advanced gamified micro-learning techniques...

Read more
PRACE
SaaS UX/UI

PRACE

Discover how we helped PRACE optimize their workflow by developing the perfect web-applica...

Read more