Genesys Design System

Created the Devo design system from the ground up, radically enhancing consistency, scalability, and the overall speed of design and development.

UX/UI ArchitectureFigmaDocumentationStorybook

Figma design Github repository SB documentation

My Role

I led the creation of the design system, collaborating closely with frontend developers and my design team colleagues to ensure a cohesive and efficient design language across the platform.

The Challenge

Before the design system existed, the product ecosystem faced major inconsistencies, not only visual, but also in how users interacted with the platform. Users could perform the same action in different ways depending on the section, leading to confusion and usability issues.

Meanwhile, developers were building their own components and layouts for every new feature or enhancement, which significantly increased both development time and maintenance costs.

Additionally, the Professional Services team was constantly building custom vertical apps for clients, further fragmenting the visual and technical ecosystem.

As a result, maintaining visual consistency, accessibility standards, and scalability across products had become almost impossible.

This challenge led us to create a unified Design System, not just as a visual framework but as a strategic foundation to transform how Devo designed and built its products.

BeforeExample of the alerts creation section before the Design System: inconsistent components and layout.

AfterThe same section after the Design System implementation: unified layout, consistent hierarchy, and improved readability.

Goals & Success Metrics

Radically improve consistency
Establish a unified visual and interaction language to ensure coherence across all Devo products and touchpoints.
Accelerate design and development workflows
Reduce repetitive work by providing reusable, ready-to-implement components and design tokens.
Enable scalability
Build a flexible foundation that supports product growth and new feature development without visual or technical fragmentation.
Enhance collaboration between design and engineering
Create a shared source of truth where both teams can align quickly on decisions and implementation.
Ensure accessibility and usability standards
Integrate WCAG AA accessibility principles directly into components and documentation.
Strengthen Devo's brand identity
Translate the brand's visual language and values into a consistent, systematized digital experience.

We defined some metrics, but due to the limited size of our design team, we weren't able to conduct extensive testing or research to audit them. These were our success metrics:

40% reduction in design & implementation time.
90% of engineering teams actively using the design system.
80% reduction in one-off or inconsistent UI components (excluding vertical applications).
100% compliance with WCAG AA (excluding vertical applications).
Designer-developer alignment satisfaction: >8/10 (survey).
90% component documentation completeness.

Research & Audit

Once we started the creation process, we reviewed what other companies and established design systems were doing: Carbon, Material, Spectrum... etc.

This benchmarking helped us refine the structure of our Storybook documentation and Figma system, prioritize components, organize them efficiently, and set best practices for accessibility and scalability.

We also kept close communication with developers to understand their needs and technical constraints, and within the design team to align on workflows and daily challenges. This ensured the system truly served both teams, with a special focus on developers as the primary users.

Finally, I conducted a thorough audit of the existing UI to identify visual and interaction inconsistencies. We inventoried existing components, removed duplicates, and spotted gaps, which helped us prioritize and establish a clear baseline for the design system.

BeforeWe inventoried the secondary vertical tabs, but found that their layout took up too much space, so we maintained the component but changing its structure.

AfterWe didn't just inventory the components, we also adapted and refined them, removing those that were no longer needed. In this case, changing to an horizontal layout helped us to save space and improve usability.

DocumentationThe design system documentation was built in Storybook, following a structure inspired by other established systems, including principles, foundations, components, and patterns.

Company oriented componentsOur design system needed to be flexible enough to meet the needs of our teams, but not as open-ended as others like Material or Carbon, for instance.

Foundations

Every design system starts with a solid foundation. At its core are the design tokens: colors, typography, spacing, grids, shadows, and borders. These tokens act as a single source of truth, giving every component a consistent look and feel. By defining them first, we make sure the system is visually cohesive and easy to scale across products.

Equally important are the principles and rules that guide how the system is used. We focus on accessibility, scalability, and maintaining the brand's visual identity. We established clear guidelines about:

Color.
Typography.
Layout.
Spatial system.
Iconography.
Elevation hierarchy.
Shape and Radius.
Content, voice, and tone.

Design tokensIntegrated directly into Figma through variables, allowing designers to apply them seamlessly within the design environment. Additionally, the tokens are exported in multiple formats: CSS, SASS, JavaScript, and JSON, making them easily accessible for developers.

