Inside the "digital first" Audi rebrand by Strichpunkt

For Audi's new brand refresh, German agencies Strichpunkt and KMS Team replaced its usual classical corporate design with an extensive new identity based around new UX and UI designs.

Strichpunkt designed and developed – and open sourced – an entirely new interface to be used across all Audi digital platforms: from inside your car to the app on your mobile or smartwatch. The identity includes a refreshed – and flattened – logo, a new typeface, specific colour palette and an icon library.

The new interface is essentially Audi's new brand identity. It was created first, rather than being an afterthought, and went on to influence Audi’s new communication media, corporate branding and motion pictures. "The visual appearance is no longer a static structure: it’s a living interface that interacts with human beings", Audi explains.

I was in Berlin for design conference Typo 2017 and managed to chat to Strichpunkt co-founder Jochen Rädeker and head of development Thomas Michelbach about how their new interface design for Audi meant Audi no longer acts as purely a car brand, but also as a digital service. 

Audi announced at CES this year alongside artificial intelligence company, Nvidia, its plans to launch an autonomous vehicle in 2020, which would require "no human intervention in limited situations". Audi also plans to introduce a car that is highly automated but requires some human intervention this year. Audi has also been introducing driver assist technology into its vehicles, with 60 percent of its customers choosing cars with this function over a car without.

There has been experimentation with gesture-control across the automotive sector, as well as audio control, such as Audi’s MMI controller. Strichpunkt also mentions a rise in mobility services – BMW is joining its mobility services into one brand – a system popular in Germany. This creates a new challenge for car brands, and paired with new assistive technology, further accelerates the need for a coherent and simple user interface across all digital screens. 

To see what can go wrong when a car company uses a third party to design its interior digital assets, last year we covered Ford’s disastrous MyFord Touch in-vehicle infotainment (IVI) system which led to a class-action lawsuit.

Stricpunkt’s UI design for Audi

Audi desired to move into a "digital car company" identity, and wanted Strichpunkt to design an Audi-specific user experience which stayed consistent across all digital platforms from the app to the vehicle – including digital screens within cars, audio apps and apps across all digital devices including smart watches.

To tackle the monster project, Strichpunkt created a new "atomic design", a minimalistic, functional-first interface much like what we know of Facebook, Airbnb and Uber.

The new Audi UI was launched online early this year, and the Audi icons, UI components and type are available for anyone to download and use from GitHub. You can also download the Audi UI Photoshop kit.

For a brief overview, Audi’s new UI layout is "generously subdivided into blocks, vertically and horizontally" for a balanced look, and content is presented inside rectangular tiles placed in a grid spaced from the edges of a digital device. If tiles are assigned an additional function, they become "cards". Elements are highlighted in a hierarchical structure in order of importance to the user. 

Simple colours of white, grey, red, black and different variations of silver are used with varying typeface sizes depending on the size of the display screen. You can find out more detail about the Audi user interface here.

Strichpunkt co-founder Jochen Rädeker says the agency wanted to create "the core of Audi design", outside of the existing logo.

"The most important fact was to create a corporate design that would persist even if there will be new media introduced in a couple of years," he says.

"I’m not saying that it’s finished right now. It will always be in beta stages, but this is an open kind of design which is new to a classical brand such as an automotive company." 

Head of development Thomas Michelbach says the UI design always had a "digital first" functionality focus. 

"Basically, these days you can’t only design to make it look beautiful, you have to design for function as well, so therefore we undertook a lot of research (with "Silicon Valley think tanks", says Jochen) and some testing as well," he says.

Aiming to create a non-distracting interface for digital screens situated within Audi cars, Jochen says Strichpunkt created an "anti-Tesla design". 

"[Tesla] didn’t substitute buttons, it produced more of them. Tesla has more than 3,000 buttons in the digital interface, and our basic idea for Audi was to do as little as possible to make sure the driver can concentrate on what’s really important."

Open sourcing the design code

"We open sourced the whole [Audi UI] code on GitHub so you can download it and adjust it, and find certain mistakes and errors and we can fix them, so to celebrate a new openness with this form of design," says Thomas. 

Jochen acknowledges open sourcing their code for Audi could lead to many brands with similar interface designs, but says it's okay when this form of digital design is new to corporate brands. 

"Everytime you create something you have to be aware of followers, and I don’t think it’s bad for the brand you’re working for as long as you’re able to create something individual," he says. 

"Be the principal, and not the design itself, be the principal to design a car brand that’s really open sourced, accessible to everyone, is new to the market. If there are followers, welcome. 

"We have almost a free choice of how to define digital content within corporate design," says Jochen. 

"To be honest, the only one who is designing new design in Jonathan Ive, and everybody is following him."

The pairing of design and development

The interface project for Audi is centred on development, coding and an understanding of digital systems over traditional graphic design. 

"I don’t have clue about coding, I just know what’s possible with coding. I think that is what’s important for designers today," says Jochen. "You don’t have to code yourself but you should know what the possibilities are and the borderline which you can’t cross."

Thomas, who studied software engineering but has always been interested in design, and Jochen say Strichpunkt is an agency with a distinct background in classical design and corporate print publishing but it’s facing the challenge of moving away from that image and into the digital age. 

For current designers, although it helps to have certain knowledge of programming, Thomas says it’s more important to be able to think within a system. 

"Now we’re facing different times when it comes to branding. There are a lot of factors when regarding experience, which is important these days, and I think it all happens in the intersection between content, technology and design. This is why design agencies are very interesting for developers as well," he says.

Although Jochen say designing for Audi was "the all time favourite", Strichpunkt also designed the branding for the German DFB Cup final in Berlin, which took place last Saturday, the final day of Typo 2017. 

Alongside side its history with corporate publishing and reporting, Strichpunkt has created more of a focus on major German brands like Mercedes Benz, Volkswagen and global brands in China and across Europe. Strichpunkt recently won the worldwide corporate design budget for Deutsche Post DHL Group against three other UK competitors. It will support corporate brand marketing, management and visual identity.

Jochen is a traditional graphic designer who founded Strichpunkt 20 years ago with Kirsten Dietz. The Berlin and Stuttgart based agency has gone on to be one of the top 10 most creative German agencies for almost 15 years, working for clients such as Adidas, Volkswagen and more recently Mercedes Benz.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...