BMC Design System
BMC was founded on a deeply felt principle: help customers maximize their technology and drive better business outcomes. We do that by connecting and optimizing digital operations to create an AI-powered engine for continuous innovation.
01
Project overview
Worked in a leading tech company to create a consistent design system by working closely with a design lead and developers to turn designs into reusable products using Figma as the primary design tool. Primary role was Middle Product Designer.
02
Team
Yaroslavna - Product Designer, Yuliia - Product Designer, Maxim - Software Engineer | BO
03
Background
As a Middle Product Designer for this project I led all design initiatives, regularly worked with product managers, developers, product designers and showed the result to the the leadership team (CPO, CDO).
Starting from foundational elements, I have developed comprehensive systems that evolve alongside product needs. This experience has equipped me with the skills to define design tokens and patterns that are forward-thinking and versatile, enabling design methodologies that are enduring and flexible to emerging challenges.
MVP Mindset
As a product designer tasked with creating a design system, I faced the challenge of developing it based solely on backoffice screens created by a senior designer and a modest UI kit. The main challenge was integrating design tokens into the system to support both dark and light themes, ensuring flexibility and consistency across the application.
To build the app faster, scripts were unified and there was an option to quickly scale to different styles, color themes and components.
Components were built as custom for iOS and Android.
Typography was selected with a margin to scale to different countries with a wide range of headsets.
An icon drawing guide was compiled so that all icons were consistent and in the same style.
The color system was collected semantically from possible places of use. With flexibility to scale to other themes.
04
Colours and Typography
Accessibility
It’s important that users can see the content in our UX pages. Ideally, color contrast ratio should be at least 7.2:1. At a minimum, aim for 6:1. We always use the WebAIM contrast checker to check the contrast ratios in designs.
Component Integration and State Management
After laying the groundwork with basic variables, I focused on transferring components into the design system. This process involved not only importing the components but also defining their various states (e.g., hover, active, focus, disabled) to ensure interactive elements behaved predictably. To make the components adaptable to theme changes, I integrated the previously defined variables. This approach allowed for seamless switching between light and dark modes, enhancing user experience and accessibility.
The component library consists of:
Component name: A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.
State changes: Recommended defaults and the subsequent changes in appearance.
Note making: Page annotations and descriptions to understand what component you were looking at.
Breakpoints: Any size indication and breakpoints for the developers.
05
Collaboration with Developers
Throughout this process, collaboration with a developer was crucial. We held regular meetings to ensure that the design system's implementation was technically feasible and aligned with development practices. This collaboration facilitated a shared understanding of the system's capabilities and limitations, enabling us to make informed decisions about component design and functionality.
05
But did it work?
The design system is still in progress, and constantly being iterated on. To support developers and ensure the effective use of the design system, comprehensive documentation was created. This documentation covers best practices, usage guidelines, and addresses corner cases, providing a valuable resource for developers and promoting consistency across the application.
At this stage, a developer started building a Storybook for the product based on our design system. This move has significantly improved our capacity to document and share UI components across different teams.
