Vision Design System
Target Audience: BMC Internal teams, including product designers, developers, and product managers, ensuring consistency across enterprise applications.
Team: Cross-functional team consisting of product designers, front-end developers and product managers.
My Role: I designed and scaled Vision’s design system by creating a reusable component library, ensuring consistency across enterprise products. I collaborated with developers to maintain design-to-code accuracy and established governance processes for seamless updates.
01
Problem
Company faced several challenges in building a scalable design system:
• Inconsistent UI across products: Different teams used varied design approaches, leading to a fragmented user experience.
• Lack of adoption and governance: Ensuring company-wide adoption required clear guidelines, documentation, and developer collaboration.
• Balancing system development with product needs: The team had to integrate the design system without slowing down ongoing product development.
• Scalability and maintainability: As BMC’s product suite grew, the design system needed to evolve while maintaining consistency.
Methodologies/Tools Used:
Design audit, component library creation, design tokens, Figma, user testing, collaborative design sessions.
Measuring Success
Before implementing the design system, our team, including the Product Manager, design leads, developers, and key stakeholders, defined key success metrics to measure its impact and adoption. Given the previous challenges with inconsistent UI, inefficient workflows, and lengthy development cycles, we established clear evaluation criteria to track improvements in efficiency, consistency, and collaboration.
For efficiency improvements, we analyzed JIRA and Confluence data to compare task completion times before and after implementation, assessing how reusable components streamlined design and development processes. Developer feedback sessions provided qualitative insights into improved collaboration and workflow speed.
To ensure UI consistency, we conducted automated visual regression testing using Chromatic, along with manual UI audits comparing live product interfaces with design system specifications. Usability testing with Maze validate the uniformity of UI elements and their impact on user experience.
For reducing design-related bugs, we tracked UI issue reports in JIRA, analyzing bug frequency and resolution speed. By reviewing trends over time, we ensured the design system contributed to a more stable and predictable UI.
Finally, to evaluate team collaboration, we conducted retrospective meetings each month, gathering feedback from designers and developers. We used Slack and Notion to document adoption challenges, track improvements, and refine governance processes.
Challenge
To build a scalable and efficient design system, we followed a structured approach that ensured alignment across teams while allowing for iterative improvements.
• Research and Definition: The process began with a deep dive into the existing component library, analyzing patterns, inconsistencies, and areas for improvement. This phase helped us understand design gaps and derive inspiration for innovative solutions.
• System Architecture Development: We designed a reusable component library in Figma and worked closely with engineers to ensure seamless integration into Storybook, maintaining parity between design and code.
• Governance and Documentation: Establishing clear guidelines and governance processes ensured that teams could adopt and maintain the system efficiently. We documented best practices, versioning processes, and contribution workflows to support long-term scalability.
• Implementation and Testing: The design system was gradually rolled out across multiple product teams, ensuring that new features and redesigns adhered to the established guidelines. Usability testing and UI audits validated the system’s effectiveness in improving consistency and efficiency.
• Adoption and Iteration: To ensure long-term success, we continuously gathered feedback through surveys, Slack discussions, and retrospectives, refining and evolving the system based on real user needs.
Workflow Overview
The process consisted of six key stages: Component Research, System Architecture, Governance and Documentation, Testing and Implementation.
Research & Analysis
Understanding the Existing Challenges
We conducted a UI audit to assess the existing interface, identifying areas where the design lacked consistency, usability, and efficiency. Screens were mapped and analyzed to determine pain points in the user journey, such as complex navigation, redundant workflows, and inconsistent UI components.
Stakeholder Collaboration
A key part of the process was engaging stakeholders, including product managers, developers, and end-users, to gather feedback and validate design decisions. This ensured that the redesigned experience aligned with business goals and user needs while also maintaining technical feasibility.
Design System Integration & Reorganization
With insights from the UI audit and stakeholder discussions, we redesigned and reorganized the Figma files using components from the design system. This streamlined navigation, improved layout efficiency, and ensured visual and functional consistency across all screens.
Outcome & Impact
The revamp resulted in a more intuitive and scalable interface, reducing friction in the expense submission and approval process. By implementing a structured design approach, we improved efficiency, reduced complexity, and ensured long-term maintainability of the product.
05
Design Process
Solutions:
• Developed a comprehensive component library with standardized components, including buttons, forms, and navigation elements, that worked seamlessly across platforms.
• Introduced a design token and variable system that allowed for easy theme customization and consistency across multiple applications.
• Modernized UI controls to match current design trends while ensuring accessibility.
• Documented the design system thoroughly to make it easily usable by both designers and developers.
Iteration:
We iterated on the design system by refining component details, improving documentation, and enhancing adaptability for various platforms. This iterative process ensured that the system could scale effectively as new product features were added.
06
Results
Metrics:
Design-to-development time was reduced by 35%, thanks to the reusable components and streamlined workflows.
Component reusability improved by 50%, as measured by internal developer feedback.
Visual consistency across platforms was achieved, leading to a more cohesive user experience.
We created charts showing the reduction in design-to-development time, as well as feedback from developers indicating improved efficiency and reduced need for customizations.
Lessons Learned:
Governance and documentation are essential – Without clear contribution guidelines, teams may struggle with adoption. Establishing governance from the start ensured long-term scalability.
Iterate based on real user feedback – Regular feedback loops via surveys, Slack discussions, and usability testinghelped refine the system and align it with user needs.
A design system is never ‘finished’ – It must evolve with product growth and industry trends, requiring continuous updates, scalability planning, and dedicated maintenance.
Adoption takes time and advocacy – Encouraging teams to use the system required training, onboarding sessions, and clear communication of its value.