Go back
Building a design system under real technical and brand constraints
Led the creation of a design system for a live B2B SaaS platform by auditing inconsistent UI, partnering with engineers to solve implementation challenges, and balancing accessibility, technical constraints, and brand requirements across teams.
Role
Sole product designer
Platform
Web Application
Year
2022 - Present
Tags
Design Systems
Accessibility
Product Infrastructure
Project Overview
To improve the app's technical support, we migrated the application to a new version of Angular, which also allowed us to create a comprehensive design system to refine the UI with the help of the product team (2 product owners, product manager, and myself).
Typography
I started with essentials – fonts. I audited the entire application to collect all font styles used in the two parts: admin and client-side. I reduced the number of typefaces and font styles, replacing some with frequently used ones.
The typography now includes 6 headings, 2 subtitles, 2 types of body text, and 1 caption style.
Colors
To streamline the color scheme, I collaborated closely with the developer to assess the frequency and location of usage for each color.
As a result, we reduced the number of colors used, improved accessibility, and established a cohesive color scheme throughout the application.
Components
I made changes to the UI components, including adjusting colors, eliminating inconsistencies, and redesigning elements using the built-in logic of Material Design components.
Buttons
I encountered several challenges during the process, but the main ones I addressed were:
- The primary buttons' background color was changed to a darker shade to improve legibility when paired with white text.
- The contrast level of the secondary buttons was adjusted to avoid confusion with disabled buttons.
Checkboxes
The checkboxes also underwent several changes, including:
- Using grey checkboxes as default to maintain consistency throughout the whole app.
- Changing the indeterminate state of checkboxes to a filled box and updating the accordions to grey arrows.
- Darkening the grey color on the default state for the clearer visual distinction from disabled states.
Table grids
I replaced the previous infinite scroll in our application's table grids with a pagination component. This decision was made due to the heavy load on the server caused by the previous implementation.
The new pagination component includes a dropdown for quick navigation, even with filters applied.
Input Forms
The application features 2 types of input fields: those with labels above and those with labels on the left.
After careful consideration, I determined the following criteria:
- Inputs with labels above the input field will be used in modal forms and popups to minimize screen real estate usage.
- Inputs with labels on the left will be used everywhere else to support inline editing.
Other components
Other components don’t require many changes, but I made sure to apply consistent design logic throughout the entire system to maintain a cohesive design system.
Final Result
Based on our research and design system, we were able to implement several tools and processes to ensure consistent application of the guidelines by our team. These include:
1. Creation of a shared design library with reusable components.
2. Establishment of a review and approval process to ensure adherence to the guidelines.
3. A color and font system that aligns with the overall brand guidelines.
4. Components that are accessible, intuitive, and aesthetically pleasing.
5. Incorporation of the widely used Material Design icon system for easy adoption by designers, developers, and users.
AI-Agent Ready Architecture
By establishing clean, highly standardized components with codified token systems, we didn't just optimize manual workflows—we future-proofed them. This strict consistency makes it seamless to feed our UI library directly to AI agents like Claude. Developers can now use AI to generate accurate, on-brand front-end code using our pre-built components, further accelerating feature development and testing.
Conclusion
To quantify the success of this project, we also analyzed key development and design workflows following the design system’s implementation. The results were clear: By moving to a component-driven architecture, we increased development speed by 2.5x and reduced redundant design work, saving 1.5x in overall design time.
Back to Top