Maserati MC20

Brands and companies now understand the true potential of comprehensive customer experience through online channels, therefore investing in digital with purpose and ambition.

- MediaMonks Team

Can you describe your project and the concept behind it?

For the launch of Maserati’s most epic supercar, the MC20, the experts at MediaMonks came up with an audacious digital design direction, bringing the MC20 to life in all its glory: from 3D explorations and configurators to deep dives, rich media content, and interactive components. Through the Maserati MC20 Model Page, users feel the car from up close, and can truly grasp the audacious style and breathtaking performance of this supercar.

Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?

Although we had a very limited timeline to deliver this project, we first conducted an (online) UX and creative workshop with the key stakeholders, to explore the opportunities and define the requirements. Very rapidly our creative lead crafted concept designs, dialing in strategic functionalities along the way. The end results do not actually differ so much from the initial design iterations!

What influenced your chosen technical approach, and how did it go beyond past methods?

The creative strategy was to make a ‘scrolly-telling’ experience: to unfold the story of the MC20 upon scroll. A single page designed and built with chapters that include interactive components showcasing specific aspects of the MC20, such as the custom engine sound or the butterfly wing doors. Packing those components into a single page, and optimizing its loading time, represented a true challenge that the tech team successfully achieved!

When did you experience a breakthrough or an "a-ha" moment during this project?

To showcase the six exterior colours available for the MC20, we imagined and designed a unique component that lets you pick a tint and paint the car yourself, directly within the page. Once developed, this component came across as strikingly satisfying to use!

What web technologies, tools, and resources did you use to develop this?

The frontend is developed using muban which serves as a base for the Adobe Experience Manager integration. For authoring and managing content, Adobe Experience Manager (AEM) is being used. Furthermore the MC20 site uses technologies like WebGL and Web Audio to enhance the user experience.

How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

The Maserati team is well-educated on creative technologies and has an appetite to see their brand and products being showcased in the most forward-thinking way online. It gave us the confidence to come up with a bold creative vision for this project, knowing that the client would be capable of getting behind our ambitious approach, and provide us with the means to achieve it.

How did the final product meet or exceed your expectations?

Maserati has developed the MC20 with the clear intent to position the car as a radical innovation in the automotive industry, so it was critical for us to rise up to the level of the car design itself, and produce a stunning interactive experience. Then, the digital design awards that this project won were a great indicator of our success (Awwwards Site of the Day, FWA Site of the Day, CSS Winner Site of the Day).

Why is this an exciting time to create new digital experiences? How does your team fit into this?

The limitless creative opportunities that new and improved technologies allow us to imagine. Combined with the fact that certain user groups get a growing appetite for rich, immersive digital experiences, the next decade is full of exciting possibilities for us creators! Also, brands and companies now understand the true potential of comprehensive customer experience through online channels, therefore investing in digital with purpose and ambition.

See More Projects

World AIDS Day 2020 - A National Conversation -

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

View the Project
In Event of Moon Disaster

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

View the Project
Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

View the Project