Design System and UI reskin
25% increase in usability scores from customer feedback.
Details
My Role: As a design lead for this project I led all design initiatives, worked with designers, product managers and developers
Team:
Marco Villarroel - Design Lead
Alexandre McLeod - Senior UX Designer
Duration: 4 Weeks
Deliverables: Information architecture, Design
system, High-fidelity mocks
Highlights
We developed a shared component library that unifies UI elements across all company products.
Reduction in design debt: 40% decrease in redundant UI components.
25% increase in usability scores from customer feedback.
Achieved WCAG 2.1 AA compliance, ensuring inclusivity.
Overview
When I joined Alida in 2020, the company was in the middle of an exciting transformation. Having rebranded from Vision Critical to Alida, they needed a fresh, cohesive experience across their suite of products. However, the challenge was clear: Over time, inconsistencies had moved into the UI, and aligning everything under one unified system was not an easy task.
After 24 years of independent growth, the interfaces had become inconsistent.
Making them more cohesive was essential.
To ensure our solutions were realistic, we worked closely with developers and took each product’s technical architecture into account.
Problem Statement
The organization’s product interfaces lacked consistency, leading to user confusion. We responded by creating a design system that aligned the UI across products while respecting existing architectural limitations.
Process
From the start, We knew that this wasn't just about aesthetics it was about usability, efficiency, and scalability. Each product had its own design challenges, and users moving between them would often encounter different interactions, layouts, and components.
To get a better grasp of the problem, We conducted an audit of all existing products. This helped pinpoint key inconsistencies in typography, spacing, button styles, and interactions. Additionally, I met with developers, and product managers to understand their pain points and workflow inefficiencies, also analyzed competitor design systems for industry benchmarks.
Basically, We had to dig through the UI and figure out where things were breaking down.
Outcome:
A comprehensive report detailing design challenges, inconsistencies, and opportunities for improvement.
Define Design Principles & Goals
A successful design system represents a shared language between design and development.
To ensure a smooth rollout, I focused on three core principles:
1. Consistency: Establishing standardized components and patterns that can be applied across all products.
2. Scalability: Creating a flexible system that can grow with the company’s evolving needs.
3. Developer-Friendliness: Designing components that are easy to implement and maintain, thereby minimizing design debt.
At this stage, I began drafting component libraries, ensuring that we were not merely adding another layer of complexity. The goal was to keep the approach simple, clear, and practical
Evolve
We gathered key insights from the audit and started by defining foundational elements like color, typography, spacing, and grids. This laid the groundwork for a scalable component library.
I worked closely with developers to ensure each component aligned with Alida’s architecture. We iterated often, testing in real scenarios to improve usability and accessibility. Some elements clicked right away. Others took a few rounds to get right. That’s the strength of a good design system, it grows through collaboration and iteration.
Results
The design system was a collaborative effort led by the UX team. Using an atomic design approach, we built a component system in Figma that unified UI elements across all products.
We leveraged Figma’s variant properties to keep components flexible and scalable. The system became central to the interface redesign and significantly sped up mock creation for new features.
Homepage
Surveys
Dashboards
The Impact
The new design system brought clarity and efficiency to Alida’s product ecosystem. It created a more cohesive user experience and improved collaboration between design and development, reducing inconsistencies and accelerating handoff.
A strong design system isn’t static, it grows with the company’s needs. After launch, I had the opportunity to visit Adobe’s headquarters in Lehi, Utah. We received enthusiastic feedback on the redesigned interface and new features. Recognition from a leader like Adobe was both validating and motivating.