Client —

BMW USA

Agency —

Critical Mass

Background —

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.

When we won this account, we identified two very pressing issues. Firstly we needed to rapidly build up our design capability. Secondly we needed to established a fresh look for all of our future work, to begin this new chapter of BMW’s digital experience.

In January of 2017 our design team was comprised of three directors. We knew that before we could take on any work of significance we needed to build up our team of individual contributors. Due to the highly marketing oriented nature of the work, we believed that we needed a team that leaned heavily toward a  visual design skillset. There was still a need for systems thinking and the ability to design some complex interactive tools as well. Our eventual staffing plan called for two additional visual designers and three product designers. By July of 2017 our team included those five designer hires as well as two copywriters.

While we were conducting a flurry of interviewing to build up the team, we began to dip our toes into the work. We realized immediately that our marketing client’s primary concerns were in placating the powerful dealership associations as well as addressing global brand and marketing directives from BMW’s global headquarters in Munich. Coupling those concerns along with the continuous need to monthly refresh the vehicular focus of the homepage as well as the imminent unveiling of a new vehicle, we had to be incredibly hands on with our new partners and the outgoing digital AOR.

Thus for the first months of our engagement we went through some growing pains as we navigated putting out fires and learning the business of our new client. It would be a few months later before we had the opportunity and staffing to kick off some of the more impactful and exciting work.

Getting to the Good Stuff

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.

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.

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. BMW Global Type, BMW's custom cut of Helvetica was oddly missing from the website. We decided to include it for titling purposes, key to correctly displaying BMW’s vehicular series system. We added Abril Display, found in the BMW Magazine, 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 hierarchy.

Responsive Type Stack

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.

Assorted 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

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 pages proved to be challenging for a number of reasons. It was a vehicle line somewhat at odds with how most of BMW’s audience view other lines. While it had options for a large power engine, it was being marketed as a luxury sedan more in line with a Mercedes S-Class. BMW had built their reputation around performance and spirited driving above all else, hence their old slogan “The Ultimate Driving Machine”. To compound the difficulties in story telling around the inconsistent perception of this vehicle line, mid work stream, our team received piecemeal work in progress new brand guidelines for BMW’s most exclusive vehicle lines. This affected the both our messaging and our visual approach for this experience.

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

Similarly the electric i3 was also an outlier from BMW’s traditional offerings. It also needed to fight the uphill battle of not living up to the high performance bar as perceived by BMW enthusiasts. In addition to that, it’s love-it-or-hate-it styling and range anxiety also needed to be considered in the marketing of this vehicle. We focused on bubbling up the joy of driving the i3 — its electric motor gave it the fastest 0-30 mph time in BMW’s lineup. We touted the availability of charging options to assure drivers would not get stranded and featured a sustainability design story to appeal to our younger environmentally conscious target audience. Finally in collaboration with our social media advertising team, we developed a series a i3 owner’s stories highlighting how seamlessly the vehicle fit into their varied lifestyles.

Small Viewport i3 Vehicle Detail Screens

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

All Vehicles Listing Page

Visual Series Picker in the Global Navigation

Supporting the Brand

In addition to designing elements 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. While some experiences were intended to drive toward lead generation such as BMW iPerformance, others such as BMW Motorsport were intended for generating brand affinity with BMW’s most fervent supports and the racing community in general.

© 2023 Will Gabrenya