- Role
- Product Designer
- Team
- 20+ people
- Duration
- 2018–2021
- Tools
- Adobe XD, Figma, React, Ant Design
Kaman was a proactive initiative I built from the ground up to address the inconsistency, weak branding, slow development, and scalability problems our corporate faced. It is a live product that started with 5 essential elements and grew to 12 comprehensive guidelines: colour, typography, layout, icons, brand, design patterns, shared vocabulary, naming conventions, error handling, product values, design principles, and data visualisation.
Kaman means "bow" in Farsi. The bow is part of the Sagittarius constellation, the coat of arms of Isfahan, the city I come from.
I was a UX designer at a corporate with roughly 12 product teams, working in the largest team on an enterprise web application with a highly flexible and complex interface. My responsibilities were identifying and fixing UI/UX issues, designing new features, and redesigning the interface over the long term through refactoring.
After a few months on the team, I noticed a set of recurring problems. The top six:
Inconsistency
No unified design language, which led to inconsistencies across the interface.
Slow design process
Without a standardised system, design was slow and held up development.
Poor branding
Inconsistent branding across products caused confusion and weak recognition.
Repetition & waste
Repeatedly designing similar solutions for different tickets wasted time and effort.
Dependent process
Design leaned heavily on the individual designer, causing delays and personal bias.
Missing components
The interface was complex and needed a wide range of components the current library did not cover.
Two real examples of inconsistency in the product (screenshots replaced with imaginary ones for the NDA):
No design system meant a disconnected user experience.
Next to identifying the problems was defining the right goals. We set six main objectives:
Improve consistency
A unified design language across products for a cohesive experience.
Increase speed
A standard set of components and guidelines to speed up design and development.
Improve branding
Unify the style of products to build a strong, recognisable brand.
Save time
Remove the need to redesign the same solutions for different tickets.
Process independence
Guidelines and standards that reduce dependency on individuals and enable scale.
Enrich the library
A comprehensive component set for designing complex enterprise products.
The question was how to get from problems to goals. It is clear now that a design system was the answer, but in 2018 that was far less obvious: design systems were an emerging topic. I researched how well-known companies' design departments tackled similar challenges and saw how much they invested in design systems, then started learning from the very beginning.
Educating myself first was crucial to building something that could scale: a design system is not about Figma, it is a design language. I read the field's key books and studied popular design systems to understand their structure and components.
Getting buy-in mattered just as much. A design system needs an initial investment of time, and without support it will not be adopted. I gave a persuasive presentation to the team, laying out the challenges we faced and how a system would address them. We agreed to start small and extend it on demand.
To build each guideline I followed a three-step approach.
1 · Investigate
Study how other design systems handle the same guideline.
2 · Review
Review the books and other resources on that guideline.
3 · Assess
Assess the current and future needs of our own products.
For tooling: designs started in Adobe XD and were later recreated in Figma; for development we benchmarked component libraries and chose Ant Design, customising and extending it with React; documentation began in Google Docs for easy edits and later moved to a GitLab Wiki.
The work produced a set of guidelines, five essential ones to start and twelve as the project grew. Kaman was designed in Adobe XD under an NDA, so a mini version was recreated in Figma for this preview.
To handle the interface's complexity we needed a versatile component library. Rather than build one from scratch, we adopted Ant Design and customised and expanded it to our requirements.
A design system is only useful if it is accessible. We worked to align with guidelines such as WCAG.
Colour contrast
Pressure-tested the brand's colour system for sufficient contrast across buttons, inputs, headers, and themes.
Keyboard control
Documented how each component and interactive element behaves with keyboard-only input.
Input feedback
Ensured error and warning states give clear information in plain, non-confusing language.
Content accessibility
Worked with content writers on alternative text and captions for all images and video.
To measure whether the system worked, I developed a set of KPIs spanning efficiency and adoption, then tracked them on a quarterly dashboard from Q2 2019 to Q4 2021 and shared the results company-wide.
| KPI | Lens |
|---|---|
| Speed to market | Efficiency · quantitative |
| Story points per sprint designing new components | Efficiency · quantitative |
| Lines of code changed per release | Efficiency · quantitative |
| Number of products using the system | Adoption · quantitative |
| Number of people using the system | Adoption · quantitative |
| Feedback from users | Efficiency · qualitative |
Based on the evaluation and other observations, Kaman delivered outcomes for both the business and the people using it.
For the business
Reduced time-to-market
Pre-designed components and standard guidelines led to faster product releases.
Consistent branding
Consistency across products strengthened the brand image that was missing before.
Reduced costs
Avoiding duplicated work cut design and development costs.
Increased scalability
The company could develop and launch new products quickly and respond to demand.
For the teams
Streamlined workflows
Higher productivity for designers and developers through ready-made components and guidelines.
Better collaboration
Clearer communication and coordination among designers, developers, and PMs.
Easier onboarding
A notable positive impact on onboarding for both new hires and existing staff.
We ran into several challenges. The top four, then a closer look at one.
Buy-in & education
Getting buy-in from managers and teams, and encouraging adoption of the new standards, took sustained effort.
Consistency vs flexibility
Too much consistency restricts adoption; too much flexibility erodes coherence.
Handling exceptions
Deciding how to treat cases that did not fit the standard guidelines.
Consistency vs a better solution
Sometimes a better solution would compromise the system's consistency.
Consistency versus flexibility. Striking the balance meant considering the products adopting the system, the organisation's structure, and its users. Since most of our products were enterprise web apps, each needed distinct components, icons, and spacing, and we did not need to factor in mobile. We established a hierarchical model that keeps the system coherent while letting individual product teams adopt it to their specific needs.
We used Catriona Shedd's maturity model to track progress, moving from "Absent" (no system) to "Distributed" during my time with the company. The next steps were to sustain the Distributed phase and progress toward "Optimised".