BMW USA Design System

BMW USA Design System

BMW USA Design System

BMW USA Design System

Client —
BMW USA

Woodcliff Lake, NJ
2017-2018

Woodcliff Lake, NJ (2017-2018)

Woodcliff Lake, NJ (2017-2018)

Agency —
Critical Mass

New York, NY &
San Jose, Costa Rica

New York, NY & San Jose, Costa Rica

New York, NY & San Jose, Costa Rica

Background —

We began our engagement with BMW USA in January of 2017 as their digital AOR. We inherited a massive website with myriad content including finance calculators, build-your-own configurators, vehicle detail pages, and technology showcases. Our engagement soon grew to include social media. With such a diverse range of digital experiences we needed to create an enteprise design system that would be flexible enough to accommodate the current state of the site as well as the unforseen future.

bmw_2-device-hero
Rethinking BMWUSA.com

You don't often get the opportunity to re-imagine the digital experience for an iconic brand like BMW. Upon being awarded the designation of digital AOR, we were excited to get to work to develop our vision of what that experience could be. Some our primary goals were to rethink the BYO (build your own) vehicle experience, the global navigation for the site, and the PDP (product detail page). Before we could tackle any of this we needed to lay the groundwork for a new digital design language.

We wanted our design language to reinforce and reintroduce the design and engineering legacy of BMW to existing and potential BMW drivers. As such, we drew inspiration from sources including Bauhaus architecture, Swiss design, and the printed BMW Magazine.

bmw_car-lift

320-767: 35% of Visitors

bmw_grid_bps_sm

768-1279: 25% of Visitors

bmw_grid_bps_med

1280-1799: 30% of Visitors

bmw_grid_bps_lg
A New Framework

One of the first things we noticed about the existing website was that the content felt overly dense in places. There was order, but little variation, and certainly little white space. The experience felt generic and not at all premium. The first step to remedy this was to tackle the design grid. 

Rather than define our responsive breakpoints purely by device size (mobile, tablet, desktop) we wanted to balance design and development effort against how users were viewing the site.

To reduce the content density of the existing site, we opted for generous margins and gutters. To simply development effort we used consistent percentages across all breakpoints.

Expanding the Type System

To alleviate some of the uniformity we saw across the site, we wanted to expand the type system to include some additional typefaces. We noticed that the site was only using Helvetica Neue. BMW Global Type Pro, BMW's custom cut of Helvetica was oddly missing from the website. We decided to include it for titling purposes as well as Abril Display, which provided an accent serif to the more wildly used sans-serif typefaces. We also dramatically increased the range of type sizes to provide more contrast for content heirarchy.

The Primary Typefaces

The Primary Typefaces

The Primary Typefaces

bmw_typefaces

Responsive Type Stack (Small, Medium, Large, X-Large)

bmw_type-headlines
bmw_type-content
bmw_type-other
bmw_full_width_stylized

Assorted Components

Atomic Design Approach

The existing site was built on the AEM (Adobe Experience Manager) CMS. While we were still required to use this platform, we took a more atomic approach to component development. This approach allowed for a higher degree of variation in page layouts since we could author more complex layouts with smaller components.

These atomic components could come together to create more complex components. When necessary we built more singular purpose components to handle specialized content or interaction.

Various Atomic Components Combine to Form Complex Components

Various Atomic Components Combine to Form Complex Components

Various Atomic Components Combine to Form Complex Components

bmw_atomic_components
bmw_complex_components
Putting it All Together

We spent the first six months of our engagement working on a variety of initiatives both small and large. These ranged from short-lived marketing pages, to utilitarian global site elements, to a redesign of BMW’s professional racing portal. We ended up with a design system that was both richly featured and extensible to a range of digital needs.

bmw_browser-7pdp

7 Series Vehicle Detail Page

7 Series Vehicle Detail Page

7 Series Vehicle Detail Page

bmw_7series01
bmw_7series02
bmw_7series03

Small Viewport i3 Vehicle Detail Screens

bmw_mobile_5_spread-i3
Driving Leads

On most automotive manufacturer sites, lead generation is always a key objective. Beside ample opportunities to schedule a test drive on the vehicle detail pages, we worked on enhancing some of the global capabilities of the site. This included the global navigation and footer, a comprehensive vehicle listing for SEO, and an enhanced lead generation form.

Lead Generation Form

bmw_lead-gen

All Vehicles Listing Page

bmw_all-vehicles
bmw_navigation

Visual Series Picker in the Global Navigation

Supporting the Brand

In addition to designing parts of the site in support of the vehicle shopping journey, we worked on experiences outside of the funnel that told various aspects of the brand story. These included a racing site for motorsport enthusiasts and green technology stories.

iPerformance Technology Story

iPerformance Technology Story

bmw_iPerf01
bmw_iPerf02
bmw_iPerf03
bmw_iPerf04

BMW Motorsport

BMW Motorsport

BMW Motorsport

bmw_3_device_ms

© 2019 Will Gabrenya