Many companies have UI kits disorganized, delaying development. This was my restructure for Turner and Townsend.
With 70 years of business, it was time to migrate to digital. I joined a digital transformation team to migrate to a digital environment.
With 70 years of business, it was time to migrate to digital. I joined a digital transformation team to migrate to a digital environment.
With 70 years of business, it was time to migrate to digital. I joined a digital transformation team to migrate to a digital environment.
Many companies have UI kits disorganized, delaying development. This was my restructure for Turner and Townsend.
Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.
Designing four dashboards for staff, project, cost, supply chain management, risk and asset rationalisation.
Designing four dashboards for staff, project, cost, supply chain management, risk and asset rationalisation.
Designing four dashboards for staff, project, cost, supply chain management, risk and asset rationalisation.
Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.
Each symbol, piece or component is neatly structured and organized.
Each symbol, piece or component is neatly structured and organized.
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
Each component is elastic, automatically fitting any breakpoint
Each component is elastic, automatically fitting any breakpoint
Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage
Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage
Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage
Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage
Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage
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
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
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
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
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
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.
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.
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.
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.
Every cell is a symbol, characters cells align to the left and values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.
Every cell is a symbol, characters cells align to the left and values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.
Guides for charts, typography, spacing, colors, etc
Guides for charts, typography, spacing, colors, etc
Guides for charts, typography, spacing, colors, etc
Guides for charts, typography, spacing, colors, etc
Other projects
Ciclo de ConversasBranding, UI Design, Concept
SuperRareUI & UX, Concept, Product, QA
SuperRare - sneek peekUI & UX, Concept, Product, QA
Turner and Townsend - Cost Control DashboardCase Study, UI & UX, Product, QA
IBM Wimbledon ChampionshipsIllustration, Motion