Ali

Context

Oliver Technology was my first opportunity as a Lead Designer, where I worked with a team outside of Brazil. As the first designer hired by Oliver, I was responsible for building a small team of designers, standardizing the entire platform, and redesigning the existing workflow.

Ali is a platform for managing legal matters related to financial liabilities. It collaborates directly with US banks and law firms to help them manage cases, provide up-to-date debtor status checks, and handle documentation.

Process

Before establishing the design system, I conducted an extensive research on existing systems and how companies were building and organizing them. This involved analyzing our competitors, their target audiences, industry trends, as well as reviewing our design elements to pinpoint areas needing improvement.

Material Design was instrumental in this process. Its comprehensive guidelines and established patterns provided a solid foundation, allowing me to develop a cohesive and efficient design system tailored to our specific needs.

Design System purpose and principles

Oliver Technology lacked a comprehensive design system, leading to inconsistency and outdated practices. The documentation was ambiguous, leaving much open to interpretation, which hindered our product, UX, and engineering teams.

To address this, I developed a new design system, including an updated color palette, typography, and iconography for both web and mobile platforms. This overhaul streamlined the design process, ensured consistency, improved UX, UI, and product delivery across the organization.

Atomic approach

The architecture I chose to follow was inspired by Brad Frost’s Atomic Design methodology. I selected this approach due to its logical structure, which allows me to organize components by complexity and locate them quickly. This method aligned perfectly with my need for an intuitive and efficient system.

Atomic design in design systems organizes interface elements into modular blocks such as atoms, molecules, organisms, templates, and pages, facilitating the creation of consistent and scalable systems.

Documentation and Guidelines

High-quality component documentation is crucial for an effective design library, enabling quick and consistent decisions. I developed comprehensive, organized, and user-friendly documentation for our design system.

After the Figma components were approved, they were transferred to the Figma Atomic Components file, a shared library of assets. This allowed our team to easily drag and drop components into their designs, streamlining the workflow and maintaining consistency across all projects.

Design Central + Design Foundation

The Design System was built on two foundations within Figma. The Design Central housed all components (from atoms to organisms) used throughout the project, structured around Material Design for organizational inspiration, best practices, guidelines, tools, and documentation.

Meanwhile, the Design Foundation served as the repository for all tokens and variables used in components. It included all typography (sizes, spacing, line height...), color palettes, shadow effects, accessibility checks, object borders, item spacing, and opacity levels.

Central

Foundation