SECTOR

SECTOR

Design System

TYPE

UI/UX, Product Design

Production, Artwork, Guidelines

ROLE

UI Designer, UX Designer, IxD Designer

Graphic & UI Designer

UI Case Study showcasing the Architecture behind a Design System using Master and Child Components and Atomic Design Principles.

UI Case Study showcasing the Architecture behind a Design System using Master and Child Components and Atomic Design Principles.

UI Case Study showcasing the Architecture behind a Design System using Master and Child Components and Atomic Design Principles.

UI Case Study showcasing the Architecture behind a Design System using Master and Child Components and Atomic Design Principles.

UI Case Study showcasing the Architecture behind a Design System using Master and Child Components and Atomic Design Principles.

Component Library
&
UI KIT

Component Library
&
UI KIT

Component Library
&
UI KIT

Component Library
&
UI KIT

Component Library
&
UI KIT

Goals

Goals

Goals

Goals

Goals

This is a UI Case study on the development of a custom Design System for the client T&T. A Design System includes UI kits, Component Libraries, Styleguides, and Pattern libraries. Featuring the “Slider Master Component”, to showcase how a optimised design, QA and Dev process looks like.

This is a UI Case study on the development of a custom Design System for the client T&T. A Design System includes UI kits, Component Libraries, Styleguides, and Pattern libraries. Featuring the “Slider Master Component”, to showcase how a optimised design, QA and Dev process looks like.

This is a UI Case study on the development of a custom Design System for the client T&T. A Design System includes UI kits, Component Libraries, Styleguides, and Pattern libraries. Featuring the “Slider Master Component”, to showcase how a optimised design, QA and Dev process looks like.

This is a UI Case study on the development of a custom Design System for the client T&T. A Design System includes UI kits, Component Libraries, Styleguides, and Pattern libraries. Featuring the “Slider Master Component”, to showcase how a optimised design, QA and Dev process looks like.

This is a UI Case study on the development of a custom Design System for the client T&T. A Design System includes UI kits, Component Libraries, Styleguides, and Pattern libraries. Featuring the “Slider Master Component”, to showcase how a optimised design, QA and Dev process looks like.

Challenge

I've crafted this piece to visually articulate the significance of intentional UI Architecture when creating a digital product aiming to scale. In an era increasingly valuing automation, AI and UX, the nuanced role of a UI/UX designer in crafting a Design System is getting obscured.

I've crafted this piece to visually articulate the significance of intentional UI Architecture when creating a digital product aiming to scale. In an era increasingly valuing automation, AI and UX, the nuanced role of a UI/UX designer in crafting a Design System is getting obscured.

I've crafted this piece to visually articulate the significance of intentional UI Architecture when creating a digital product aiming to scale. In an era increasingly valuing automation, AI and UX, the nuanced role of a UI/UX designer in crafting a Design System is getting obscured.

I've crafted this piece to visually articulate the significance of intentional UI Architecture when creating a digital product aiming to scale. In an era increasingly valuing automation, AI and UX, the nuanced role of a UI/UX designer in crafting a Design System is getting obscured.

I've crafted this piece to visually articulate the significance of intentional UI Architecture when creating a digital product aiming to scale. In an era increasingly valuing automation, AI and UX, the nuanced role of a UI/UX designer in crafting a Design System is getting obscured.

My Contribution & Team

I created this architecture through a decade of experience creating design guides for every single client I worked with. Refined by working with various methodologies, teams, and companies, it's my gift to you to showcase the tangible value a dedicated designer with deep knowledge of design systems can bring to your product.

I created this architecture through a decade of experience creating design guides for every single client I worked with. Refined by working with various methodologies, teams, and companies, it's my gift to you to showcase the tangible value a dedicated designer with deep knowledge of design systems can bring to your product.

I created this architecture through a decade of experience creating design guides for every single client I worked with. Refined by working with various methodologies, teams, and companies, it's my gift to you to showcase the tangible value a dedicated designer with deep knowledge of design systems can bring to your product.

