Amir Khademi
Senior UX Designer
Kaman Design System was the proactive initiative I built from the ground up to address the challenges our corporate faced in terms of inconsistency, poor branding, slow development process, and scalability.
Our design system is a live product that started with 5 essential elements and was grown to 12 comprehensive guidelines, including:
Colour System
Typography
Layout System
Icons
Brand
Design Patterns
Shared Vocabulary
Naming Conventions
Error Handling
Product Values
Design Principles
Data Visualization
I was a UX designer at a corporate with about 12 product teams. I was working in the largest product team with the following characteristics:
An enterprise web application with a highly flexible and complex interface.
Senior UX Designer
+20
2018-2021
Responsibilities
Working in this team for a couple of months, I noticed some problems. Here are the top 6:
The lack of a unified design language led to inconsistencies in the design across user interface.
The design process was slow and impede development due to the lack of a standardised design system.
The inconsistency in branding across products led to confusion and a lack of brand recognition.
The need to repeatedly design similar solutions for different design tickets led to a waste of time and effort.
The design process was heavily reliant on the designer, leading to delays personal preferences.
The product interface was complex and required a wide range of components. The current component library was not covering the needs.
Below there are two real-life examples of inconsistency in our product. Due to the NDA, I have replaced the actual screenshots with imaginary ones.
Next to identifying the problems is defining the right goals. We described the main objectives as follows:
Establishing a unified design language across products to create a consistent and cohesive user experience.
Speeding up the design and development process by providing a standardized set of design components and guidelines.
Strengthening the company's branding by unifying the style of its products to create a strong brand identity and recognition.
Eliminating the need to repeat design solutions for different design tickets, reducing waste of time and effort.
Reducing dependency on people by providing guidelines and standards to enable independence and scalability.
Providing a comprehensive set of design components to design for complex enterprise products.
Now, the question was: How might we go from problems to goals?
Although it is clear now that we need a design system to solve the problems mentioned, it was not so evident in 2018, as design systems were an emerging topic in UX.
To seek a solution, I researched well-known companies’ design departments to see how they tackled similar challenges. Through this investigation, I observed that these companies invest in design systems.
I started learning about design systems from the very beginning.
Gaining buy-in is crucial for design system projects to ensure team members are committed to investing time and resources. A lack of support can impede the adoption of the system.
Educating myself on design systems before beginning the design process was crucial to creating a robust design system that could scale and effectively address our corporate’s needs.
Next was conducting thorough research on popular design systems to gain a better understanding of their structure and components.
It was now time to build the system. To create each guideline, I took this 3 step approach:
Investigating the same guideline in other design systems.
Reviewing the books and other resources about that guideline.
Assessing the current and future needs of our products.
The following tools were used for designing, developing and documenting the design system:
Originally designed in XD and then recreated in Figma.
Benchmarked the component libraries and chose the Ant Design. Used React to customise and extend it.
Initially used Google Docs for convenience in edits and later tried Gitlab Wiki.
The previous exercise resulted in the creation of a set of guidelines. Initially, five essential guidelines were developed and as the project progressed, the guidelines were extended to twelve.
The colour system was developed to promote consistency and harmony across all company products. The colour palette was chosen based on extensive research on colour theory, colour psychology, and the company’s branding guidelines. Additionally, the colour system includes guidelines for WCAG, contrast ratios, and colour usage, ensuring that all products comply with accessibility standards and can be used by all users, including those with visual impairments.
The typography standard consists of a set of fonts and sizes to be used consistently across all the company’s products. It includes guidelines on font pairings, line height, and letter spacing to ensure readability and consistency in the company’s visual identity. It supports multi-language products and is cross-platform.
Kaman’s icon set follows a consistent style, ensuring clarity and ease of use. The set includes a range of icons covering a variety of functions and styles. The collection was carefully curated to ensure that every icon is clear, legible, and can be easily understood by users.
Hey you, Hey You, hey you, or HEY YOU? Inconsistency in naming in our UI was a problem. The standard was created by defining a straightforward syntax and rules for naming in UI, emphasising consistency and ease of use.
To cope with the complexity of the user interface, we needed a versatile component library. Since we lacked the resources to create one from scratch, we adopted one. We took Ant Design and customised and expanded it to meet our specific requirements.
Any design system is only useful if it’s accessible. We took action to make sure we’re aligned with accessibility guidelines like WCAG.
We prioritised pressure testing the colour systems of our brand to ensure sufficient contrast across various elements such as buttons, input fields, headers, and overall themes.
We created detailed specifications documenting how each component and interactive element would function with keyboard-only inputs.
We prioritized transparency in our design system, ensuring that error and warning states provided clear information for users without confusing language.
We collaborated with content writers to provide alternative text and captions for all images and videos.
To assess the effectiveness of our design system, I began by reading a paper from DevBridge on the topic. From there, I developed a set of KPIs to evaluate the efficiency and adoption of the system. The KPIs were defined as follows:
Efficiency / Quantitative
Efficiency / Quantitative
Efficiency / Quantitative
Adoption / Quantitative
Adoption / Quantitative
Efficiency / Qualitative
I prepared a Google Sheets-based dashboard to monitor the KPIs every quarter, from Q2 2019 to Q4 2021 and shared the results with the entire company. The results were as follows:
Based on the evaluation mentioned above and other observations, Kaman brought us the following outcomes:
The availability of pre-designed components and standardized guidelines led to faster product releases.
Consistency across products enhances the brand's overall image, which was missing before this project.
Reduced design and development costs by avoiding duplication of work, saving both time and resources.
Increased scalability led to the ability to rapidly develop and launch new products, allowing the company to respond quickly to market demands.
Enhanced productivity and efficiency for designers and developers, thanks to the availability of pre-designed components and guidelines.
Improved collaboration among designers, developers, and product managers, leading to more effective communication and better coordination.
The design system had a notable positive impact on our team's onboarding process, making it easier for both new hires and existing employees to get up to speed.
Throughout the project, we encountered several challenges. Here, I will outline the top four challenges and then provide more details about one particular challenge and my approach to addressing it.
Getting buy-in from managers and team members, educating them on the importance of a design system, and encouraging the adoption of the new standards required extensive efforts.
Enforcing too much consistency restricts adoption while adding too much flexibility can affect the system's coherence.
Determining how to handle exceptions that do not fit the standard guidelines was challenging.
There were instances where a better solution may compromise the consistency of the design system. Choosing between consistency and a better solution was challenging.
Enforcing too much consistency hinders adoption, while adding too much flexibility can affect the system’s coherence.
To strike the right balance, it’s crucial to consider the products adopting the design system, organization structure, and users. For instance, in our case, as most of our products were enterprise web apps, we required distinct components, icons, and spacing for each development but didn’t need to factor mobile design into our design system.
We established a hierarchical model to maintain coherency in the design system while allowing individual product teams the flexibility to adopt it based on their specific needs.
We utilized Catriona Shedd’s maturity model to measure the progress of our design system, starting from “Absent” when there was no design system in place and progressing to “Distributed” during my tenure with the company. Our next steps for this design system are to sustain the Distributed phase and progress towards “Optimized”.
