Audi
Feature Apps
Composable and reusable UI features
Research, UI, Strategy, Vision, Delivery
Background
During my time spent with Audi, I was part of an Agile Release Train (ART within sAFE) called OneAudi.
OneAudi was established as the future experience layer for all of Audi's digital touchpoints.
In this three-year engagement, I was involved in a number of initiatives from assisting with the high-level UX strategy definition to working on the core components library, to designing modular web UI micro frontends.
The big Why?
To stay relevant as an OEM means staying relevant as a digital player.
"The expectations of our users are shaped by their experiences with brands like Apple, Google but also emerging mobility players."
Users expect brands to deliver a personalised and seamless experience anywhere and anytime
Current state
How?
To become a relevant digital player, we have to address different areas of our daily work.
We must understand the customer journey as one never-ending cycle.
Alignment
"Only a holistic, cross-product view can achieve the user-centric and seamless digital experience we’re after."
The big picture (Vision)
We empower our customers through the most simple, relevant, and compelling digital experience within the mobility industry.
oneAudi will deliver a common understanding, an operational framework, and a shared modular toolkit to empower all teams.
The goal
The main goal was to build a website that adapts as a whole to the respective user and their interests, no matter where they are in the journey.
Eventually, it can offer personalized experiences – based on that user‘s specific behavior and interests.
This means we modularise content, for:
• Distribution over the entire page and along the whole journey
• Personalization across and within features on the page.
Modular personalized content
UX Pain point identified
Many touchpoints without connection and inconsistent UX standards run the risk of making the user leave due to interrupted flow, and high cognitive, and search effort.
UX initiatives I was exposed to
The Experience Map
A holistic model that defines our UX perspective across products.
Audi Experience Cycle
Audi Core Component Library
A core component library with digital components, that are relevant to various Audi projects, enables a consistent visual appearance and behavior of digital platforms across Audi's digital ecosystem and enhances the ease of use and friction-reduced user experience for the customer.
Information Architecture
Ensuring consistent & intuitive navigation within the oneAudi ecosystem.
Reduce complexity and create contextual relevance regarding navigation, page structuring, and content, as well as consistent terminology.
Building the Feature Apps
Following the strategy and using the components library, I together with a product development team from Modus, started to design (and release) a large number of Feature Apps, which are basically modules, templates, or complex components used to build Audi websites or other platforms, ensuring a consistent delivery & implementation from the UX (+tech & data) perspective. These modules are meant to be used by content authors & developers both internal and external of Audi.
Another key objective was to prepare thorough documentation on how to build and use each app we launched. From a Design and Development standpoint. (GitHub). Like a user manual.
When designing for Audi, you have to take everything into consideration, starting with the core guidelines:
Layout system
The responsive Audi Layout System guides designers to create consistent user interfaces and to better communicate Audi's brand identity.
Content, Layout, Spacing
Responsiveness
Responsive design adapts the flow and layout of information to respond to a user’s behavior and environment based on screen size, platform, and orientation. Adapting the flow of information and visual elements may sometimes require an optimized user experience to help fit content within certain parameters of a particular display or device.
Braking points for each Feature App we developed
Theming
All the components we worked on had to be light and dark-themed ready, with both styles showcased inside the handoff documents.
Document renderer : Feature App : White and Dark theme
AAA Accessibility
Audi is committed to providing websites, mobile applications, and other digital content that is accessible to all its customers, including those with disabilities.
Luckily, the core design system was designed with WCAG 2.1 and ARIA in mind but every now and then we would get some pushback because of how some components were overlapped, breaching sometimes accessibility standards.
Outcome
The complexity of the modules we worked on ranged from very simple ones as breadcrumbs, vertical spacers, and paragraphs, to more complex ones as the header, editorial teasers, document renderer, and country selectors.
In total, a number of 32 Feature Apps were designed and released on the internal App Market store over the span of two years, all of them within the committed timeframe.
Header Feature App + Flyout menu. Light and Dark theme.
Takeaways
This wasn't a creative exercise, it was a test of adaptation in a very restricted environment with clear rules of play. Like most enterprises are. Excellence in delivery had to overcome creativity, and following established guidelines together with acceptance criteria was key to a successful outcome.
Working with Audi was one of the most fulfilling experiences in my career so far, not only because of the brand but the people and the way of doing things "the German way".
