Transparency International is an independent and politically neutral organization dedicated to exposing and eliminating corruption. Founded over 20 years ago, the organization is active in over 100 countries around the world.

The decades of secrecy and impunity within which Arab governments conducted themselves have resulted in political upheaval across the region. This has given rise to a new generation of activists that are eager to speak out against corruption and demand a more open, just and transparent society.

Transparency International wanted to tell their stories and inspire everyday people in the affected countries to take action.

Transparency International, together with Egypt-based production company MIND, undertook the difficult task of documenting the lives of whistleblowers, activists and victims of corruption in Egypt, Morocco, Palestine and Yemen during an extremely volatile couple of weeks.

Helios was tasked with shaping these stories and turning them into an immersive online experience, complete with country specific activist resources. And it had to work in both English and Arabic.

We started by building a structure that seamlessly blends text, cinemagraphs and fullscreen video into a semi-linear experience. The experience is navigated by scrolling through layers of information, elegantly transitioning from story to story. The larger narrative was organized by country and area of corruption and then split into the shorter and more digestible stories of individual activists. A side menu shows the users progress and allows them to switch between different stories and countries.

At any point in the experience a collapsible resource page can be activate from the side menu. The resource page allows users to access country-specific resources and and compiles social media feeds from relevant organizations. This allows for easy customization and updates of the information without having to use a dedicated Content Management System.

Integration with YouTube, Facebook and Twitter allows the experience to act as a catalyst, connecting activists and building communities around common causes.

This project offered a few unique challenges. We wanted to display large, interesting visuals and, at the same time, had to pack in a whole lot of information. We needed to seamlessly transition media (supporting back to IE8) and integrate with different social media APIs. Most of all, everyone had to deal with the fact that it was to be built in both English and Arabic—a right to left reading language with a non-Latin character set that none of us speak.

In the end the effort was well worth it: The site’s launch increased not only the visibility of Transparency International’s efforts in the region but boosted their Arabic Facebook following from 2,000 to 57,000 in a matter of days.