Loading ...

Responses by Robert Geiger, senior front-end developer, Lightburn; Todd Stone, senior vice president, executive creative director, Cramer-Krasselt; and Maxx Valenti, vice president, associate creative director, Cramer-Krasselt.

Background: Outboard motor manufacturer Mercury Marine had a new engine to unveil in early 2021. But this was no ordinary product launch: it was the world’s first 600-horsepower, V12 powerhead designed for an outboard—the Mercury V12 Verado. Up until this release, big boat manufacturers and buyers had limited options for powering their boats, because outboards lacked the total torque to drive heavier boats. The V12 Verado literally blows industry norms out of the proverbial water.

Boaters would have to see the level of power and technology that the Mercury V12 Verado has to believe it. Unfortunately, boat shows across the country were canceled due to COVID—making it impossible to experience the magnitude of this engine firsthand. Mercury had to find a different stage where it could tell its story. We helped create a digital experience as dynamic and beautiful as the engine itself, an immersive journey that educated users on every technical advancement. While the digital experience may not be quite as exciting as physically taking a V12 Verado out on the water, it certainly helps you grasp the magnitude of the groundbreaking engineering that went into designing this outboard and gives you a taste of what to expect when you actually can experience its power in real life.

Design core: This page was developed with two main objectives in mind: one, to be highly educational and teach people about the many engineering advancements that went into developing the V12 Verado and the functional benefits these innovations bring to the boating industry; and two, the site needed to be highly exciting, in lieu of the typical boat show. We needed to get people salivating at the idea of attaching a few of these beasts onto the back of their boat without ever seeing one in person. However, educational and exciting aren’t exactly the perfect pairing, so we needed to strike a balance that played to the strengths of both. We landed on a clean, tech-inspired design aesthetic that enabled us to visually amplify a dynamic scrolling animation of the V12 Verado and bold headlines while also serving up short, easy-to-digest technical copy points.

To help simplify a heavy load of information, we wanted the experience to take users on a linear journey through each technological advancement from powerhead to midsection to gear case to prop. It was designed to feel less like a website and more like a video experience that puts users in control of the action and enables them to play, interact and consume at their own speed without talking at them or overwhelming them with options. To give the page a sense of humanity and scale—and avoid inundating users with technical information—we broke up the experience with moody video waterscapes and aspirational headlines designed to immerse people in boating. By the time you get to the end of the page, you will have learned all of the high-level technical information that went into making this groundbreaking outboard and feel exhilarated about the notion of hooking one up to the back of your boat.

Challenges: There were quite a few challenging aspects to building this seemingly simple, single-page scrolling experience, from complex CAD animations to a responsive design that had to accommodate a constantly changing layout. But what we found to be the most interesting challenge was seamlessly fitting looping video animations into the frame-by-frame scroll animation and adjusting to the impact that had on the overall pacing of the journey. Since the core of the page is comprised of an animated outboard that moves around the page while type fades in and out, much like a video, pacing was everything. If you make an animation sequence too long and complex, people lose interest or get tired of scrolling to advance. But if you make the scroll too quick, you run the risk of people blowing past important information—or feeling frustrated that they can’t control the experience.

We’d never built an experience quite like this, where a frame-by-frame scrolling animation was the main driver of information, so the full process was a learning experience for everyone. We had a very collaborative team from the client, creative agency, development team and animation studio, so we were able to work together to leverage a range of expertise, share learnings and brainstorm solutions to problems as they arrived.

Navigation structure: The navigation—or in this case, the absence of much navigation—was an important design decision we made early in the process. With so many industry-first innovations, we felt that the best way for consumers to learn about the Verado was through a simple linear story. It begins with introducing the first-ever features the Verado offers for an outboard motor. As users scroll, they travel down the engine and learn more about the advanced midsection, two-speed transmission, an independently steerable gear case and prop. From there, you learn more about the exterior cowling, from color to noise management and then innovations in maintenance access points. It was a complex story to tell, and we felt the best way to tell it was to tell it simply.

Technology: The site utilizes a scroll-based timeline and animation written in JavaScript with the Greensock animation library. The animations are rendered within the browser’s native Canvas HTML5 graphics container.

It’s worth noting that this page demonstrates how far web technologies—especially those native to web browsers—have come in the last four-to-five years. This site could not have been easily achieved without modern browser standards and high-speed broadband access.

mercurymarine.com/en/us/v12

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In