Design system

5 min. read

Process for the proposal, design and creation of Glamit's design system from scratch.

Design system Accessibility Scalability

Project length

3 months

Goals

Standardize all company products with a consistent Design system.
Make the library available for future developments.

Key responsibilities

Lead the design and creation of the Design system
Train our newest UI team member
Document all the components

As Glamit began developing more digital products to optimize our clients’ internal processes, I noticed that we lacked a consistent identity. Each project had its own component library, resulting in different tools for our operational team, each with varying patterns and components.

Taking initiative

To turn this into a viable project, I needed to present the proposal to the Product team Manager. To achieve this, I highlighted the detected problems caused by the absence of an organization-wide design system, explained how it impacts work efficiency, and outlined the benefits of implementing such a system, along with a roadmap to create our design system minimum-viable product.

Problems detected

Inconsistency

Each application had its own visual setting.

Accessibility

Components did not met the standards for level AA of accessibility.

Usability

None of the usability and UI best practices were being applied.

Advantages identified

Design systems serve as a centralized repository for components, patterns, and styles, fostering consistency across different experiences within an ecosystem. Moreover, they enable efficient management of large-scale visual updates or redesigns.

Scalability

By defining atoms, molecules and components.

Keeping focus

Less strain on design, more complex problem solving capabilities

Unified language

Visual consistency across products, channels, and departments.

Benchmark

I started benchmarking various design systems used by our operational teams, focusing on well-known platforms. My goal was to explore the components they utilized, identify common patterns, and maintain visual familiarity.

Material design: This was the most comprehensive and flexible design system we found, and it was also widely used by our users.
Atlassian design system: Since the entire company used Jira, we wanted to become familiar with its language and communication methods.
Salesforce design system: We focused on this system for our Customer Care teams.
Ant design system: This was the primary source of information for our developers.

Atomic design

Atomic Design by Brad Frost significantly influenced our design system at Glamit. It encouraged modular thinking, consistency, and scalability. By breaking down interfaces into atoms, molecules, organisms, and templates, we created a library of reusable components. This approach streamlined development and ensured visual coherence.

Results

The project started with aproximately 10 components that were essential to address all our user needs and Glamit's platforms. By the end of the year, the design system expanded to have 27 components and was used among all Glamit’s platforms and future projects.

Buttons

Prototype link

Text inputs