Inspiration4
Launching the first all-civilian mission to space
Shift4Shop is a turnkey eCommerce solution for individuals and businesses to sell online. To promote its new brand while raising money for a worthy charity, the company partnered with SpaceX to organize a four-person mission to space with an all-civilian crew. The mission’s name, Inspiration4, recognizes the four-person crew that is raising awareness and funds for St. Jude Children’s Research Hospital.
This milestone represents a new era for human spaceflight and exploration. Even though we couldn’t reserve seats for ourselves on the flight, the next best thing was designing and developing the website for the historic mission and the brand behind it.
- Discovery
- Website Design
- Launch
- Product Design
- Web Development
Discovery
Setting up our goal posts
The campaign would go live during the Super Bowl, with a 30-second ad made by Known, our partner agency. The ad would direct people to the website for a chance to join the crew. Tying the campaign to the Super Bowl meant we had a clear, immovable timeline from the start.
Many high-visibility brands and stakeholders were involved, including Shift4, the publicly listed parent company of Shift4Shop, as well as SpaceX, NASA, St. Jude Children’s Research Hospital, agency partners, and more. So, product definition and asset management were especially critical for the project’s success.
Project Deliverables
UX: Identify key pages for the Inspiration4 mission site
Website Design: Apply approved branding and promotional assets for Shift4Shop’s site
Website Development: Develop approved designs in fully responsive front-end markup for both sites
Product Definition
Two sites, one journey
The campaign involved two separate but connected websites, each with its own set of requirements.
The mission and campaign site was Inspiration4.com.
The mission’s site needed to be mobile-friendly and to support a sudden surge of traffic from an estimated 100 million Super Bowl viewers, plus press and other paid media.
It also had to offer an intuitive site experience for visitors to: learn about the mission and the contest, track campaign and launch milestones, enter the contest for a chance to win a seat, meet the crew as it came together, track donations to St. Jude, and seamlessly connect to the Shift4Shop site.
The Shift4Shop site workstream involved a reskinning of an existing site with a new visual identity designed by Known. It required identifying key pages on the existing site to reskin, taking into account the site’s navigation and overall user experience. It also involved designing landing pages for people entering from Inspiration4.com, to enter the contest.
Design
Memorable and historic — yet modern
Inspiration4: A bold, responsive site
Once we received the visual ID and brand guidelines from our partner agency, we started building the site. For a mission of such historic significance (to put it lightly), we knew the homepage needed to welcome visitors with a sudden shift in perspective. After experimenting with many different styles of headers and intros, we selected aerial footage of the Earth from space with a rotating Dragon capsule. The capsule was designed by the SpaceX team, so we worked with placeholder elements until we received their brand assets.
Interactive progress trackers
The audience would include diehard space lovers who would be tracking every milestone along the way to the mission’s launch. So we designed an interactive yet minimalist timeline of the key dates, leaving room for flexibility so as not to over-commit. We also designed a donation tracker together with St. Jude to show progress toward their fundraising goal of $200M.
Shift4Shop: A sleek redesign
The Shift4Shop site also required a handover of brand guidelines, but this time they were applied to a reskinning of a pre-existing site. This experience had to accommodate those who went from Inspiration4.com to Shift4Shop.com in order to create their own site and enter the contest. For a seamless transition, we updated the navigation and top-level pages including the homepage, Features, and Pricing.
Development
Putting things to the test
To handle a sudden surge of traffic during the Super Bowl, we used a static build for the Inspiration4 site launch, and hosted it on S3 to guarantee there would be no crashing on game day. We also used NextJS, ReactJS, StyledComponents, and Prismic for Inspiration4’s CMS, which we’ll continue to update as the project evolves over the coming months.
Maximizing contest entries meant creating a smooth, simple user journey between Inspiration4.com and Shift4Shop.com. So, we A/B tested many different landing pages which were also tested to handle over 1 million visitors a day.
Launch
Early success, continued momentum 🚀
The Inspiration4 site received 200,000 visitors per hour during the Super Bowl, with no downtime. Shift4Shop gained 15,000 new customers in the first two months following launch. St. Jude raised over $13M toward its $100M goal, in the same time period.
This site launch was a huge success; we can’t wait to see where things go from here.
For an inside look at the project process, check out our blog post, How to Quickly Launch a Site Tied to Super Bowl. Special thank you to our partner on this project, Known.
Results
The site launch was a huge success
The Inspiration4 site received 200,000 visitors per hour during the Super Bowl, with no downtime
Shift4Shop gained 15,000 new customers in the first two months following launch
St. Jude raised over $13M toward its $100M goal, in the same time period
For an inside look at the project process, check out our blog post, How to Quickly Launch a Site Tied to Super Bowl.
We can’t wait to see where things go from here.
Special thank you to our partner on this project, Known.
