Creating a global design system

Discover how I transformed the digital landscape for Fiat Chrysler Automobiles (FCA) by creating a unified design system to significant expedite the development of new digital experiences, all the while elevating the user experience and ensuring product consistency across their global car brands.

Background

The digital team at FCA, comprising six global automotive brands (Jeep, Dodge, Chrysler, RAM Trucks, Fiat, Alfa Romeo), faced the challenge of continually rebuilding webpages for newly released car models each year. Newly built experiences were met with design inconsistency and  fragmentation across brands. 

To address these challenges, a meticulous design system was crafted, starting from the fundamental atomic layers such as brand guidelines, typography, fonts, and colours, which were used to construct larger components within the design system.

The design system would then be localized for FCA's brands throughout the world. 

The below image takes utilizes components from the design system and applied to Jeep Korea's webpages.

My Role

As a User Experience Designer, I actively collaborated with a visual designer and engaged with brand stakeholders to tackle the aforementioned challenges and enable FCA to scale its digital execution. 

Our primary objective was to establish a cohesive design system that would address these challenges effectively.

User Research

To begin the process, I conducted thorough research and gathered insights into the business and user requirements. Leveraging this knowledge, I curated a comprehensive set of universal components that would foster consistency across all FCA brands. These decisions were informed by extensive user research and feedback, ensuring the design system met the needs and expectations of the users.

Through extensive user testing, we discovered a significant insight: users' were primarily interested in visual imagery, less so specific details about the cars (such as fuel efficiency). This surprised us, particularly for brands like RAM Trucks where we originally thought metrics such as performance played a crucial role. 

Our initial hypothesis proved incorrect as we observed that users were more inspired by a collection of visual imagery and highlights of key features.

Armed with this newfound understanding, we pivoted our design approach to prioritize components that showcased immersive and expansive imagery, placing less emphasis on vehicle statistics or performance metrics.

After rounds of usability testing with prospective vehicle buyers, we settled on our initial set of components.

As an example, we created a feature pillar component by stacking two components. This design enabled the display of wide visual imagery, allowing vehicles to be showcased against compelling backgrounds featuring environmental imagery. 

Furthermore, the feature pillar component provided the flexibility to highlight specific features within the car, enhancing the overall visual impact and engagement for users.

Building the initial design system

To begin building the design system, we collaborated closely to define the basic elements for each respective car brands - color, typography and font sizes for headings, text, links, etc.

Afterwards, basic components were built. These components were the foundational blocks of the design system that could be re-used in larger components. 

For example, an text input component could be used for search on the page or within a form field.

At that time, there were no solutions to easily share the design system library with external users. Therefore, Atlassian Confluence was used as a public repository of the design system. While the design team would store components within Sketch.

Within Confluence, options for each component, as well as accessibility guidelines such as alt text, screenreader text, and options would be defined. 

When brands had new webpages they'd like develop, I would construct webpage designs using our existing design system.

After gathering media assets and copy, the above wireframe could be turned into a webpage design.

Managing the design system

Following the completion of the initial design system, I assumed the role of a design system manager, proposing how brands can maximize the reuse of design components to construct brand assets and webpages, introducing modifications or new components as necessitated by the projects.

Subsequently, I also worked closely with FCA's overseas markets, like Japan, Korea, and the Middle East, to replicate our unified design system and revitalize their respective websites, thereby ensuring brand coherence on a global scale.

An overview process of my role responsible for maintaining FCA's design system.

1. Identify and prioritize user and client needs

2. Ideate and validate (with client stakeholders, users, internal brand teams and engineering)

3. Create design documentation that can be referred as the source of the truth for the design system

4. Collaborate with engineering to develop in Adobe Experience Manager

5. Construct web pages for brands

6. Conduct usability tests and iterate on the webpages

7. Collaborate with the data team to capture data driven insights and document learnings for the design system

Components were designed for 3 breakpoints: Desktop, Tablet, Mobile, with each component adhering to WCAAG 2.1 accessibility standards.

Challenges

1. Managing stakeholders and brand requirement

Stakeholder management presented the most substantial challenge, given the unique requirements and occasional conflicts between brands. 

FCA Digital comprises of brand managers dedicated to each of their brands: Jeep, Dodge, RAM Trucks, Fiat, Chrysler, and Alfa Romeo

The initial step involved understanding the client's motive behind choosing a particular component and evaluating its alignment with user requirements. If an alternative component offered a better fit, I would propose that instead. If no suitable options existed, we'd explore the possibility of adding a variation to an existing component. If this option wasn't viable, we would consider modifying existing components, but only with the alignment of other brand managers.

As a last resort, we would consider designing a new component.

Components assembled into larger components, then stacked on one another to create webpages.

2. Technical limitations

FCA's digital infrastructure presented a set of engineering limitations. Particularly, the system was notably slow in retrieving information about cars, whether that be promotional details or specific vehicle features for users. This was a significant constraint, especially given FCA's prioritization of site speed, which was central to the company's goal of delivering an optimal user experience.

My challenge was to find a delicate balance between providing comprehensive information upfront to the users and offering them customization options, all while maintaining the site's load speed. This required me to design components to meet these FCA's diverse needs without compromising on on swift site performance.

With the design system in place, rapid design iterations and ideation became possible.

Results

Following the initial launch of the design system, our design team and I achieved a resounding success. This new system allowed brands to efficiently build webpages in mere hours, rather than weeks, and assured design uniformity across their digital presence.

This accomplishment not only was immensely rewarding but also led to my role expanding as a User Experience Designer, entrusted with the responsibility of implementing this design system across all of FCA's international and global market sites, including regions like Korea, Japan, Australia, and the Middle East.