Loading ...

Responses by Alex Bannwarth, art director; Laird Kruger, web developer and digital designer; Kunyang Ji, multimedia designer; and Tanner Latham, designer, Psychoactive Studios.

Background: Zendetta tells the story of Karam Alhamad, an activist from Syria who was arbitrarily detained by Bashar Al-Assad’s regime for his participation in the Arab Spring protests and later for his journalistic coverage of the Syrian Revolution. Between 2011 and 2014, he worked with the international press to document the destruction of Deir Ezzor, his home city. In that time, he survived several incarcerations, witnessing and enduring systemic human rights violations.

The goal of this site was to condense Karam’s story into a ten-minute interactive experience using visual storytelling to evoke feelings of passion, hope and empathy. We aimed to shed light on not only his personal story but the plight of the thousands of Syrians currently detained by the Al-Assad regime.

To make this story accessible to as many people as possible, we made both narration and text available in seven different languages. It was crucial for visitors to jump straight into the story, even if they had no prior knowledge of the situation or history of Syria.

Larger picture: 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.

Design core: From the beginning, we knew the illustrations would be the primary storytelling element and the focal point to engage the audience immediately. We used a rough, emotional art style reminiscent of expressionist paintings to make each slide feel like a memory. Strategic use of highlight color and a consistent sepia tone push the idea that these are sentimental memories from the arid regions of Eastern Syria.

Favorite details: From first hearing Karam’s story, we knew that the Palestine Branch chapter of the site had to be one of the most impactful—therefore, it was one of the most critical to get right. Portraying such horrific abuse in a way that fully conveyed 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 the Branch’s torture methods, we listened to many firsthand 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 Saydnaya Military Prison in Damascus, Syria, done by Amnesty International and Forensic Architecture. 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’s prisons.

We worked to depict these details as accurately and impactful as possible while keeping the scenes approachable and reverent. We chose a fish-eye perspective to show as much of the group cell as possible while emphasizing the feeling of claustrophobia from being crammed in the dark with many other detainees. Through the open door, we juxtaposed a silhouette of the torture, while the lights serve to highlight the prisoners’ malnourished figures. In the torture scene itself, the guards were kept faceless, and the scene hazy and overexposed. Together with the buzzing sound, these illustrate the disorientation and added psychological distress from enduring these harrowing interrogations while blindfolded. In the closing scene, we honor the deceased as Karam and his brother whisper their names. As their names overwhelm the screen, the site fades from the darkness of the prison to the brightness of the outside world, emphasizing the bittersweet feelings of surviving such agonizing circumstances.

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 that the finished chapter elicits has made it one of the most sentimentally significant for us.

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 writing and poetry. We felt they would make the perfect motif to bookend 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 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: while Karam survives, the emotional and military conflicts still rage on.

Challenges: Portraying such an intimate yet politically charged story as accurately as possible meant we needed to conduct extensive research. While we based many of the visuals and sounds on Karam’s photos, videos and firsthand 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 recordings, other recordings from Syria and the Levant, or based on firsthand accounts of refugees and former detainees. We also worked with a Syrian musician who had firsthand experience of the revolution to create a soundtrack that reflects the story’s cultural and emotional context.

Navigation structure: We wanted to immerse the audience in 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, making them more involved and empathetic toward the challenging subject matter. This was critical to tell this story as an interactive web experience rather than through a more passive form of media, such as an animation or a graphic novel. We designed a simple, consistent interaction that users only need to learn once, keeping other website elements familiar and intuitive to maintain focus on the illustrations and story.

Technology: Our artist hand painted every frame of the illustrations in Photoshop to make the animations feel more analog than digital. The site was created using React and Next.js with deployment through Vercel. The illustrated images and animated sprites featured in the story were developed in WebGL using three.js and 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, optimizing scene memory while ensuring the animations felt organic. We also implemented post-process effects such as film grain and blooms that we then used to create smooth, cinematic scene transitions.

For content management, we set up a multi-language Sanity studio, enabling Karam and his content editors to edit and control the site’s content—including articles, the gallery, chapter descriptions and reference links—in seven different languages. We also used Sanity to enable easy tweaking of the multilingual narration audio files and sprite coordinates.

Special technical features: Developing the website to work with seven languages—including Arabic, which reads right-to-left rather than left-to-right—presented us with a unique challenge in terms of UX/UI design and front-end and back-end development. For example, the touch interactions were all designed to work up and down rather than side to side, ensuring they would feel intuitive to speakers of all languages.

The layout and alignment of all text elements had to account for the dynamic language switching, maintaining a clear information hierarchy and responsiveness with their order reversed.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In