Unito is a powerful workflow solution that links users’ favorite work apps and tools. What sets Unito apart is its unique blend of user-friendly design, deep integration capabilities, and two-way synchronization.

Product design, Design ops

Team

Nilovna Bascunan-Vasquez, Senior Developer Manager
With Unito

Timeline

Apr – Jul 2024

In the spring of 2020, following Unito’s first funding round, the product team embarked on a major UX/UI revamp, starting with the core user journey—the flow builder. This key feature, a five-step wizard allowing users to create connections between tools, was central to the product’s value.

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. 

Much of the app’s complexity is hidden from users, resulting in a relatively small number of pages and components needed for the initial version.

We planned to establish a dedicated team to manage the design system, with ambitious goals for future expansion.

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.

Objective

Introduce all Ant D components into our environments (Figma + Storybook) without altering them, ensuring they are ready for use in subsequent design and development phases.

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

Objective

Modify Ant D components to meet our UI and UX requirements and align with our design guidelines.

Success criteria

→ Components remain functional and performant post-customization
→ There is a visible alignment between the customized components and our design guidelines

Action Plan

1️⃣ Build 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

2️⃣  Collaborative customization sessions: Conduct 5 live sessions with Nilovna to review and customize the Ant D components according to Unito’s design guidelines.

3️⃣ Component 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

Objective

Systematically replace legacy components with the new Ant D-based components across the app.

Success Criteria

→ Each migrated component is fully functional and QA both in Storybook and Figma
→ No significant regressions are reported, ensuring the user experience is maintained or improved
→ Documentation is updated to reflect the migration changes for each component.

Action Plan

1️⃣ Prioritize 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

2️⃣ Incremental Approach: Perform the migration gradually, ensuring it aligns with other ongoing initiatives to avoid disruptions.

3️⃣ Figma 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.

Objective

Remove all legacy components from both the codebase and Figma.

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

Action Plan

Not started yet.

morgane.davy@gmail.com . LinkedIn