EMSMC Design System
EMSMC’s design system was fragmented and lacked consistency, hindering both development and user experience. This case study covers how I rebuilt the design system from the ground up, creating a scalable, consistent foundation that streamlined development and improved the overall user experience across the platform.
About
Founded in 2009, EMSMC (Emergency Services Management Consultants) is a workforce management company supporting high-compliance industries like healthcare, public safety, and emergency services. Their cloud-based platform helps organizations stay audit-ready and operationally efficient with tools for scheduling, training, compliance tracking, and digital forms. Built with the unique needs of regulated teams, EMSMC enables essential service providers to streamline day-to-day operations while meeting complex standards and regulations.
Project Overview
EMSMC’s platform was powerful but difficult to navigate—clunky workflows, outdated visuals, and inconsistencies across tools made it challenging for users to complete everyday tasks efficiently. As the only designer at the company, I led the effort to modernize the experience without disrupting core functionality. I focused on simplifying complex workflows and improving usability across critical features like digital forms, scheduling, and compliance tracking. Supporting a lean team working across high-compliance industries, EMSMC needed a solution that was modular, intuitive, and easy to maintain.
In parallel, I initiated and executed a full redesign of EMSMC’s internal design system. The existing system had evolved without structure or documentation, leading to inefficiencies for developers and product owners. I rebuilt it from the ground up, creating clear, scalable guidelines that became the foundation for faster development, more consistent UI, and smoother cross-functional collaboration.
I started by auditing what was already in place, which, to be honest, wasn’t much. The existing system included only the bare basics and lacked any clear structure or guidance. There were no defined states for components like fields or buttons, no documented use of brand colors, and very few examples to ensure visual or functional consistency. It had no direction and wasn’t scalable. This audit gave me a clear starting point and reinforced the need for a foundational reset.
Goals & Overall Approach
After reviewing the sparse and outdated documentation, I prioritized key components that needed clarity and structure. Using tokens in Figma, I built out detailed guidelines that captured states, variations, and usage best practices—filling in the gaps and creating a more reliable, scalable resource for consistent design and development.
Site Map
To bring structure to the chaos, I started by creating a site map that laid out the foundational architecture of the design system. This helped visualize how components, tokens, documentation, and usage guidelines would relate to one another. Since the existing system had little to no hierarchy or clear navigation, the site map served as a blueprint for building a more organized and scalable experience. It also allowed me to align early with developers on terminology and content flow, ensuring the system would be easy to navigate and maintain as it grew.
Dropping Legacy Decisions
I worked closely with developers to align on terminology and component behavior, ensuring clarity and consistency across teams. This collaboration helped eliminate legacy decisions and unclear patterns, resulting in a more maintainable system that supports faster handoffs and ongoing improvements.
Setting the Standards for Our Standards
I created detailed guidelines to make sure EMSMC’s design system stays consistent, scalable, and easy for anyone to use. These guidelines help keep everything cohesive as the platform grows, making it simpler for future teammates to understand, apply, and expand the system without getting lost.
Since the original system barely had any structure, I had to cover many use cases and edge cases. To tackle this, I audited what little existed, identified common sections and content types, and then streamlined everything to avoid overwhelming the users. The final structure makes it easy to spot patterns, quickly find information, and maintain a clear, cohesive flow across the entire system.
To bring this work to life, I also created a walkthrough video, showing the new design system structure, how tokens were set up in Figma, and how everything ties back to our updated guidelines. I managed the detail and scope for each token, making sure that every rule and property was documented. All details were written out in a global SharePoint document, keeping everything centralized, consistent, and accessible for the broader team. —>
Closeup of a Spec section
Documentation Structure
Introduction: Quick overview of the component with a visual preview to set context.
Usage Examples: Real-world examples showing the most common ways the component should be used.
States and Variations: Full breakdown of all possible states and variations, built in close collaboration with the dev team to make sure every case is covered.
Specs: Detailed specs covering spacing, colors, and typography tokens, including notes on any platform-specific differences.
Tablet Specs (if needed): Showing how the component adapts for tablet screens when applicable.
Looking Ahead
We learned a lot through building and restructuring the design system, and we’re setting up ways to keep the documentation useful and relevant over time:
Regular Updates:
We’re building documentation upkeep into our quarterly planning, making it part of the routine instead of an afterthought.Gathering Feedback:
We’ll collect feedback through quick surveys and user check-ins, so we can keep improving based on real needs, not assumptions.Streamlining Maintenance:
We’re looking into better tools and processes to make updates smoother. Plus, we’ll continue partnering with developers to refine the system together and make sure it stays clear, consistent, and usable for the long haul.