I created this architecture through a decade of experience creating design guides for every single client I worked with. Refined by working with various methodologies, teams, and companies, it's my gift to you to showcase the tangible value a dedicated designer with deep knowledge of design systems can bring to your product.

I created this architecture through a decade of experience creating design guides for every single client I worked with. Refined by working with various methodologies, teams, and companies, it's my gift to you to showcase the tangible value a dedicated designer with deep knowledge of design systems can bring to your product.

Solution

Refactoring child components into a Global Master Component able to cascade one single QA to all children and dependencies on Figma and on tools such as StoryBook, using modular and atomic design principles.

Refactoring child components into a Global Master Component able to cascade one single QA to all children and dependencies on Figma and on tools such as StoryBook, using modular and atomic design principles.

Refactoring child components into a Global Master Component able to cascade one single QA to all children and dependencies on Figma and on tools such as StoryBook, using modular and atomic design principles.

Refactoring child components into a Global Master Component able to cascade one single QA to all children and dependencies on Figma and on tools such as StoryBook, using modular and atomic design principles.

Refactoring child components into a Global Master Component able to cascade one single QA to all children and dependencies on Figma and on tools such as StoryBook, using modular and atomic design principles.

MY SERVICES

MY SERVICES

MY SERVICES

- UI Architecture
- Design System
- Design refactoring
- QA

- UI Architecture
- Design System
- Design refactoring
- QA

- UI Architecture
- Design System
- Design refactoring
- QA

- UI Architecture
- Design System
- Design refactoring
- QAl

- UI Architecture
- Design System
- Design refactoring
- QA

This UI Case Study is part of the development of a custom Design System for the client Turner & Townsend, during the development of 4 responsive dashboards.

This UI Case Study is part of the development of a custom Design System for the client Turner & Townsend, during the development of 4 responsive dashboards.

This UI Case Study is part of the development of a custom Design System for the client Turner & Townsend, during the development of 4 responsive dashboards.

This UI Case Study is part of the development of a custom Design System for the client Turner & Townsend, during the development of 4 responsive dashboards.

This UI Case Study is part of the development of a custom Design System for the client Turner & Townsend, during the development of 4 responsive dashboards.

Neatly organised

Neatly organised

Each symbol, piece or component is neatly structured and organized.

Each symbol, piece or component is neatly structured and organized.



1 organised

Nested Symbols and Overrides

Nested Symbols and Overrides

Nested Symbols
and Overrides

Nested Symbols
and Overrides

Override system based on nested symbols, following atomic design principles

Override system based on nested symbols, following atomic design principles

Override system based on nested symbols, following atomic design principles

Override system based on nested symbols, following atomic design principles



2 nested

Dynamic resizing

Dynamic resizing

Dynamic resizing

Dynamic resizing

Each component is elastic, automatically fitting any breakpoint

Each component is elastic, automatically fitting any breakpoint



component-stretch-3

Component Anatomy

Component Anatomy

Component Anatomy

Component Anatomy

Component Anatomy

This is the Slider Master Component which will be used to showcase how UI arquitecture is important. When set properly, all it's child components can be automatically QA'd.

This is the Slider Master Component which will be used to showcase how UI arquitecture is important. When set properly, all it's child components can be automatically QA'd.

This is the Slider Master Component which will be used to showcase how UI arquitecture is important. When set properly, all it's child components can be automatically QA'd.

This is the Slider Master Component which will be used to showcase how UI arquitecture is important. When set properly, all it's child components can be automatically QA'd.

This is the Slider Master Component which will be used to showcase how UI arquitecture is important. When set properly, all it's child components can be automatically QA'd.

component anatomy
component anatomy breakdown

Sections

Sections

Sections

Sections

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library.

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library



4 chart component
table component
component gif 1
table component gif

Component Combinations

Component Combinations

Component Combinations

Component Combinations

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage



