How the advertising industry pioneered the early internet
Website design, SVG animation
Business case
WP Engine has prioritized and cultivated an Agency Partner Program in an effort to support a massive customer base with exponential revenue growth attached to it.
The make|SHIFT documentary caters to that agency audience, tells their story, and celebrates how their contributions shape and respond to consumers in realtime through the internet. Interviews feature the creative minds who helped shift internet advertising from banner ads and popups to interactive experiences like Burger King's Subservient Chicken and TD Ameritrade's blockchain ad.
The team
Sr. Director, Brand
Executive Producer
Developer
Designer
Ideation and planning
WP Engine partnered with Hey Let's Go and September Club to film and produce the documentary. Execution of the website should follow their editing style, typography, lower thirds, and other visually impactful queues from the film.
We identified a clear set of goals for the website:
- » The site will capture lead information of people who want to view the documentary, since this audience is highly valuable.
- » The documentary video will stream through the website, and access to it must be gated and protected.
- » Users should be able to register and watch the movie as effortlessly as possible.
Seamless registration and video access
A primary goal of the documentary site was lead generation. Users would have to provide some contact information via a web form, then we would email them a "magic link" to watch the video.
This documentary site was built on WordPress, like most of our other marketing sites. We already had a custom HubSpot integration that accepted our form submissions, so connecting into known workflows was beneficial.
- » Form submission → Email → Video access
Some key components I worked on…
Overall look and feel
I was responsible for the design direction and UX of the entire website, working collaboratively with stakeholders and the developer. There were compromises with stakeholder desires for an engaging experience to support the excitement of the film while keeping the interface simple enough for maximum lead generation.
Intro animation prototype
We wanted to reveal the website after a full screen logo animation. I created a prototype to convey the idea, then provided a Codepen to our developer to fine-tune and implement.
Navigation animations
I also prototyped menu hover/focus animations to bring some whimsy and color to the navigation component, which was implemented and honed by our developer.
What I learned
It was energizing to work with external creatives and to play with a new brand that is different from WP Engine's core identity. I was able to explore new layout ideas and typography outside of our typical brand guidelines, and I tinkered with hand-coding SVG animations.
Awards & accolades
- 🏆 2020 Platinum Winner Hermes Creative Awards
- 🏆 2020 Excellence Winner Videographer Awards
- 📺 Wide release via streaming services