Color palettesI built a comprehensive color palette that balances brand identity with accessibility. Each color was tested to ensure WCAG AA compliance, providing sufficient contrast for readability and usability. Additionally, the darkest colors in the palette meet AA standards when used on the lighter half of the palette, and vice versa.

Color usage by contextI defined a table to guide the selection of color palettes based on context. Thoughtful color choices help users quickly recognize statuses, actions, and interactions

TypographyIt helps us to correctly establish the visual hierarchy of a page, in addition to organizing information and serving as a guide for users while browsing the platform. Its correct use also generates a more powerful brand presence.

Typographic variantsWe use typo design tokens and themes to manage our typography. We have specific groups of typo tokens (font-size, font-weight, line-height, letter-spacing... etc.) to define our different typographic styles: headings, heros, caps, body... etc.

LayoutThe layout is composed of distinct regions that define our information architecture. Each region serves a specific purpose and contains key interactions: navigation, quick access to settings, datasets, or content.

Main region layoutsThe main region hosts each section's primary content. Built with the “Fluid” component and a twelve-column grid, it's the most dynamic area of the layout, while other regions remain consistent throughout the user journey.

Spatial system scalesI created a unified spatial system keeps our designs consistent and our communication clear. It simplifies decision-making and creates a predictable visual rhythm that feels balanced and intentional.

Typography sizing scaleI defined a based on a 4pt baseline grid, line heights scale in 4pt increments. This system aligns component and layout scales with typography, creating a cohesive vertical rhythm.

Component sizing scaleBased on multiples of 4pt, our component sizing scale ensures consistent spacing rhythm and alignment across the UI.

IconographyWe built our icon set on top of Ionicons. Whenever we couldn't find a suitable icon, we designed a new one derived from the library to keep proportions and visual harmony consistent.

Elevation hierarchyElevation marks the distance of elements from the background and arranges them along the z-axis. To do this, each elevation level is defined by a specific shadow that simulates the way in which natural light is projected on objects depending on the distance to them.

Elevation levelsThe different elevation levels available correspond to the different levels of importance with which we want to organize the components throughout the UI.

Shape and radiusRounded corners are used throughout the platform to differentiate the different families of UI components based on their anatomy, level of interaction... etc.

Voice and toneOur voice defines how we communicate with users. While our voice stays consistent across all content, its tone adapts to each context and audience. Our voice is clear, informative, and relaxed. We use an informal style to write content that is both simple and instructive.

Components

We started by identifying the most common patterns in our product, and the building blocks users interact with every day. I had to inventory every way of doing things, every component created in the app. I also deleted or transformed not consistent or ineffective components and patterns. We defined a consistent set of components that could be reused and scaled across the platform.

Each component went through several design iterations and feedback rounds with designers and developers. We refined behaviors, variants, and states to make them more intuitive and accessible. This process helped us simplify the system and make it feel cohesive at every level.

To ensure consistency, we aligned Figma components with their coded counterparts. I took charge of bringing our Figma components to life in React for our components library, ensuring consistency between design and code across the library. Shared naming conventions and structure allowed both teams to work in sync, reducing friction and guaranteeing that what we designed matched exactly what users experienced.

Figma and Storybook libraryOverview of the component library showing buttons, badges, banners, progress bars... etc. Each component is implemented in React and TypeScript, with detailed documentation available in Storybook and Figma for designers and developers.

Component anatomyBreakdown of a single component, highlighting its structure, spacing, and interactive elements. This ensures clarity and consistency when components are implemented across the system.

States and variantsIllustration of the different states and variants of a component, showing how it should behave in different contexts. This helps maintain visual consistency and predictable user interactions.

Figma - Code AlignmentHighlights the connection between design and development. I translated Figma components into code, making sure the final product reflects the designers' intent and delivers a seamless experience to users.

Design tokens in actionExample of how design tokens are applied to a button component, with different types: color background, color text, shape, spacing, sizing... etc.

Implementation & Collaboration

We focused on bringing design and code together seamlessly, ensuring that the components created in Figma were faithfully implemented in the product. Our stack included React and TypeScript for component development, while Storybook served as the central documentation hub. By integrating Storybook into our workflow, both designers and developers could visualize components, explore interaction states, and understand usage guidelines in a single, shared environment.

