Magazine for designers and web developers
  • fmcausby
  • KattyCat
  • hoho-lam
  • Laila
6 Collect me

Case Study: Searching for Syria by Google Brand Studio

Article by Awwwards Team in Web Design - September 20

Introduction

Searching for Syria is an interactive experience created in partnership with the UNHCR, Google and R/GA. It’s main purpose is to help people around the world gain a deeper understanding of, and re-engage with the Syrian refugee crisis by answering the top five questions the world is asking. It combines rich imagery, film, 360º photospheres, data visualisations and before/after comparisons – all threaded together into a compelling and seamless short form, editorial style narrative.

Searching for Syria

Background

The Syrian refugee crisis is the largest humanitarian crisis of our generation. Now in its seventh year it has caused untold devastation and chaos to the lives of more than five million people. Every refugee hoping to find shelter in the Middle East, Europe, or simply anywhere else that’s safe has left behind their home, their possessions, and their hopes and dreams for a stable future. The impact is hard to comprehend. Many factors make it hard for many people to understand and connect with what’s going on. Due to its extreme complexity, duration and the sheer amount of information available many are tuning out and experiencing a sense of ‘compassion fatigue’.

Searching for Syria

We created Searching for Syria as a response to this – a fresh, interactive approach that lets people quickly and easily explore the five top search queries people around the world are asking (based on Trends data in Google Search). Our ambition was to help people go beyond simply reading about the crisis into a deeper understanding whereby they would be more apt to take action by donating, joining or sharing. We set out to break down bias and commonly held misconceptions along the way creating a singular source of factual information users could digest in 5 mins or less on mobile, desktop or tablet.

We teamed up with Google to break through the compassion fatigue and the fear – to offer a new entry point that helps people re-engage with this conflict, consider it staggering human cost, and take action to address the urgent humanitarian needs

Christopher Reardon, chief of content production at UNHCR.Quote Source: The Drum

Storyline and innovation

This was a partnership built around data. Google understands what the world is searching for through Trends and Search data. In 2016 alone, there were 160 million search queries about Syria. We combed through the data and found that the searches could be broadly grouped into five main question types. These ranged from straightforward searches seeking to understand the crisis at a high level such as, “What was Syria like before the war?” to “What is going on in Syria?” and “What is a refugee?”, to the more empathetic and curious: “Where are refugees going” and “How can I help?”

In isolation, the answers to these questions are powerful – but brought together into one narrative, they become transformative. We worked with journalists and writers to bring this narrative to life through a series of seamless, long-scroll questions and answers. We opted for speed and simplicity playing into today’s user behaviors (specifically on mobile).

The experience is comprised of a series of snackable components all glued together along a narrative that include 360° photospheres with audio, rich imagery and film, interactive infographics and data visualizations, before-and-after image comparisons, personal stories and more.

Searching for Syria
Searching for Syria
Searching for Syria
Searching for Syria

The entire experience takes about 5 minutes from start to finish, or around 60 seconds for each question/answer.

Since the full-screen imagery and other media in the experience are somewhat expensive in terms of file-weight, we needed to find a way to avoid the size of this long-scroll page causing any lag or performance issues. To achieve this, we initially populated each section with copy only. Then, based on the user’s scroll movement, we dynamically loaded the images and content for each section slightly ahead of when it would be needed. We also unloaded assets after the user had scrolled passed them, in order to avoid memory allocation issues and keep their browser stable. If they returned to the section, we made use of browser caching to rapidly reload them.

Impact

The UNHCR is an organisation dedicated to saving lives, protecting rights and building a better future for refugees. This project was an important chance to further this mission, recapturing the world’s attention about the catastrophic humanitarian situation in Syria.

Searching for Syria helped to achieve this aim. Nearly 10% of the over 2 million people who visited the site took action by either donating, joining or sharing. Average time on site was over 2:43 minutes, with some spending more than 45 mins.

  • In its first few days, visitors to Searching for Syria spent a collective 10 years interacting with its content.
  • 30% of desktop users and 20% of mobile users visited the ‘donate’ page
  • Of the 44,000 clicks to the donate page of the site there were 3,200 donations: generating US$162,210 and growing
  • More than +8K press articles globally including The Verge, Le Monde, Der Spiegel, Brussels Times and World Economic Forum
  • The project generated the largest spike in new signatures to the #WithRefugees petition since it was launched in 2016
  • May 2017, when Searching for Syria was launched, was the second-highest viewing month for UNHCR YouTube video content in the history of their account.
  • May 2017 was the highest month in history for new subscribers to UNHCR's YouTube account
  • May 2017 was the highest month for video engagement in the history of the account, with 11,866 shares and 1,447 comments

Searching for Syria has engaged with audiences in some of the world’s most crucial markets, including countries that both donate to and host refugees, including the United States, the United Kingdom, Germany, France, Spain and Arabic-speaking nations across the Middle East and North Africa.

It has been an absolute privilege and honor to collaborate and partner with the UNHCR on such an important initiative. Without the incredible work and collaboration of R/GA we couldn’t have made this so a massive thanks to their entire team. It’s been such a memorable project in so many ways.

Technologies & Tools

In this project we used the following tools - Photoshop, Sketch, Illustrator and After Effects.

The entire site was built using a custom static site generator. Gulp automated the rendering of localised content (abstracted into YAML files) with templates built with Pug. We used D3 for data visualisations and Google's VR View library for embedded 360 views. The site was hosted on Google Cloud Platform which gave versioned green/blue deployments and resilience for large traffic spikes.

Company Bio

Google Brand Studio are a team of designers, engineers, producers, writers and makers who strive to solve the most important issues facing our users. We create and craft experiences with the aim of helping people understand how technology and our products can improve their daily lives. We are a team that strives to change the world for the better through technology.