Design System · Enterprise ITSM · B2B SaaS
Building a Scalable Design System & ITSM Product
Duration: 1 month
Role: Product Designer
Team: Collaborated with product managers, developers, and stakeholders
Tools: Figma
Problem Statement
The ITSM product needed a scalable UI foundation to maintain consistency across multiple screens and workflows. The goal was to establish a structured design system with reusable components that could support the product’s current requirements while remaining flexible for future enhancements.
Overview
Designed and established the Design System from the ground up, starting with foundational variables for color, typography, spacing, strings, and numerical values. These foundations were connected to styles and components in Figma to create a consistent and maintainable design language.
Built a library of reusable components and variants using Auto Layout, covering the core UI patterns required across the product. The design system was then applied to the ITSM product to create complete screens and workflows with consistent layouts, interactions, and visual patterns.
Design SystemÂ
Building the Visual Foundation
Started by establishing the core foundations of the design system, creating variables for colors, strings, numbers, and spacing, along with typography styles connected to these variables.
This created a centralized foundation that could be consistently applied across components and product screens.
What I created
Color
Defined the product’s color variables and semantic usage across different UI elements and states.
Typography
Established typography styles and connected them with the design variables to maintain a consistent type hierarchy.
Spacing & Layout
Created numerical and spacing variables to establish consistent padding, gaps, and layout relationships.
Variables & Styles
Structured the foundations in Figma so changes could be managed centrally and reflected across the system.
Â
Components
Turning Foundations into Reusable Components
With the foundational system in place, I translated the design language into a library of reusable components and variants.
Each component was designed using Auto Layout and structured to support different states, content variations, and use cases across the ITSM product.
Â
From Design System to Product
Turning reusable foundations into a complete ITSM experience
This project is an IT Service Management (ITSM) product designed to help support agents manage tickets, tasks, communication, SLAs, and resolutions in one place.
The challenge was to simplify a complex agent workflow where a single ticket could involve multiple conversations, emails, internal notes, tasks, and other information. I focused on bringing related information together, reducing unnecessary navigation, and helping agents maintain context throughout the ticket journey.
I first built a complete design system from scratch, defining reusable components, variables, typography, spacing, and Auto Layout patterns. Once the foundation was established, I applied the system across the product to create a consistent and scalable experience.
Prototype Video
The final high-fidelity prototype brings these screens and interactions together, showing how a structured design system can evolve into a cohesive ITSM product experience.
Â
Closing Note
This was a real-world ITSM product, developed with a strong focus on creating a consistent and user-friendly experience. Due to an NDA, the product and client name cannot be disclosed.
The Design System was created from scratch, evolving from foundational variables and styles into a reusable component library. It was then applied across the product to create a scalable, consistent, and intuitive experience for users navigating complex ITSM workflows.