Bible Project

Powering an animation studio to full-scale EdTech platform

48,000

New visitors in 2 weeks

A Small Studio with a Big Announcement

The BibleProject.com is a non-profit known for creating high-quality videos for people who want to understand the literary, historical, and spiritual significance of the Bible. The company is transitioning from being a small animation studio to becoming a full-scale EdTech platform. They came to Underbelly for help announcing this as part of their end-of-year initiative. As a fully crowd-funded organization, the end-of-year initiative is crucial to the success of the company because it raises a lot of awareness among its supporters.

‍

Illuminating the Problem

A multidisciplinary team from Underbelly conducted a three-day kickoff with key stakeholders from the BibleProject to gain a shared understanding of the project’s history, goals, challenges, inspiration, and opportunities. We aligned on a plan to first build anticipation and excitement around this new development with a Hype video and website, then later announce the details as part of their end-of-year initiative.

We created a series of animated patterns inspired by stained glass, illuminated manuscripts, and street art.

Colors taking shape

After the kickoff, we refined the visuals for the initiative. We needed a highly adaptable theme that could be applied to video, web, and other promotional content. We explored tools and techniques for incorporating animation into a physical space. This would allow us to showcase the BibleProject’s existing beautiful artwork in a new and exciting way. The concept of colorful projections interacting with real people presented an excellent metaphor for the BibleProject’s mission of bringing knowledge and hope to people through technology, art, and film. We created a series of animated patterns inspired by stained glass, illuminated manuscripts, and street art. The patterns would grow and expand to bring color, energy, and light to the darkness. We included imagery that speaks to the historic relationship between technology and the Bible— from the earliest days of the printing press to the apps and websites of today.

Setting the stage

After thorough scouting, we found the perfect location for the shoot. U West contains textured white walls, interesting structures, and a big open floor plan that offered flexibility with how the projections could move and grow. With the location chosen, we gathered measurements and created a plan for how we saw the projections moving and interacting with the space.

Lights, Camera, Projection!

For the shoot, we knew we’d need a versatile rig that could hold the weight of a heavy-duty projector while allowing us to adjust the position and angle easily. This ensured we could perfectly place projections without any unwanted spill on the actors. Lighting the scenes was an intriguing challenge because projections are designed to work best in the dark. We had to strategically place lights, block windows, and bounce to fill talent to keep a natural light without washing out the projections. For some scenes, we used the projector to light key areas by including white and black in the projected designs.

Bringing it all together with Development

The development team worked closely with design early on to help generate fun, interesting, and feasible concepts. The spotlight hover effect provided a way to incorporate the designs from the projections into the site without compromising the clear messaging of the content. We used Framer Motion to execute the spotlight and most of the other site animations. Throughout the sites, we include features that allow users to hear the founders' impassioned voices while accompanying text appears in sync with the audio. To achieve this effect, we used Google’s voice-to-text API to convert the audio to text in a JSON formatted file. We then used those files along with HTML5 Audio to sync the time of the playing clip with time-stamped words in the file. With all these different components, site management became very important. We used React Context to manage the states for all components dealing with sound and video. There were a lot of opportunities to play and experiment in this project.

Results

The videos and websites we created for the BibleProject’s end-of-year initiative were a huge success, receiving far more engagement than was expected. The Hype website received over 48,000 visitors during its short two-week lifespan with 21% of users opting in to receive the announcement email. Since the campaign launched in 2021, the BibleProject has expanded its EdTech platform to include an app, classroom beta, more podcasts, and an ever-growing animation library, thanks to generous contributions from supporters.

Lighting up screens

For the hype and announcement websites, we were able to incorporate the visual theme in a way that was interactive and immersive. Through page loading, transitions, and hover states, we presented the viewer with something unexpected and delightful.

A strategic design

The two websites (Hype & Announcement) would have a relationship like that of a tunnel leading to a bright open space. We used a dark interface for the Hype site and presented the information in measured stages. This approach allowed us to control the pacing of the journey and encourage the viewer to discover content and experience each section in a focused and intimate way. The Announcement page was light, open, and airy— enabling users to freely explore at their own pace.