Designing a scalable design system for enterprise operational platforms
Summary
Evoke develops several internal operational platforms used across departments such as HR, compliance, and business operations. These tools were built using OutSystems, a low-code platform that enables rapid enterprise application development.
As the number of internal products increased, UI patterns and interaction behaviors began to diverge across teams. This created inconsistencies, duplicated components, and unnecessary friction for users moving between systems.
To address this, I designed and implemented a Design System tailored specifically for OutSystems, establishing reusable components, interaction standards, and a shared design language across internal products.
The system enabled teams to build complex operational tools faster while improving consistency and usability.
Timeline: 2025
Context
Internal platforms at Evoke support complex workflows such as:
- compliance case review
- hiring approvals and HR workflows
- operational dashboards
- internal process automation
These products involve multiple roles, strict validation rules, and data-heavy interfaces.
Although OutSystems accelerated development, teams were building UI patterns independently, which resulted in:
- inconsistent interaction patterns
- duplicated UI components
- unpredictable validation behavior
- fragmented user experiences across tools
As more platforms were introduced, the need for a shared design system became increasingly critical.
My Role
Senior Product Designer responsible for defining and implementing the design system.
Responsibilities included:
- auditing existing internal tools
- defining system foundations and tokens
- designing reusable components
- aligning the system with OutSystems engineering constraints
- structuring the Figma design system architecture
- documenting component usage
- supporting engineering implementation
- guiding system adoption across teams
Tools: Figma, OutSystems
The Problem
Without a shared design system, internal platforms suffered from several issues.
Inconsistent interfaces
Similar UI elements behaved differently across products.
Duplicated development work
Engineers frequently rebuilt components from scratch.
Unclear interaction standards
Validation states, loading behavior, and system feedback patterns varied between applications.
Scaling challenges
As new internal tools were introduced, maintaining usability and consistency became increasingly difficult.
Goals
The design system aimed to:
• establish consistent UI and interaction standards
• reduce design and development duplication
• accelerate delivery of new internal platforms
• improve usability across operational tools
• create a shared design language between design and engineering teams
Constraints and Approach
The system needed to align with OutSystems architecture, meaning that components had to map realistically to the platform’s widget structure.
Instead of designing a theoretical UI kit, the design system was developed iteratively alongside real product development, ensuring that each component addressed actual workflow needs.
Key principles included:
- consistency over novelty
- engineering feasibility
- operational clarity
- scalable component architecture
Key Improvements
Interface standardization
The system introduced standardized patterns for:
- forms and validation
- data tables and dashboards
- workflow states
- system messaging and alerts
This created predictable interaction patterns across internal platforms.
Component library
Reusable components were created for common enterprise interface elements:
- form inputs
- dropdown selectors
- multi-step workflows
- data tables with sorting and filtering
- status indicators
- notifications and alerts
Each component included clearly defined states such as:
default
focus
error
disabled
loading
Token-based foundations
To ensure scalability, the system used semantic design tokens for:
- color roles
- spacing
- typography hierarchy
- elevation and layering
Using tokens allowed components to remain consistent across products while still supporting future evolution.
Workflow patterns
Because many internal tools rely on multi-step processes, the design system introduced standardized workflow patterns including:
- approval flows
- task dashboards
- status indicators
- progress visualization
These patterns significantly improved clarity in operational interfaces.
Design System Architecture
The system was structured in layers:
Foundations > Tokens > Components > Patterns > Product workflows
This architecture allowed the system to evolve while maintaining backward compatibility.
Design and Delivery
The design system was structured in Figma using a scalable architecture:
Foundations
Color tokens
Typography
Spacing rules
Layout guidelines
Components
Reusable UI elements with variants and states.
Patterns
Common enterprise workflows such as tables, dashboards, and multi-step forms.
Documentation
Usage guidelines and interaction standards.
Engineering Collaboration
A critical aspect of the project was aligning the design system with OutSystems implementation constraints.
I collaborated closely with engineers to:
- map Figma components to OutSystems widgets
- define feasible interaction behaviors
- align layout structures with platform grid rules
- validate component states during implementation
This collaboration reduced the gap between design and development.
Adoption Strategy
Adoption was supported through close collaboration with product and engineering teams.
Instead of enforcing the system top-down, we focused on:
- building components aligned with real workflows
- supporting engineers during implementation
- demonstrating efficiency gains from reusable components
Over time, the design system became the foundation for new internal platforms.
Maintenance and Evolution
The design system was designed as a living product rather than a static asset.
The system evolved through:
Product-driven improvements
New workflows introduced new component requirements.
Feedback loops
Engineers and designers provided feedback based on implementation challenges.
Iterative refinement
Components were improved based on real usage patterns.
Outcomes
The design system created a scalable design foundation for Evoke’s internal platforms.
Key results included:
- improved UI consistency across internal products
- faster delivery of new workflows
- reduced duplication in design and development
- clearer interaction standards for complex workflows
The system also strengthened collaboration between design and engineering teams.
What this demonstrates
This project demonstrates my ability to design and maintain design systems for enterprise SaaS environments.
Key capabilities include:
- translating complex operational workflows into scalable UI patterns
- designing systems aligned with engineering constraints
- building reusable component libraries for enterprise tools
- establishing governance and evolution models for design systems
- enabling cross-team collaboration through shared standards
Next Steps
Potential future improvements include:
further integrating the design system with engineering libraries
expanding the component library as new workflows emerge
introducing usage metrics to track system adoption
improving documentation and onboarding for new teams