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 website is split into sections which are:
The visual design and art direction was handled by Nick Koch and we spent a long time together working on feasibility and prototyping of the more dynamic, generative elements of the project. You can view Nick's case study here: https://www.nickoch.com/case-studies/extraordinary-grace
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.
.gif)
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.
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.
.gif)
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.
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.
