STANDARDIZING B2B
COMPONENTS
MY ROLE
UI Designer
TIMELINE
4 months
STACK
Figma, FigJam, Jira, Zeroheight
IMPACT
43% Faster Dev Cycles, 5 New Modules Shipped
OVERVIEW
Atta (part of QuintoAndar) is a financial platform for credit and insurance. As the Product Designer responsible for the B2B dashboard, I led the creation of a Design System from scratch during a fast-paced integration. I transformed an inconsistent, low-contrast interface into a standardized, accessible platform that enabled the team to ship new credit and insurance modules 43% faste
THE CHALLENGE
The platform was scaling fast, but the design couldn't keep up. With a small team (3 designers, 1 PM), we had to launch new products on a dashboard that suffered from deep visual inconsistencies and critical usability issues. My mission was to eliminate manual UI rework and fix accessibility barriers that were frustrating backoffice users and slowing down engineering.
THE PROBLEM
The dashboard was a "usability minefield" that hindered delivery. This created three critical issues:
Accessibility Failures: Low contrast made key input fields unreadable (developers were even using #000000 strokes just to see the UI), failing WCAG standards.
Zero Documentation: No single source of truth for components, leading to "handmade" UI elements and massive design debt with every new feature.
Maintenance Nightmare: Two different teams (Credit and Insurance) were creating divergent patterns, making it impossible to scale the portfolio without breaking the UX.
SYSTEM AUDIT
mapped the existing dashboard to identify why the UI was breaking. The lack of standardized interaction states (hover, focus, error) wasn't just a visual issue—it was the root cause of user errors in credit processing. This audit shifted our goal from "reskinning" to building a functional, state-driven architecture.
VISUAL SYSTEM & UI
I developed a scalable visual language from the ground up to ensure the platform could handle the merging of Atta and QuintoAndar’s ecosystems.
Token-Driven Design: Implemented design tokens for colors and inputs, allowing for global updates and better engineering alignment via Jira.
Accessibility-First UI: Focused on distinct states (Default, Hover, Focus, Error) to guide users through complex financial forms without confusion.
Documentation as Legacy: Centralized all patterns in Zeroheight, ensuring that even after project shifts, the design standards remained clear for the entire organization.
DOCUMENTATION
I developed a scalable visual language from the ground up to ensure the platform could handle the merging of Atta and QuintoAndar’s ecosystems.
Token-Driven Design: Implemented design tokens for colors and inputs, allowing for global updates and better engineering alignment via Jira.
Accessibility-First UI: Focused on distinct states (Default, Hover, Focus, Error) to guide users through complex financial forms without confusion.
Documentation as Legacy: Centralized all patterns in Zeroheight, ensuring that even after project shifts, the design standards remained clear for the entire organization.
RESULTS
I replaced a fragmented interface with a high-performance system, turning a bottlenecked design process into a scalable engine for new financial products.
43% Dev Speed
Eliminated manual UI rework, significantly reducing the design-to-development cycle.
5 New Modules
Enabled the rapid launch of five credit and insurance features during a 4-month sprint.
WCAG Ready
Fixed all contrast issues, ensuring full accessibility and a fluid workflow for backoffice users.
WCAG Ready
Fixed all contrast issues, ensuring full accessibility and a fluid workflow for backoffice users.
