Building a Design System Across Global Automotive Platforms
BMW's used vehicle marketplace operated across 3 interconnected platforms: UVMs (core marketplace), iUCP BMW and iUCP Mini (dealer management). Each platform had evolved with its own design patterns and visual language. Dealers working across all 3 experienced inconsistency. Engineers rebuilt similar components differently for each platform.
The constraint: We had to design the system WHILE simultaneously redesigning UVMs (our priority product work).
Leadership approach
Rather than be the bottleneck on both initiatives, I developed 2 designers to own the design system work independently, while I led the UVMs redesign. This forced intentional delegation and team development under real constraints.
The result:
- 1 unified design language across all 3 platforms
- 2 designers who could govern design systems independently
- UVMs redesign completed on schedule
- Neither initiative compromised the other
Define Phrase
Discovery
In pursuit of an in-depth comprehension of the predicament, I conducted thorough research involving stakeholders and external agencies. Furthermore, I initiated a comprehensive expert assessment and interface audit. A comprehensive inventory was compiled, encompassing a diverse range of patterns, core components, and utilized codebases across all platforms.
A collaborative workshop was conducted with the team to pinpoint challenges and delineate priorities. We meticulously identified components, design language inconsistencies, and problematic code segments adversely impacting user experience and impeding development endeavors. Predominant challenges included:
- Disproportionate CSS allocation and redundant styles
- Inconsistent design language, confusing visual hierarchies, and ambiguous component semantics
- Sluggish loading times, presentation of irrelevant information during loading, and lack of loading representations
- Non-compliant fonts, colors, and symbols from disparate sources
In collaboration with the development team, I synthesized a comprehensive report and strategic roadmap outlining project scope, objectives, and deliverables, aiming to enhance platform functionality, engagement, and usability.
Design language development
The key to progress relied on creating a strong design language essential for future product development. During this phase, we carefully shaped and streamlined the design language to convey a robust brand identity across all touchpoints.
The key to progress relied on creating a strong design language essential for future product development. During this phase, we carefully shaped and streamlined the design language to convey a robust brand identity across all touchpoints.
Documentation
We established the foundations for a coherent experience defined in the initial workshop. We streamline design principles such as accessibility, universal design, do and dont's.
Delivery
Our central aim was the creation of an HTML and CSS-encoded design system. This system entailed a cohesive visual language and an essential component library intended to support the three automotive leader platforms. Comprehensive documentation was provided to facilitate collaboration with both internal and external stakeholders.
Impact
The resultant design system fostered augmented collaboration between design and development teams, consequently accelerating time-to-market. Moreover, it streamlined the creation of new tools, resulting in a more cohesive and superior-quality user experience.