To maintain consistency and alignment between design and development, we relied on design tokens, standardized naming conventions, and a structured review workflow. Every component went through pull requests, code reviews, and cross-checks with Figma designs, which helped catch inconsistencies early.

Collaboration was central to the success of our design system. Designers and developers worked closely throughout the process, sharing feedback at every stage. I facilitated collaboration between design and development, making sure both teams understood each other's requirements. With the support of a frontend developer, I implemented the components, producing a library perfectly aligned with the design system.

Design system component OverviewA Storybook example of Button component page, showing some general use information, different states and variants. This documentation helps designers and developers quickly understand how the component behaves, and how each variant fits within the design system.

Props TableA clear and structured list of the component's properties, such as size, variant, or onClick. Each prop is documented with its type, default value, and description, allowing developers to implement the component correctly without guesswork.

Usage guidelinesNotes describing when and how to use the component within the interface. These guidelines cover spacing, alignment, accessibility, and tone of interaction, ensuring a consistent user experience across the product.

Figma documentationA visual reference from Figma that complements the coded documentation. It shows the component's anatomy, tokens applied, and interaction patterns, helping bridge the gap between design intent and technical implementation.

Design tokens in docsEvery component documents the design tokens applied to it, making it easy for both designers and developers to understand how the visual style is constructed and how to maintain consistency when using or modifying the component.

Adoption & Rollout

I led the rollout of the design system across teams through internal demos, documentation updates, and onboarding sessions. I collaborated closely with product and engineering leads to ensure a smooth integration into existing workflows.

Continuous feedback from designers and developers guided each iteration, helping us refine the system based on real product needs. It was not easy, but one year after the design system was launched, we successfully onboarded all the main frontend teams on the company.

Process Snapshot

Design

Defined foundations, tokens, base components, and usability patterns.

Documentation

Created Storybook and Figma docs for shared use of design system.

Development

Built all the system libraries: components, design tokens, icons, and styles, using React, TypeScript, Sass and Style dictionary.

Rollout

Onboarded teams through demos, feedback loops, and training.

Impact

40% faster implementation, 100+ unified screens and 100% of usage of frontend engineering teams.

Impact & Outcomes

Consistency

The design system delivered measurable improvements across design and development workflows. By standardizing components, tokens, and interaction patterns, we significantly reduced inconsistencies and visual bugs across products.

Less implementation time

Designers and developers spent less time aligning details during handoffs, which streamlined collaboration and accelerated delivery. Implementation time per component decreased by nearly 40%, allowing teams to focus on solving real product challenges instead of re-creating UI elements.

Scalability

Beyond efficiency, the system brought coherence and clarity to the product experience. Over 100 screens were unified under a single design language, and team satisfaction increased as the process became more predictable and scalable.

BeforeBefore the design system, the Delivery Methods page suffered from visual inconsistency: excessive icons, uneven spacing, unstructured data layout, and colors that didn't align with the brand. Accessibility issues and weak hierarchy made the interface hard to read and navigate.

AfterThis is the same section after the implementation of the design system. The layout was restructured for clarity, with consistent spacing, a unified icon set, and a color palette that reflects the brand. Accessibility improvements and a clear hierarchy enhance readability and user navigation.

BeforeThis is the Home page before the design system was applied.

AfterThis is the Home page after the design system was applied: better space rhythm, better color contrast, usage of brand, more comfortable palettes... etc.

BeforeThis is the 'Data search' page before the design system was applied.

AfterThis is the 'Data search' page after the design system was applied: better use of typography, cleaner renderization of the table data, improved hierarchy... etc.

Dark themeOne of the most impactful changes enabled by the design system and design tokens was the introduction of a dark theme. It enhances usability in low-light environments and reduces eye strain for users who prefer darker interfaces.

Learnings and Next Steps

Building the Genesys Design System was a transformative experience that reinforced the importance of collaboration between design and development. One key learning was the value of early and continuous feedback from both teams, which helped us refine components and ensure they met real-world needs.

This is an ongoing journey. The next steps involve covering more components documentation, edge cases, and patterns, and the Storybook documentation needs to be more complete and detailed, because I estimate we only covers the 40% of the components at this point. We also need a more atractive home and overview pages, to make it easier for users to navigate and find the information they need.