BMW-banner.jpg

BMW M2

BMW M2

 

Project Type

Website Design

Agency

Wunderman Toronto

My Role

Create wireframes, conceptualization and visual design


Summary

We designed an online experience that hyped up the model and gave fans a glance at its latest innovations before the pre-sale offer was available.

Main Goal

Create an interactive experience that celebrates the power of BMW M2 Coupé, a stellar model of the BMW high-performance M series.

 
 

The Problem

Due to the technical limits in embedding a microsite within the official site, we need to create a novel experience by revamping existing BMW templates and ready-built interactive components. The visuals need to align with the brand’s minimalistic design yet resonates with the adrenaline-filled M2 Coupé.

m2-1920x1200-wallpaper-04.jpg.asset.1493913820751.jpg
 
 

The Solution

After reviewing possible solutions with developers, we began wireframing an interactive auto show. We gathered the ready-built components, reels and visuals from client and edited them into cinemagraphs, gifs, scroll-triggered animations, audio gallery and more.

 

Motion Packed

The animated components made the otherwise minimalistic brand components much more dynamic.

hero-images.gif
website_M2-assets3.gif
 

360 experience

From animated engine audio gallery to a VR interior experience, fans can experience the model from behind the wheels.

360.jpg
 

Restyling 

Aside from textured background, a diagonal image gallery (reflecting the M series logo) reveals the inspirations behind M2 Coupé.

gallery.jpg
 

Shares and perks

Users can download high-resolution wallpapers of M2 Coupé and view the latest social media posts on the model.

share-and-perks.jpg
 
 

Learning

Design system

Since we had taken a leap from the BMW guidelines, many interactive components required additional testing after the re-design. Despite the close collaboration between design and build, there were still confusions with the updated design. A design system that showcases all details and states of each component could have made the transition much smoother.