Unito · Design ops · 2023–2024
Elevating Unito’s Design System to Global Standards
At a Glance
Recap
Three years in, Unito’s home-grown design system took too much effort to maintain and scale, while the team needed to focus on other priorities.
My Role
Product design and design ops. I structured the migration in four stages, built the inventory and progress tracker, and customized Ant Design in Figma to fit Unito’s guidelines. Back in 2020, I co-built Mimic’s foundations.
Team
- Nilovna ↗ (opens in a new tab), Senior Developer Manager
- Mimic foundations (2020): Julien ↗ (opens in a new tab), Product Design Manager, and Andrew ↗ (opens in a new tab), Product Designer
Timeline
April – July 2024
Outcome
The Ant Design–based design system is available in Figma and Storybook, customized to Unito’s guidelines, and used in new projects.
- 4stages, each with an objective and a clear finish line.
- 5live pairing sessions with engineering to customize components.
- 0product freeze. The migration ran alongside the roadmap.
01Context
A Growing Team, and the Same Questions Every Week
Unito connects people’s favorite work tools with two-way sync. In spring 2020, after its first funding round, the product team started a major UX/UI revamp, beginning with the flow builder: a five-step wizard to connect two tools.
Alongside UX research and prototyping, the team also began considering broader strategic questions:
- How do we plan for scalability?
- How can we improve our speed and efficiency?
- How do we streamline processes with a growing team?
- How do we ensure design consistency across the app?
It became clear that implementing a design system would be crucial in addressing these challenges.
We decided to start small, focusing on the immediate needs of the squads rather than building or acquiring a comprehensive system from the outset.
Why a Home-Grown System, in 2020
A Small Visual Surface
Most of Unito’s complexity is hidden from users, so we needed few pages and components to start.
A Growing Team
We planned a dedicated team to own the design system.
Unito’s Own Identity
We wanted the app to look like Unito, not like a library.
The goal was to create something the team could easily adopt and iterate on over time. Thus, in a collaborative effort led by Product Design Manager Julien, along with Andrew and myself, we laid the foundations of the design system, Mimic—starting with 11 core components.
02Problem
Fall 2023: A Reality Check
Three years after its initial implementation, the team had to reassess Mimic’s limitations and face a reality check. The maintainability and scalability of the library demanded too much effort, especially as the team needed to focus on other priorities within the company.
We decided to transition to an existing library, Ant D—one that was well-maintained, with more mature components, thoroughly tested, reliable, and stable. This decision also aimed to streamline and declutter the client-side codebase, improving maintainability, efficiency, and making future design and development efforts easier.
Which became our problem statement
How might we get a mature, reliable library without losing Unito’s identity or pausing product work?
03Solution
Four Stages, One Component at a Time
Bring Every Component In, Untouched
All Ant D components land in Figma and Storybook as they are, ready for design and development.
Success criteria
- All Ant D components are accessible in Figma, under ‘Ant Design System for Figma 5.9’
- Designers can find Ant D components from the ‘Assets search’
- All Ant D components are accessible within our Storybook
- Developers can easily pull in Ant D components for experimental and future development use
Make Ant D Look and Feel Like Unito
Modify Ant D components to meet our UI and UX requirements and align with our design guidelines.
Success criteria
- Components stay functional and performant
- Components visibly match Unito’s UI and UX guidelines
Action plan
1Build an inventory and progress tracker
Create a comprehensive inventory of all Ant D components and develop a progress tracker to monitor the migration.
MIMIC – AntD Migration Inventory and Progress Tracking ↗ (opens in a new tab)
2Collaborative customization sessions
Conduct 5 live sessions with Nilovna to review and customize the Ant D components according to Unito’s design guidelines.
3Component customization in Figma
Customize all components into the design system file in Figma, including the following steps:
- Add new Ant D components into the design system
- Customize each component based on Unito’s specific design guidelines
- Identify missing variants and design the necessary ones
- Create and test new variants to ensure they align with Unito’s requirements
Replace Legacy Components, Simplest First
Systematically replace legacy components with the new Ant D-based components across the app.
Success criteria
- Each component passes QA in Storybook and Figma
- No significant regressions
- Documentation is up to date
Action plan
1Prioritize migration by difficulty
Begin migrating components based on their complexity—start with simpler ones before tackling more complex elements. More details available in MIMIC – AntD Migration Inventory and Progress Tracking ↗ (opens in a new tab).
2Incremental approach
Perform the migration gradually, ensuring it aligns with other ongoing initiatives to avoid disruptions.
3Figma integration
- Use customized Ant D components in new design projects. This will help test and refine the components in a real-world context.
- Review the more complex components (molecules) that will serve as a reference for live testing.
Remove What’s Left Behind
Delete legacy components from the code and from Figma, so nobody picks the old version by mistake.
Success criteria
- The application runs smoothly post-cleanup, with no lingering references to legacy components
- All Ant D components are fully integrated and functional within the app
- Designers can’t retrieve legacy components in Figma through the search assets
04Retrospective
Conclusion and Main Challenges
Migration Length and Tracking
The migration occurred alongside other initiatives, which allowed us to tackle new components during ongoing projects. However, this approach extended the migration timeline longer than expected, making progress harder to track effectively.
Lack of a Centralized Team
Without a dedicated team focused solely on the migration, progress was slower. This made it difficult to stay on schedule and contributed to delays.
Complexity of Components
We are unable to predict when the team could address the more complex components technical migration.
Impact on Design and Development
The incomplete migration affected both the design and implementation processes, leading to delays and inefficiencies until the system is fully transitioned.