Sciex Extraordinary Grace Campaign

Home / Sciex Extraordinary Grace Campaign

Introduction

Working again with Pebble Studios who provided the amazing Art Direction, Motion Graphics, and content, we developed this WebGL powered website for Sciex. ExtraordinaryGrace.com is an exploration into diversity in the Sciences. It invites scientists, and in particular young girls of colour, to share their unique perspective and experiences with Grace. By joining an unprecedented conversation in science, the experience aims to form an extensive, truly accurate picture of the industry.

The Experience

The website is split into sections which are:

  • About the project
  • Featured Voices – influencers sharing their experiences
  • Survey – an invitation to add your voice
  • Explorer¬† – a landscape of voices that have already been added

The Survey

For the Survey, we wanted to make the experience playful and enjoyable. Forms can be a bit dry, so the content was written to make it more conversational. This added an element of Storytelling which encouraged the user to complete all of the questions. Finally, they are able to record their own voice message and submit it to the database.

Here’s an example of the WebGL Particle Toybox we built to accompany each of the questions in the survey.

ExtraOrdinaryGrace.com

The Explorer

This section had previous Survey responses represented as particles in 3D space. The user is able to explore this space, click on an item, and listen to the voice recording. Using WebGL we were able to build an immersive experience that is fun to explore. Influencers were represented in the space along with other contributors who either left voice or text messages.

ExtraOrdinaryGrace.com

A responsive audio component brought the voice messages to life and using a fantastic online service called Subly the moderators were able to quickly generate subtitles to accompany the recordings.

ExtraOrdinaryGrace.com

Architecture

To enable the smooth running of the online campaign, we managed the architecture and services on the backend. We used Google Firebase for database, functions, and analytics, and used a headless-CMS service called Flamelink to give the moderators a friendly UI to work in. Flamelink uses your Google Firebase project to store its documents, so there is no need to write additional services to transform the data. We have been very happy with the workflow, and would highly recommend them to anyone who regularly uses Firebase and is looking for a client-friendly CMS to power the content delivery.

Conclusion

This was a highly satisfying project to work on, despite the very tight deadline, and long shifts. Web projects like this are challenging but ultimately, very rewarding to both us, and the end-user.

The campaign is ongoing, and we will publish the results here soon.

Here’s an in-depth usage video of the website:


 Previous  All works Next