MasterControl
MasterControl
The Flynn Design System - Reduced UI and development costs by more than 30%
The Flynn Design System - Reduced UI and development costs by more than 30%
The Flynn Design System - Reduced UI and development costs by more than 30%
Summary
Summary
Summary
Notable Highlights
Notable Highlights
Notable Highlights
Designed and implemented a component library of 40+ components with more to come.
Designed and implemented a component library of 40+ components with more to come.
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
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
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
Problem
Problem
Problem
Several years ago, MasterControl had a dedicated team for the design system. However, a decision was made to dissolve the team, which caused the single source of truth for product design to fall into disarray. This led to inconsistencies across the product and duplication of efforts. Recognizing these issues, I was tasked with addressing these challenges and restoring order and efficiency to the product design process.
Several years ago, MasterControl had a dedicated team for the design system. However, a decision was made to dissolve the team, which caused the single source of truth for product design to fall into disarray. This led to inconsistencies across the product and duplication of efforts. Recognizing these issues, I was tasked with addressing these challenges and restoring order and efficiency to the product design process.
Several years ago, MasterControl had a dedicated team for the design system. However, a decision was made to dissolve the team, which caused the single source of truth for product design to fall into disarray. This led to inconsistencies across the product and duplication of efforts. Recognizing these issues, I was tasked with addressing these challenges and restoring order and efficiency to the product design process.
Roles
Roles
Roles
Product strategy, Product leadership, Product design,
User research
Product strategy, Product leadership, Product design, User research
Product strategy, Product leadership, Product design, User research
Team
Team
Team
Product design manager, product manager, and IC (me), 1 Scrum master, 2 Sr. product designer, 1 Jr. product designer,
1 Architect, 2 Developers, and 1 Researcher
Product design manager, product manager, and IC (me), 1 Scrum master, 2 Sr. product designer, 1 Jr. product designer, 1 Architect, 2 Developers, and 1 Researcher
Product design manager, product manager, and IC (me), 1 Scrum master, 2 Sr. product designer, 1 Jr. product designer, 1 Architect, 2 Developers, and 1 Researcher
Process
Process
Process
Responsibilities
Responsibilities
Responsibilities
As part of building our design system, I led an audit of existing product components to uncover inconsistencies and duplication, which gave us a clear baseline for improvement. I worked closely with our Scrum Master, Architect, and Developers to review React component libraries and align them with our long-term product goals. Alongside managing and mentoring Sr. and Jr. designers, I stayed hands-on by designing components and writing documentation. Since our team didn’t have a dedicated Product Manager, I also took the initiative to create the design system roadmap, break work into Jira epics and stories, and track progress toward our OKRs. To ensure the system reflected real user needs, I partnered with our researcher to conduct both quantitative and qualitative studies, grounding our work in evidence.
As part of building our design system, I led an audit of existing product components to uncover inconsistencies and duplication, which gave us a clear baseline for improvement. I worked closely with our Scrum Master, Architect, and Developers toreview React component libraries and align them with our long-term product goals. Alongside managing and mentoring Sr. and Jr. designers, I stayed hands-on by designing components and writing documentation. Since our team didn’t have a dedicated Product Manager, I also took the initiative to create the design system roadmap, break work into Jira epics and stories, and track progress toward our OKRs. To ensure the system reflected real user needs, I partnered with our researcher to conduct both quantitative and qualitative studies, grounding our work in evidence.
As part of building our design system, I led an audit of existing product components to uncover inconsistencies and duplication, which gave us a clear baseline for improvement. I worked closely with our Scrum Master, Architect, and Developers to review React component libraries and align them with our long-term product goals. Alongside managing and mentoring Sr. and Jr. designers, I stayed hands-on by designing components and writing documentation. Since our team didn’t have a dedicated Product Manager, I also took the initiative to create the design system roadmap, break work into Jira epics and stories, and track progress toward our OKRs. To ensure the system reflected real user needs, I partnered with our researcher to conduct both quantitative and qualitative studies, grounding our work in evidence.
Problems to Solve
Problems to Solve
Problems to Solve
I led the selection of a component library for MasterControl’s product and created a single source of truth for designers and developers to ensure consistency in user outcomes. To address duplicate and inconsistent components, I developed a strategy to unify several existing Figma design system files into one, while also planning the deprecation of outdated files. I established communication channels for ongoing questions, kept teams informed of updates in Figma and on the design system site, and created a contribution process to keep the system evolving and aligned across design and development.
I led the selection of a component library for MasterControl’s product and created a single source of truth for designers and developers to ensure consistency in user outcomes. To address duplicate and inconsistent components, I developed a strategy to unify several existing Figma design system files into one, while also planning the deprecation of outdated files. I established communication channels for ongoing questions, kept teams informed of updates in Figma and on the design system site, and created a contribution process to keep the system evolving and aligned across design and development.
I led the selection of a component library for MasterControl’s product and created a single source of truth for designers and developers to ensure consistency in user outcomes. To address duplicate and inconsistent components, I developed a strategy to unify several existing Figma design system files into one, while also planning the deprecation of outdated files. I established communication channels for ongoing questions, kept teams informed of updates in Figma and on the design system site, and created a contribution process to keep the system evolving and aligned across design and development.
Working with Nathan was an absolute pleasure. He stands out as an exceptional problem solver and communicator. His unique background in education, product management, and design, enables him to approach challenges with a holistic perspective,
Working with Nathan was an absolute pleasure. He stands out as an exceptional problem solver and communicator. His unique background in education, product management, and design, enables him to approach challenges with a holistic perspective,
River Woods - Director of Student Success, V School
River Woods - Director of Student Success, V School
Outcome
Outcome
Outcome
Additional Notable Highlights
Additional Notable Highlights
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.
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.
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.
Aligned 15+ product managers, 20+ product designers, and 15+ front end developers across 4 product teams into a unified design system.
Aligned 15+ product managers, 20+ product designers, and 15+ front end developers across 4 product teams into a unified design system.
What I Learned
What I Learned
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.
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.
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.
Feedback and constant iteration are crucial for driving adoption and improving efficiencies in the design system.
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.
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.
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
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.
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.
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.
Smarter Inventory, Trusted Data, and Seamless Automation for Field Service Pros.
Smarter Inventory, Trusted Data, and Seamless Automation
for Field Service Pros.
Smarter Inventory, Trusted Data, and Seamless Automation for Field Service Pros.
Read The Case Study
Read The Case Study
Read The Case Study
Follow me
© 2025 – Derek Cramer. All Rights Reserved
Follow me
© 2025 – Derek Cramer. All Rights Reserved
Follow me
© 2025 – Derek Cramer. All Rights Reserved