component combinations 2

Source of all truth

Source of all truth

Source of all truth

Source of all truth

A Master Component serves as a source of truth to Developers and Designers. A developer codes components based on signed-off master components. Since all live components are replicas of that, poor pixel perfection is no issue.

A Master Component serves as a source of truth to Developers and Designers. A developer codes components based on signed-off master components. Since all live components are replicas of that, poor pixel perfection is no issue.

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

A Master Component serves as a source of truth to Developers and Designers. A developer codes components based on signed-off master components. Poor pixel perfection is no issue.

A Master Component serves as a source of truth to Developers and Designers. A developer codes components based on signed-off master components. Since all live components are replicas of that, poor pixel perfection is no issue.

zeplin-example 3

Component Library

Component Library

Components also have variants for states, interactive and UX behaviours, these are all accounted for when setting the UI for components.

CL_components

UI KIT

UI KIT

Atomic Symbols

Atomic Symbols

A master symbol contains nested. symbols. Instances of the master can be created and changes can be applied across all files with a click. 

Example of an instance: Elevation: 04/00, Shape: 4px corners, Color: Cyan, Tint: 0%, Shade: 0%, State: Disabled

A master symbol contains nested. symbols. Instances of the master can be created and changes can be applied across all files with a click. 

Example of an instance: Elevation: 04/00, Shape: 4px corners, Color: Cyan, Tint: 0%, Shade: 0%, State: Disabled

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

override layer

Forms & Tables

Forms & Tables

Forms & Tables

Forms & Tables

Forms & Tables

forms-3

Table system

Table system

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Tables can be dense to pack lots of data or standard, they have a defined structure: Header, content and footer cells. 

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Tables can be dense to pack lots of data or standard, they have a defined structure: Header, content and footer cells. 

This App assists Cost and Risk Managers track the cost evolution of a project, such as the construction of The Shard.
The goal is to assure the project is accurately managed.

table-gif

230 cell types

230 cell types

230 cell types

230 cell types

table-blue

Cell combinations

Cell combinations

Cell combinations

Cell combinations

table-1
table-3
table-2
table-7
table-6
table-8
table-4
table-9
table-5
table-10

Styleguide

Styleguide

Styleguide

A styleguide serves as key documentation on how to use colours, icons, layouts, typography, charts, spacing and more.

A styleguide serves as key documentation on how to use colours, icons, layouts, typography, charts, spacing and more.

A styleguide serves as key documentation on how to use colours, icons, layouts, typography, charts, spacing and more.

Guides for charts, typography, spacing, colors, etc

TT_-styleguide_typography-1
TT_-styleguide_layout
TT_-styleguide_images
UI-KIT
The end.
The end.
The end.
The end.
The end.
Theend_anim_ComponentLib
Next Project

Wimbledon x IBM

Wimbledon x IBM

Wimbledon x IBM

Wimbledon x IBM

Wimbledon x IBM

LAST UPDATE

LAST UPDATE

LAST UPDATE

LOCAL TIME

LAST UPDATE

Dec, 2023

Dec, 2023

Dec, 2023

Dec, 2023

LOCAL TIME

LOCAL TIME

LOCAL TIME

Real-Time Display

CONTACT

CONTACT

CONTACT

CONTACT

Logo@0.33x

Marcia Gaudencio © 2023.

Marcia Gaudencio © 2023.

Marcia Gaudencio © 2023.

CONTACT

LOCAL TIME

CONTACT

CONTACT

SOCIAL

SOCIAL

SOCIAL

SOCIAL

LOCAL TIME

LOCAL TIME

LOCAL TIME

Real-Time Display

LAST UPDATE

LAST UPDATE

LAST UPDATE

LAST UPDATE

Dec, 2023

Email

Dec, 2023

Dec 2023

Dec, 2023

Logo@0.33x

Marcia Gaudencio © 2023.

Marcia Gaudencio © 2023.

Marcia Gaudencio © 2023.