Shaping culture
through design systems
Global Automotive Leader platforms inherited major legacy technology issues such as a big technical debt, usability issues, and unhealthy code. From a business perspective, these issues translated into elevated costs and delayed time-to-market. From a design perspective, this meant to be subsumed into an engineering-driven process. Previous product decisions were influenced by budget constraints and technical debt priorities. The most effective solution to foster scalability and initiate a transformative cultural shift was the establishment of a comprehensive design system
Leadership
My leadership role encompassed orchestrating the design system initiative, encompassing strategic planning and meticulous execution. To garner support from automotive executives and stakeholders, I formulated the official Deloitte Design Systems framework proposition. A workshop was conducted to evangelize concepts, steer decision-making, and secure alignment. Stakeholders were coached on critical topics, including cultural transformation, accessibility, semantic consistency in colors, typographical scaling, and the integration of design tokens, among other subjects.
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.
Define Phrase
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:
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.
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.
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.
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.
- Mitigated internal challenges and inefficiencies
- Reduced redundancy in code development
- Enhanced synergy between design and development workflows
- Elevated design uniformity
- Improved usability and accessibility