What We Did
Zendetta tells the story of Karam Alhamad, an activist from Syria who joined the thousands of other Syrians marching in the streets of Deir Ezzor in the revolution against President Bashar al-Assad. From protestor to war journalist, political detainee, refugee and policy advocate, Karam’s story is just one of millions like it from the Syrian conflict which now spans over a decade.
The goal was to condense Karam’s story into a 10 minute interactive experience using visual storytelling that evokes feelings of passion, hope and empathy. We aimed to shed light on not only his personal story, but the plight of Syrians who are currently detained as a result of activism.
How We Did It
From the beginning, we knew the illustrations would be the primary story-telling element, and the main point of focus to immediately engage the audience. To make each slide feel like a memory, we used a rough and emotional art style reminiscent of expressionist paintings. A strategic use of highlight colour and a consistent sepia tone push the idea that these are sentimental memories from the arid regions of Eastern Syria. Our artist, Alex Bannwarth, drew every frame in Photoshop to make the animations feel more analog than digital. Using WebGL allowed us to make transitions smooth and cinematic, add texture around the site, and customise how each illustration moves.
Portraying such an intimate yet politically-charged story in as accurate a manner as possible meant it was critical to conduct extensive research. While we were able to base a lot of the visuals and sounds off of Karam’s own photos, videos and first hand accounts, we had to supplement our own research and reference gathering. We worked diligently to keep all aspects genuine: every sound is taken from Karam’s own recordings, other recordings from Syria/the Levant, or based on first hand accounts of refugees and former detainees. We also worked with a Syrian musician with first hand experience of the revolution to create a soundtrack that reflects the cultural and emotional context of the story.
Back End Technologies
The site was created using React.js and Next.js with deployment through Vercel. The illustrated images and animated sprites featured in the story were all developed in WebGL using Three.js (with react-three-fiber) with their motion controlled by react-spring. This let us create a custom sprite animation shader that we then used to implement dynamic frame durations and animation lifecycles - this optimised scene memory while ensuring that the animations felt organic. We also implemented post-processing effects such as film-grain and blooms that were then used to create smooth and cinematic scene transitions.
Language Integration
In order to make this story accessible to a global audience, both narration and text are available in 7 different languages. To make this possible, Karam worked with translators and voice actors from around the world through a CMS solution we created using Sanity.io.
Developing the website to work in multiple languages (including Arabic which reads right-to-left rather than left-to-right) was a unique challenge for us, in terms of UX/UI designs as well as front-end and back-end development. For example, the touch interactions were all designed to work up-and-down rather than side-to-side so as to feel intuitive to speakers of all languages.
The layout and alignment of all text elements had to account for the dynamic language switching, maintaining clear information hierarchy and responsiveness with their order reversed.
For content management, a multi-language Sanity.io studio was set up allowing Karam and his content editors to edit and control the content of the site (articles, gallery, chapter descriptions and reference links) in seven different languages. We also used Sanity to allow easy tweaking of the multi-lingual narration audio files and sprite coordinates.
Navigation
We wanted to immerse the audience into Karam’s story by making them actively engage with the narrative. By giving users the responsibility of advancing the story through touch-interactions, they take on a participatory role in the retelling of the events, with the aim of making them more involved and empathetic towards the challenging subject matter. This was a key reason for telling this story as an interactive web-experience rather than a more passive form of media such as an animation or graphic novel.
We designed a simple and consistent interaction that users only need to learn once, keeping other website elements familiar and intuitive so as to maintain focus on the illustrations and story.
The Palestine Branch
From first hearing Karam’s story, we knew that the Palestine Branch chapter had to be one of the most impactful, and therefore one of the most critical to get right. Portraying such horrifying abuse, in a way that fully conveys the magnitude and brutality of the situation while not being exploitative or disrespectful required a lot of careful consideration.
It was also one of the most challenging to research, illustrate and sound-design for. On top of Karam’s own detailed description of Cell 16 and of the Branch’s torture methods, we listened to many first hand accounts from other survivors of Syria’s inhumane prison network. We tracked down as much published media about these as we could, including sketches depicting various torture methods and a systematic audiovisual reconstruction of one such prison done by Amnesty International & Forensic Architecture. In order to do these events justice, we also looked through the “Caesar Photographs”, a collection of graphic post-mortem photographs documenting the mass deaths in Damascus’ prisons.
Getting client and user feedback as the chapter slowly came together with illustration, animation, ambient-sound and narration, we felt increasingly confident we were hitting the right tone. Seeing and feeling the kind of passionate response the finished chapter tends to elicit has made it one of the most sentimentally significant for many of us.
Symbolism
The symbolism of the bridge that runs through the entire story was another very significant detail. Bridges, water and the Euphrates river were a running theme throughout Karam’s own writing and poetry, and we felt they would make the perfect motif to book-end the experience. From the naivety and relatability of the opening scene as kids dive off the Deir Ezzor bridge, to becoming an emblem of the destruction and suffering experienced by Karam, his city and his country. In the last chapter, we superimpose Berlin’s Oberbaumbrücke bridge, which Karam lived next to after immigrating to Germany, with the reflection of the destroyed bridge in the water. This makes for a very bittersweet ending, as while Karam himself survived, the emotional and military conflicts still rage on.
The Zendetta Grant
In addition to raising awareness and educating people about the conflicts in Syria, this website also promotes a fund that we helped launch called the Zendetta Grant. This was created to give 100 Syrians the financial support to pay for their university applications and foreign language tests.
