THE DESIGN SYSTEM FOR mASTERCONTROL'S ADVANCED PRODUCTS
The Flynn Design System
Designed and implemented a component library of 40+ components with more to come.
Reduce UI and development costs by more than 30% by enabling efficient reuse of components, minimizing design decisions, and streamlining the workflow for both designers and developers
As a Design Manager, my role involved collaborating with our Senior Director of Product Management on the manufacturing product space. Together, we audited the legacy product, analyzed users' jobs to be done, and identified product shortcomings through research. We then used these insights to make informed decisions about the design and development of the new product.
Responsibilities
Directed auditing efforts of current product components to discover inconsistencies in the design and duplication of components
Collaborated with the Scrum Master, Architect, and Developers to the review component libraries in React to see that would meet our needs for a our long term product goals
Managed work and provided direction for Sr. and Jr. product designers
Performed IC work in crafting components and documentation for the design system
Since the design system team didn’t have a Product Manager, I constructed the design system roadmap and created the Jira epics and stories to help manage our progress toward our established OKRs
Lead quantitive and qualitative research with our user researcher
Problems to Solve
Decide which component library to use for the MasterControl product.
Create a single source of truth that product designers and developers could reference and follow as they created outcomes for out users.
Work on a strategy to resolve component inconsistencies and duplicates in the product.
Several figma design system files existed. We needed a strategy to depreciate the old files and move design and development onto one design system file.
Create lines of communication to resolve future design system questions. Inform designers and developers of updated design system figma file and website updates. Establish a process to contribute to the design system.
Actions Taken
We began with a clear vision and goals outlining what the design system needed to accomplish.
We conducted an audit of the company’s product and identified component inconsistencies. To address this, we established a design system council, including our VP of User Experience and other design managers, to align on design standards and guidelines.
We created a design system website using Knapsack as the single source of truth, providing designers and developers with a centralized resource for interacting with live components and documentation to understand their usage guidelines.
We created a slack channel as line of communication and throughly documented in Knapsack the best way to request component improvements, fixes, and how to propose new components to add to the design system..
Additional notable highlights
Optimized the accuracy that designers implemented components consistently in their work by 55% with more improvements to come in the near future as old design system files were deprecated.
Aligned 15+ product managers, 20+ product designers, and 15+ front end developers across 4 product teams into a unified design system.
What I learned
Collaborative design is essential for creating high-impact products. Attempting to design without input, rigor, and transparency is unlikely to lead to success or adoption.
Feedback and constant iteration are crucial for driving adoption and improving efficiencies in the design system.
A Design System is a support tool that grows and adapts over time based on the needs and input of product teams throughout the organization.
Final thoughts
Having the opportunity to lead and direct the design system helped me learn the importance of a well built design system in an organization. When the design system is well established it gives designers, product managers, and developers the opportunity to focus on the problems they are trying to solve and the outcomes they need to achieve.