Design System Creation and Documentation

Details of the various phases in the development of a Design System

Role

Product Designer

Industry

Design, Design Ops

Duration

1 month (2022)

Step 1: Atomic Design

I implemented the concept of Atomic Design, structuring atoms, molecules, organisms, templates and pages.

This method ensured that the rules were clear and consistent, allowing scalability without dependence on previous structures.

Step 2: R.A.S.C.I. Matrix

I defined the roles of each member in the development of the Design System using the R.A.S.C.I. matrix. We prioritized a collaborative approach, where everyone participated actively in all stages, eliminating the "Informed" role for greater team integration.

Step 3: Stakeholder Analysis

I conducted a stakeholder analysis to understand the impact of the Design System on the different sectors of the company.

The result included behavioral analyses documented in tables and graphs, visually representing the level of interest and power of each area in relation to the project.

Step 1: Atomic Design

I implemented the concept of Atomic Design, structuring atoms, molecules, organisms, templates and pages.

This method ensured that the rules were clear and consistent, allowing scalability without dependence on previous structures.

Step 2: R.A.S.C.I. Matrix

Step 3: Stakeholder Analysis

I conducted a stakeholder analysis to understand the impact of the Design System on the different sectors of the company.

The result included behavioral analyses documented in tables and graphs, visually representing the level of interest and power of each area in relation to the project.

Stage 4: Delivery Roadmap

I developed a roadmap based on the Go Product Roadmap model, organizing quarterly deliveries and defining the stages required for each launch.

Step 5: Component inventory

I created a complete inventory of components based on an existing platform (Dribbble). The complexity of the platform required the division of tasks between designers.

We use Notion to document the entire process, from analysis to the creation of basic and complex components.

Step 6: OKRs and Final Publication

I established clear OKRs to measure the impact of the Design System, including improvements in product principles, typographic accessibility, and optimizations of spaces, colors and states.

We finalized the project with the publication of the "Olé Design System" in the Zeroheight online library, guaranteeing accessibility for users and developers.

Results

Each designer selected a base component to create and worked with two types of tokens to gain a deeper understanding of the creation of the Design System.

We defined this division collaboratively and everyone had the opportunity to understand more about the topic.

Click here to access the Zeroheight of our Design System

Skills used

Design Systems
Atomic Design
Stakeholder Management
Roadmap and Strategic Planning
Notion and Zeroheight documentation
OKRs and Impact Measurement
Accessibility and Visual Consistency

Results

Each designer selected a base component to create and worked with two types of tokens to gain a deeper understanding of the creation of the Design System.

We defined this division collaboratively and everyone had the opportunity to understand more about the topic.

Click here to access the Zeroheight of our Design System

Skills used

Design Systems
Atomic Design
Stakeholder Management
Roadmap and Strategic Planning
Notion and Zeroheight documentation
OKRs and Impact Measurement
Accessibility and Visual Consistency

Ana Neves

Ana Neves

Ana Neves