Extraordinary Grace

June 7, 2021

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
  • Keynote - Grace's virtual talk where she discusses insights from the project

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.

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.

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.

The Keynote

Pebble Studios produced an amazing film with Grace as a virtual human giving a talk on the project. The results are stunning, and as part of the launch, we created a section for the website that is a timeline of Grace's story. We used a scrolling mechanism to reveal the sections of the timeline and included the same particle effects that made up the Survey section.

Image sequences from the Keynote animate as the user scrolls
Particle images coalesced as the user scrolled the page

Here's a video of the Keynote section from start to finish. Remember, the user is scrolling the page up and down to progress the story.

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.

Like what you see?
We're always happy to talk so get in touch for a free consultation
Hello