Portfolio
Aug 2019
Unity in Design
A Design System Implementation unifying user interface and experience across fragmented products in a product-agnostic company
A Design System Implementation unifying user interface and experience across fragmented products in a product-agnostic company
At Conta Azul, one of Brazil’s most used B2B SaaS platforms, I turned the design system into a real product that could scale alongside the organization. I connected the work of design and engineering so that tokens mapped directly to code, governance kept pace with delivery, and adoption became cultural as well as technical. The result was a coherent user interface across previously fragmented products, faster delivery for teams, and a measurable improvement in accessibility.
The company had grown through acquisitions and maintained more than ten active products with divergent visual styles and frequent rework. The absence of a single source of truth for components, patterns, and brand created visual inconsistencies, confusion for users, and slow handoffs. At kickoff, twelve products were in development, eighteen squads worked across web and mobile, and about one hundred and forty people contributed across engineering, design, QA, and product.
I treated the design system as a product with a backlog, a roadmap, and clear accountabilities across design and engineering. I conducted a full interface inventory, captured screenshots and defects, and measured hours spent on rework during handoffs. From those findings I defined tokens for color, typography, spacing, radius, elevation, and motion, all connected to CSS variables and TypeScript constants, which enabled safe and predictable theme creation.
One challenge: Early attempts to introduce accessibility guidelines fell flat because they were too theoretical. Designers and engineers ignored them. I learned to pair every rule with a concrete example from our product, which shifted adoption significantly.
UI inconsistencies reduced by 50% in six months · Design-to-dev handoff sped up by 30% · All core teams onboarded within a year · Accessibility score improved by 15 points across audited screens
I delivered a living system in Figma with tokens synchronized to code through a token pipeline. I published a documentation site with usage guidance, do and do not examples, accessibility checklists, and a contribution process. I packaged a React component library that exposed tokens as CSS variables and backed it with Storybook and continuous visual regression via Chromatic. In the first three months after launch I ran ten onboarding workshops and rolled out health dashboards that tracked token coverage, component usage, and contribution throughput.
The indicators confirm the shift. User interface inconsistencies dropped by about fifty percent within six months, measured by duplicate component counts and visual diff incidents. Time from design complete to first merged pull request improved by about thirty percent when measured in Jira cycle time. Accessibility scores on audited screens climbed by fifteen points according to axe and manual checks for WCAG 2.2 AA. By month four, seventy five percent of active repositories imported tokens, and by month six the number reached eighty seven percent. The main application reduced bundle size by about fourteen percent after replacing bespoke styles with tokenized variables. Theme delivery moved from one sprint to two days. A rebrand in the payroll module shipped through token changes only, and the visual adjustment reached production the next morning.
This project was about more than creating a library of components; it was a cultural transformation. By presenting the design system as a shared product and ensuring cross-disciplinary involvement, adoption became a natural progression rather than a forced change.