BMW Density Design System

BMW Density Design System is a B2B design system used by 300 teams across the BMW Group for internal applications such as production plants, finance, etc.

Due to confidentiality restrictions, visuals from the design system cannot be shared. This case study focuses on my role in implementation, accessibility improvements, and design system adoption.

Role
Design System Frontend Developer

Focus
Accessibility, design systems, component development, design system adoption

BMW car front close-up showing headlights and grille with blue overlay, used as a visual cover for the BMW Density Design System case study. The image includes the text “BMW Group” and the Critical TechWorks logo

CONTEXT

Critical TechWorks is a joint venture and IT hub for the BMW Group in Portugal. It develops and operates IT applications for development, production, sales, central IT data platforms, and cybersecurity, as well as software for the main platforms used in BMW vehicles.

The Density Design System was also inherited and maintained by the team in Portugal.

PROBLEM

The internal design system, inherited by the team in 2008, required further maturity, improved documentation, and broader adoption.

When I joined the team in 2023, Density was already a mature and well documented design system. At that time, the main objectives were:

  • Designing and developing new features.
  • Ensuring accessibility and preparing the system for the newly released Web Content Accessibility Guidelines (WCAG 2.2 AA).
  • Supporting consistent and correct adoption of the design system across teams.

SOLUTION

New features

The design team conducted UX research and communicated with stakeholders to identify the need for new features. The design work was carried out in close collaboration with frontend developers and was discussed and iterated several times during technical meetings.

During my time on the team, the Stepper component was designed and developed. I contributed to the implementation of the Stepper component in the design system.

My work included:

  • Collaborating with designers to refine interaction states.
  • Implementing horizontal and vertical variants.
  • Ensuring accessible keyboard navigation.
  • Handling validation and error states.
  • Supporting responsive behavior.

Accessibility improvements

With the release of WCAG 2.2, the design system required updates and testing across multiple components. I contributed to reviewing existing components, identifying accessibility issues, and supporting improvements to ensure compliance with WCAG 2.2 AA success criteria.

Adoption

The design system enables other teams to build inclusive and accessible products more efficiently. One of the key goals of the design system team was to support other teams in using the system effectively.

Adoption support included:

  • Debugging issues that teams encountered when implementing the Density Design System through the issue tracking system.
  • Providing a starter template for the Density Design System along with documentation explaining how to set it up.
  • Hosting walk in sessions where teams could book time with the design system team to clarify issues and debug problems together.

Role, Tools & technical skills

I was part of a cross functional Density Design System team consisting of 6 developers, 2 product designers based in Porto, Portugal, and a product owner based in Munich, Germany.

I worked as a frontend developer within the Density Design System team, collaborating closely with product designers to implement and maintain accessible UI components. My work focused on translating design specifications into production ready components, improving accessibility compliance, and supporting design system adoption across teams.

Tools and technical skills: Figma, HTML5, SCSS, TypeScript, Angular, Storybook, Git, GitHub, Playwright, visual regression testing, accessibility testing, end-to-end testing, CI/CD, Jira, documentation.

Back to top