Use cases , Developers

The Twelve use case

Company overview 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 ...

Company overview

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.

Company problem

Cloudoki 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. Cloudoki were more than happy to take on this exciting project for a fan favorite show.

Work carried out by Cloudoki

Because this was solely a design project, it was relatively small scale, being led by Bruno Dobres who 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.

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!

Misc

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

Related Articles

Developers Engineer Write Up

Deploying NestJS Microservices to AWS ECS with Pulumi IaC

Let’s see how we can deploy NestJS microservices with multiple environments to ECS using...

Read more
CI/CD
Developers DevOps

What is CI/CD? A Guide to Continuous Integration & Continuous Delivery

Learn how CI/CD can improve code quality, enhance collaboration, and accelerate time-to-ma...

Read more
AI Developers Engineer Write Up

Build a Powerful Q&A Bot with LLama3, LangChain & Supabase (Local Setup)

Harness the power of LLama3 with LangChain & Supabase to create a smart Q&A bot. This guid...

Read more
Demystifying AI
AI Developers

Demystifying AI: The Power of Simplification

Unleash AI's power without the hassle. Learn how to simplify complex AI tasks through easy...

Read more