A few weeks ago, we wrote a blog post on the code behind our new homepage, which features a fullscreen background video. As a video hosting company, we were excited to give video a prominent role on the page and allow our product to speak for itself. Like any design decision, however, the choice to use a background video was the result of much deliberation.
Liat, who designed Wistia's homepage, spent a lot of time thinking about what purpose the video was serving:
As we gather data and iterate accordingly on our own homepage, we became curious about why other companies have adopted this design choice and how they executed it successfully.
So we asked them.
Sandboxx: communicating a compelling vision
Why: For Sandboxx, a company that uses mobile technology to simplify communication between military and veteran communities, the decision to use a background video was largely influenced by data. After examining the popularity of each page on their website, Sandboxx realized that their audience mostly cared about their homepage and their team page.
"Our data suggested that the vision and the people behind it were most important to our visitors," commented Padmanabhan Ramaswamy (Swamy), the CTO of the company. With the background video, Sandboxx could show visitors what their company and product were about before throwing product names at them. "Product names aren't relatable," said Swamy. "Without having to scroll or navigate around clutter, our visitors can get a good idea of what we're doing in a visually appealing and memorable way. That's especially important for a company at our stage. We want to immerse potential investors in our vision right away."
How: Sandboxx hired Pitchslap.tv, a video production company based in Brooklyn, New York, to shoot the footage for their background video. All of the shots are highlights from a compelling two-minute video that Pitchslap.tv also produced for Sandboxx's website. "It was a three-day shoot," said Swamy. "Financially, it was a stretch, but we figured it was worth hiring professionals for such a forward-facing video."
Madein: conveying context efficiently
Why: Madein celebrates the production of artisanal goods around the world by highlighting artisans and their creative spaces in prominent background videos at the top of each product's page. "The background videos begin the story of each store and their products," explained Sen Sugano, head of Business Development at Madein. "They provide context and allow viewers to experience the store without having to travel there."
Sen also described the relative ease of producing a background video as a major draw. "We've been working with B-roll for some time, so we've learned how to produce it very quickly. The videos are edited the day of the shoot, and they're almost always embedded on our website the next day," Sen commented. Without any need for scripting, set design, or meticulous editing, their video production process is lean and efficient, which allows for rapid updating of their website.
How: Lucy Murray Willis, Madein's videographer and photographer, visits each store and interviews the artisans with Madein's co-founder, Daishin Sugano. "Lucy films the shop in action, takes some photos and edits the video all in one day, while Daishin interviews and selects the products with the store owners," explained Sen. As for gear, she shoots with a Canon 550d, and mainly her 50mm lens.
Rocketboard: clarifying technology
Why: The first iteration of Rocketboard's home page featured a combination of text and images, and it left many visitors confused about the product (an app that lets users share their whiteboards with teammates in real time). Some honest feedback from friends and strangers at coffee shops led Joe Lemay, CEO of Rocketboard, to consider a new design. "People were confused until they clicked on the demo video and watched for at least 20 seconds,” Joe commented. "At that point, they were surprised and delighted, but most people didn't get that far."
Once the Rocketboard team scrapped the conventional website paradigm in favor of a silent background video with an obvious call to action (a green play button), they saw a 3x increase in their signup rate. "I want visitors to have a basic 'aha moment' in the first 3 seconds, without clicking or reading a word." Joe explains. "Rocketboard is a new augmented reality experience that is tedious to describe, but simple to show. So video really is the key."
How: Joe hired a local freelance videographer, Cuyler Bryant, to create his background video and demo video. "I saw his work on another site, and tracked him down on Vimeo," Joe said. "He was an easy choice. He offered a reasonable price and a vision I really agreed with." Cuyler shot in three locations over the course of one day, with the help of an assistant, and he recorded his own voice for the demo video's voice-over.
Beyond creating a cool aesthetic effect, background videos offer a dynamic view into your brand and vision before visitors even press play. This is an exciting new technique to have in your video toolbelt, and it doesn't have to be intimidating.
We wrote a post a couple weeks back about the technical process of adding a background video to your homepage, if you're interested in trying it out!
Have you seen any great background videos in action lately? When do you think a background video is a good design decision, and when is it distracting?