Home

Portfolio

Contact

Aleate | Design System

A scalable design system built to unify UI patterns across multiple B2B and B2C software products, improve team efficiency, and support consistency in development.
Product Design
Design System
UX/UI
Client
Internal Initiative (Aleate)
Date
06.2023 - 11.2025
Role
Lead System Designer
Two mobile screens using design system components: a login screen and an editable content table.

At first glance

The challenge
  • Aleate is a consultancy specialized in digitalizing business processes through custom B2B and B2C software.
  • Our delivery pace was slowed by repeated UI work, inconsistent interfaces, and misalignment between designers and developers.
The solution

I initiated and led the development of a scalable design system, a shared foundation that streamlined design, improved handoffs, and helped our teams ship faster without sacrificing quality.

Consistency and alignment between design and development

Design time and rework across projects

Adopted across 8+ enterprise web apps

Context

Aleate’s model depended on shipping fast, custom digital platforms for clients. But speed created chaos.

Each new project had its own components, styles, and code. Designers weren’t aware of Angular’s technical constraints, and developers couldn’t fully interpret design intent. The communication was unefficient.

Duplicated design work

Misaligned interfaces between projects

Missed deadlines (two projects were delivered late)

Frustration across teams

Before
Flowchart showing an iterative process with four purple circles labeled Client feedback, Design, Dev, and Fix, connected by arrows indicating feedback loops and interactions.
After
Flowchart with four purple circles labeled Design System, Design, Client feedback, and Dev, connected by arrows showing a cycle between Design System and Design, a feedback loop between Design and Client feedback, and a downward arrow from Design to Dev.
“We weren’t slow because of bad design, we were slow because we weren’t aligned.”

My Role

At first, I was the advocate for the idea. After gaining buy-in from the CEO, PM, and dev team, I became the lead designer responsible for defining, building, and maintaining the system.

‍
Key contributions:
  • Conducted the initial audit and identified high-impact components (buttons, tables, charts, inputs, layouts).
  • Created the Figma base library and guided its integration into Angular and other frameworks.
  • Collaborated with developers to iterate on component behavior and constraints.
  • Documented usage, conventions, and naming for cross-team clarity.
  • Led the system’s revival and adoption campaign after a dev team restructuring.

‍

“My role evolve from designer, to system advocate to design system owner.”

Approach and Strategy

We didn’t start by designing everything. We started by fixing what hurt most.At first, I was the advocate for the idea. After gaining buy-in from the CEO, PM, and dev team, I became the lead designer responsible for defining, building, and maintaining the system.

Start small, iterate fast

Focused on high-impact, reusable components to build momentum.

Collaborate deeply

Weekly design critiques, async feedback, and paired sessions with devs.

Build for scalability

Used Material 3 as foundation, defined clear naming conventions, and documented every decision.

“The goal wasn’t perfection, it was creating something people would actually use.”

Key decisions and iterations

We iterated constantly and learned through trial, feedback, and failure.

Dashboard flexibility

Early versions forced a rigid dashboard structure. We replaced it with flexible templates that could adapt to different client needs.

Example of 'Before' showing a dashboard with rigid grid layout and Header Bar with excessive shadow and elevation effects.
Example of 'After' showing a dashboard with more elements to filter and sort data and a flexible grid.
Navigation bar layout

We maintained a lateral navigation bar to improve readability and screen flow. Top bars proved harder to scan and limited scalability, so we refined the side menu to be collapsible, allowing users to expand or minimize it depending on their workflow.

Dashboard interface with a collapsible navigation sidebar containing four labeled menu options, showing grid responsiveness.
Tables and Data density

Reduced excessive whitespace without overcrowding data, improved readability and efficiency.

Example of 'Before' showing wasted header space and scattered actions in an interface with filters and buttons.
Example of 'After' showing a screen with improved header with navigation feedback, space-saving action bar and more data at a glance in the content table.

Collaboration and Alignment

The success of the design system wasn’t technical, it was human.

  • Partnered with the PM to prioritize audits and improvements.
  • Worked closely with the lead developer to test feasibility and refine component behavior.
  • Encouraged designers to contribute via 1:1 sessions and retros.
  • Reintroduced the system after a full dev team turnover, the new team quickly adopted it thanks to documentation and advocacy

‍

Flowchart of collaboration with three interconnected circles labeled Design, Project Manager, and Developer showing bidirectional arrows between each for communication.
“Our collaboration wasn’t just meetings, it became part of our workflow.”

Results and impact

Even without formal metrics, the results were visible in our workflow and output quality.

Reduced repetitive design work
More predictable and aligned handoffs
Consistent visual language across apps
Faster onboarding for new designers and devs
Teams could focus on client needs, not component recreation
Collage of multiple digital dashboard screens displaying charts, graphs, tables, and analytics data using the Design System components.

These examples show how the system is organized in practice, from foundational styles and iconography to component structure and scalability.

Design system style guide showing typography with font sizes and weights, color palette with primary, secondary, neutral, and complementary colors, and effects including elevations and background blur levels.Iconography sorted by categories including Accessibility, Charts and analytics, Shopping and money, Communication, Time, People and accounts, Arrows and navigation, Devices, Actions, Organize, Confirmation and alerts, Audio and video player, Places and objects, and Files with corresponding icons under each category.User interface design specifications showing header navigation bars in expanded, collapsed, and mobile views with measurements, plus user identification component states including default, hover, focused, pressed, and selected.
“The system became a strategic asset, not a static library, but a living foundation that evolved with every new project.”

Lessons and Reflections

This project taught me that design systems are as much about people and culture as they are about components. Advocacy, communication, and patience are crucial to create adoption and trust.

‍
Key contributions:
  • Start with pain points that matter.
  • Design systems need advocates as much as builders.
  • Clarity and collaboration create scalability.
  • Standardization shouldn’t kill creativity, it should enable it.

‍

“Design systems are not about limiting designers, they’re about amplifying them”

Other projects

Compliance Risk Assessment Tool
Product Designer
A digital tool that evaluates business compliance with workplace regulations in Mexico, translating complex legal requirements into clear risk insights and actionable plans.
Devices showing diagnostic reports, data dashboards, and Gantt charts for project planning, alongside a printed A4 report with results.
GAT System
Product Designer
A custom web and Android solution designed for managing and conducting large-scale public transportation surveys in urban areas.
Laptop showing a project dashboard with a map of Mexico, alongside two mobile screens displaying a transportation survey and daily mobility questions.
Public Transport Management Platform
A cross-platform software solution for managing public transportation services, combining an admin dashboard and a user-facing mobile app.
Laptop showing a dashboard with charts, alongside two mobile screens displaying a map-based transit app with bus route details.
See more work →