How to Quickly Launch a Site Tied to Super Bowl

How to Quickly Launch a Site Tied to Super Bowl

As space geeks, we were over the moon when our friends at Known tagged us to do web development for a campaign around a mission to space.

There are many ways to launch a brand. Most don’t involve a mission to space.  

The trip of a lifetime

You may have seen the Super Bowl ad offering a trip to space. It was part of SpaceX’s Inspiration4 mission, the first ever all-civilian mission to space and brainchild of Jared Isaacman, the CEO of Shift4 Payments, a payment processing company. Isaacman partnered with SpaceX to book a 4-seat flight. He would fill one seat and donate the other three: one to a healthcare worker at St. Jude Children’s Research Hospital, and the others to contest winners who either donate to St. Jude’s or set up an online shop with Shift4Shop, an eCommerce platform owned by Shift4 Payments.  

Two months to launch

The Super Bowl spot would point to a website where people could learn about the mission, donate to St. Jude’s or start creating a Shift4Shop online store. 

“Two months to do a full rebrand, a Super Bowl spot and cross-channel media buys was a challenge we were up for, with the right web design and development partner,” said Jody Friedericks, SVP of Brand Creative at Known, the agency that handled the planning, strategy, creative and media buying for the campaign. 

“We liked Big Human’s work for Great Big Story. When we visited their website to consider them as a partner for this project, I saw SpaceX listed on their client wishlist. I said to my partner, ‘Obviously, they’re the right people for the job.’ Everything felt meant to be.”

How we pulled it off

The campaign launched successfully during the Super Bowl. Without a hitch, millions were able to visit and, donate to St. Jude's and enter the contests. But it was no easy feat. 

Here’s a list of what made this possible in such a tight timeframe. 

1. Have a clear, time-based goal.

Go live by the Super Bowl, from the advertising to the website. NBD.

2. Set clear swim lanes.

Agency infighting can slow projects down and create a headache for everyone. We had none of that, with Known handling brand and advertising, while Big Human owned the website design and development. “We all knew our roles and responsibilities, which made for a very seamless approval process,” said Friedericks. “Everyone knew their part from the beginning.” 

3. Identify key decision makers across all stakeholders.

This project had many stakeholders, including very high-profile brands. This included: Shift4, Shift4Shop, SpaceX, NASA, St. Jude’s, Known and ourselves. Early on, we identified the primary stakeholder from each brand and got them in a (virtual) room to confirm that person had decision-making power for their group. “This prevented a lot of design-by-committee that can slow things down,” said Big Human’s Product Manager, Mike Seidler. “We also made sure to bring SpaceX in early, and were transparent about usage of their assets.” 

4. Work with good agency partners. 

Known knew that to get the website built in time, Big Human needed the brand guidelines as quickly as possible. It took them less than two weeks to send them over, following the project kickoff. This is unheard of, and it was much appreciated by our team. It also allowed them to shift focus to the advertising and media. 

5. Communicate constantly and openly.

This is necessary for any project to go smoothly, but when you add high visibility and tight timeframes it matters even more. With so many moving parts, it was critical to keep the lines of communication open across the different teams, and with the clients. Our lead client took an active role, facilitating solutions and working with us to move things forward. 

6. Act as one internal team.

Big Human follows this as a rule on every project, but it was especially critical for this one. Our designers, web developers and product managers worked together as one team with a dedicated mission. This included daily updates, transparent communication, honesty about potential pitfalls, and a positive attitude to keep things moving. 

Our work: website design and development 

The major pieces of Big Human’s contribution to the campaign included:

  • Building the entire website. This meant taking the campaign concept and constructing a sleek, mobile-friendly site for people to learn about the mission and participate in the contests. We incorporated the mission’s visual ID from Known, and SpaceX’s brand assets. We also designed all navigation, rollover effects and an animated countdown to crew selection.

  • Designing a donation tracker on Together with St. Jude, we created a beautiful donation tracker to show progress toward the goal of raising $100M.

  • Planning for 1M website visits on launch day. Around 100M viewers were expected to watch the Super Bowl, so the site needed to handle a large amount of traffic without crashing. We chose to host it on S3, which powers everything on the internet. If S3 goes down, most of the internet we use goes down, too. So we knew this wasn’t likely. :)

  • Reskinning with new branding. For visitors who went from to, we presented a fully reskinned site to reveal the new brand. This included updating the homepage, navigation, Features and Pricing pages.

  • A/B testing campaign landing pages to maximize contest entries. For people entering the contest by setting up an online shop, we A/B tested the landing pages on Shift4Shop for a seamless user journey. We created multiple versions of those landing pages, and they were tested to handle over 1 million visitors a day. 

Results so far

Together with our partners at Known and Shift4, the launch was a huge success. The Inspiration4 site received 200,000 visitors per hour during the Superbowl, with no downtime. The Shift4Shop site gained a ton of new customers, and continues to do so. St. Jude’s has raised millions of dollars toward its $100M goal. A ton of press was generated around the mission itself. Oh, and Elon tweeted about it. 

And this is just Phase I. 

If you need a speedy website, built to handle a sudden and extreme flood of know who to call. 😉

up next
Cover - Design Jargon 2x
April 8, 2021


Product Design Jargon Buster

Image - Accessibility Part 1 - square
April 8, 2021

Accessibility, Design, Tips

Web Accessibility Part 1: Design