Design System: Olé Design System

Various phases of component creation and documentation of a Design System

Role

Product Designer

Role

Product Designer

Role

Product Designer

Industry

Design

Industry

Design

Industry

Design

Duration

1 month (2022)

Duration

1 month (2022)

Duration

1 month (2022)

Stage 1. Atomic Design

In our first class, we delved into Atomic Design concepts, learning about atoms, molecules, organisms, pages, and templates. The goal was to create our rules in a clear and understandable way, independent of previous structures.

Stage 2. R.A.S.C.I. Matrix

We then defined the roles of each group member in developing the Design System using the R.A.S.C.I. Matrix (Responsible, Authority, Support, Consulted, Informed). Notably, our team members chose to stay actively involved in all aspects of the process, avoiding the "Informed" role to ensure comprehensive participation.

Stage 3. Stakeholder Analysis

To understand the impact of the Design System on various company areas, we conducted a stakeholder analysis. This involved documenting behavioral analyses in a table and graph, providing a visual perspective of each sector's power and interest regarding the Design System.

Stage 1. Atomic Design

Stage 2. R.A.S.C.I. Matrix

Stage 3. Stakeholder Analysis

Stage 4. Roadmap

After conducting Stakeholder Analysis and creating the Matrix, we developed the Go Product Roadmap model. This model defined quarterly deliverables and outlined the necessary stages for each release to ensure completeness.

Stage 5. Component Inventory

We aimed to create a Design System for an existing online platform. Our group chose Dribbble, an online community for showcasing artistic content. Due to the platform's complexity with multiple tabs and components, we divided the work among designers. Each designer focused on a specific tab, comparing and prioritizing basic and complex components.

An inventory was created in Notion, using the "Inspiration" page as a reference, and we documented the entire development process within Notion.

Stage 6. OKR

We established key objectives and outcomes for our Design System. This helped us understand the activities, dissemination, and changes that the Olé Design System would bring when applied to the platform.

Outcomes

Each designer selected a base component to create and worked with two types of tokens to gain a deeper understanding of Design System creation. We collaboratively defined a semantic rule to ensure tokens and components were consistently identified and applied.

During our research on Dribbble, we identified inconsistencies and proposed several changes:

Redefined product principles
Improved typography for greater accessibility
Enhanced spaces, colors, and states

Try it on Zeroheight

The final step involved publishing the tokens and components in the O͟l͟é͟ ͟D͟e͟s͟i͟g͟n͟ ͟S͟y͟s͟t͟e͟m͟ ͟o͟n͟l͟i͟n͟e͟ ͟l͟i͟b͟r͟a͟r͟y͟ ͟o͟n͟ ͟Z͟e͟r͟o͟h͟e͟i͟g͟h͟t͟. This was done to facilitate access for all users and developers.

Outcomes

During our research on Dribbble, we identified inconsistencies and proposed several changes:

Redefined product principles
Improved typography for greater accessibility
Enhanced spaces, colors, and states

Try it on Zeroheight

Other projects

Graduation project: a chatbot for people with epilepsy

The "Eva" chatbot, a technology-related innovation to help disseminate knowledge and information about health, using conversational flow

User Experience: Appropriate solutions for efficient agriculture fertilization

The online platform helps agricultural technicians recommend the best fertilizer for the soil

Redesign project: E-mail

Elevating the user experience of a renowned hosting company, SaaS, internet services and cloud computing company

Mobile Design: Soil analysis unified with recommendation

The mobile platform helps the users with soil analysis to recommend the best fertilizer for the soil

User Expericence Research: Catalogue of fertilizers

Reorganization of the information architecture on the fertilizer catalog page, adding product pricing

Redesign project: online beauty teaching platform

Designing a responsive app to connect beauty teachers and beauty enthusiasts, from concept to prototype.

Ana Neves

Ana Neves

Ana Neves