BMW: Design System for Digital AOR

We began our engagement with BMW USA in January of 2017 as their digital agency of record (AOR). We inherited a massive website with utilities such as finance calculators and build-your-own configurators, and content rich vehicle detail pages and technology showcases.

To accommodate the above, we needed to create a design system able to address near term client asks and anything the engagement would require in the future. I was tasked with spearheading this effort due to my experience with Adobe AEM CMS on a redesign of Quinnipiac University’s website. Over time, as the team continued designing new experiences, I would codify new patterns, continually growing the system.

Organization

Critical Mass for BMW USA

My Role

Design Lead

The Design Team (varies by project)

Natalie Christensen, Da Young Hong, Ryan Frank, Jon Mok, Katie Samour, Raisa Serrano, Angela Wang

Rethinking BMWUSA.com

Some our initial primary project goals for the account were to rethink the BYO (build your own) vehicle experience, the global navigation for the site, and the vehicle detail page templates.

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.

A new grid foundation

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.

320-767: 35% of visitors

768-1279: 25% of visitors

1280-1799: 30% of visitors

Percentage based 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 better frame the content and reduce the density of the existing site, we opted for generous margins and gutters. To simply development effort we used consistent percentages across all breakpoints. The percentage values were derived from pixel measurements at the low end of the large responsive range.

Enriching typography

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 generic system typefaces like Arial. Oddly, BMW Global Type, BMW's custom cut of Helvetica was not used in the old website. We decided to include it for titling purposes, key to correctly displaying BMW’s vehicular series system (3 Series, 5 Series, M4, etc). We added Abril Display, found in the BMW Magazine, which provided an accent serif to the more wildly used sans-serif typefaces. Arial was “demoted” to smaller content usage.

We also dramatically increased the range of type sizes to provide more contrast for content hierarchy required for editorial style storytelling on the product detail pages, functional UI such as navigation, and utility-oriented needs like calculators and the build your own tool.

After roughly 9 months of working with the brand, BMW’s home office in Munich began to roll out a new sub-brand to market it’s flagship vehicle lines namely the 7 Series luxury sedan. This sub-brand was internally nicknamed “GKL” referencing the platform these large vehicles were manufactured on. We needed to revisit in-flight work and adapt our design system to accommodate elements of the new GKL sub-brand. The most pronounced difference between the standard brand and GKL was in the typography. It called for more delicate weights of BMW Global Type and an all-caps application in headlines. In order to ensure compatibility with our component library, we opted to match the type sizes and line-heights between our standard brand and GKL type stacks.

BMW Global Type

Arial

Abril Display

Standard brand and “GKL” luxury brand type stacks

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 more granular components.
Basic components such as headlines or text-based elements, images, spacers, and dividers could be used on their own or brought together to create more complex components such as graphical lists, galleries, or carousels. When necessary we built more singular purpose components to handle specialized content or interaction.

Photography played an outsized role in influencing our growing component library. As a brand BMW had a wealth of images and video assets, ranging from live driving shots, to 3D vehicle renders, to closeups of cabin interiors. The impulse to show rather than tell resulted in the experiences built from these components to heavily leverage these very visual components.

Basic component building blocks

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.

Vehicle detail pages

When tackling the experiences that encompassed the majority of BMW’s product information, we split the body of work into two main tracks. Ongoing maintenance for pages featuring models that were only receiving light updates went to our production team in Costa Rica. These pages would receive minor retouching of photography and content updates to reflect updates to the model. Efforts for new vehicles, those receiving major redesign, or those that were prioritized for promotion by our clients were conducted in NYC. These pages were built from scratch by rethinking the model line experience architecture, applying a new content strategy aimed at conveying in more detail the wholistic experience of driving and owning, as well as creating more interactive touch points.

The first vehicle pages we tackled were for the 7 Series Sedan, the luxurious flagship of BMW’s fleet, and the i3, a quirky electric urban commuter reminiscent of a Star Trek shuttle craft. While these vehicles had very different audiences, we created shared interactive moments as well as unique storytelling experiences to highlight what makes each vehicle special.

The 7 Series examples shown here represent nearly approved designs that still leveraged our new enterprise design system integrating the new “GKL” brand guidelines. Ultimately, the final designs somewhat abandoned this approach in favor of a more impactful vehicle detail page that drilled down to feature and technical details.

7 Series landing page

740i vehicle detail page

Design system applied across the website

In addition to the above vehicle page examples, we applied the design system more broadly across BMWUSA.com. This included lead generation views, technology showcases, build-your-own configurators, vehicle specs, and campaign landing pages. Most of the applications here were fully designed with our system, but a small number were hybridized updates of existing properties on the site.