Responses by Christian Mezöfi, head of design, dentsuACHTUNG!

Background: With the launch of the Propel motor brand as the first true brand in electric boat engines, we wanted the site to help in claiming mental leadership in a market about to be disrupted. Amsterdam City Council decided to ban all petrol- and diesel-powered boats from the city center by 2025. We believe this is just a start, and more cities within the Netherlands and outside will follow. More people will be interested in acquiring a boat now that it will become environmentally friendly, so our target group is huge. We need to cater to all adults, beginners and professionals.

Navigation structure: Some of our users might not have in-depth knowledge about what they want or need, and others have a pretty good idea of what they are after. With this in mind, we needed to structure the site and navigation to be as clear and informative as possible. Less is definitely more in this case.

On the landing page, we focus on the brand values with an option to test drive a boat with a Propel motor for yourself. Then, for Propel’s two products, you can either click through on the landing page or use the top navigation.

Special navigational features: Once you’re on one of the product detail pages, we expand our top navigation to hold essential information about the product you are viewing, such as quick links to specs, test drive bookings and a pre-order call to action. This makes it easy to digest the content without having to worry about the most important parts.

Challenges: A big part of the Propel brand is about ripples and movement. Naturally, we decided early on to carry that through on the site. With a need to be smart on our renders to save time, we made a 3-D template that we tested and tweaked many times for the artists to work in. The idea was to use only one render for all breakpoints, which allowed us more time to tweak and iterate on a single animation instead of many. It was harder than it sounds because the different ratios introduce issues between devices and viewports.

Alternate paths: Actually, we did start over on this project. We had to create everything from strategy, identity, physical engine design, renders and a website in time for the first public reveal of the product. Once that was delivered and live, we had the luxury of going back to the drawing board to make the second version of the site. With a better understanding of what we should do, we attacked the second version more efficiently. For instance, we created richer, better-looking light animations. We adjusted our design system to better support the communication we wanted to get across with increased legibility for all breakpoints. More in-depth explanations of certain parts that were too vague got used. All in all, the site’s current version is a massive improvement on its first, and I am really happy that we had the support of the client to elevate it even further.