Overview

Overview

Overview

Overview

Overview

Deliverables

Deliverables

Deliverables

Deliverables

Deliverables

Turner & Townsend is a multinational providing program, project and cost management for property, infrastructure and natural resources. T&T is known for large-scale constructions such as The Shard and airports in Hong Kong and Abu Dhabi.

My Role
UI Designer, UX Designer, 
IxD Designer 

Turner & Townsend is a multinational providing program, project and cost management for property, infrastructure and natural resources. T&T is known for large-scale constructions such as The Shard and airports in Hong Kong and Abu Dhabi.

My Role
UI Designer, UX Designer, 
IxD Designer 

Turner & Townsend is a multinational providing program, project and cost management for property, infrastructure and natural resources. T&T is known for large-scale constructions such as The Shard and airports in Hong Kong and Abu Dhabi.

My Role
UI Designer, UX Designer, 
IxD Designer 

Turner & Townsend is a multinational providing program, project and cost management for property, infrastructure and natural resources. T&T is known for large-scale constructions such as The Shard and airports in Hong Kong and Abu Dhabi.

My Role
UI Designer, UX Designer, 
IxD Designer 

Turner & Townsend is a multinational providing program, project and cost management for property, infrastructure and natural resources. T&T is known for large-scale constructions such as The Shard and airports in Hong Kong and Abu Dhabi.

My Role
UI Designer, UX Designer, 
IxD Designer 

Project

Project

Project

Project

Project

T&T has been operating in 50 countries without central visibility on project status, costs and personel. To avoid a future significant financial issues, it faced the challenge to migrate 70 years of data and processes to a digital environment.
A digital transformation team was formed to devlop and implement the necessary digital products.

T&T has been operating in 50 countries without central visibility on project status, costs and personel. To avoid a future significant financial issues, it faced the challenge to migrate 70 years of data and processes to a digital environment.
A digital transformation team was formed to devlop and implement the necessary digital products.

T&T has been operating in 50 countries without central visibility on project status, costs and personel. To avoid a future significant financial issues, it faced the challenge to migrate 70 years of data and processes to a digital environment.
A digital transformation team was formed to devlop and implement the necessary digital products.

T&T has been operating in 50 countries without central visibility on project status, costs and personel. To avoid a future significant financial issues, it faced the challenge to migrate 70 years of data and processes to a digital environment.
A digital transformation team was formed to devlop and implement the necessary digital products.

T&T has been operating in 50 countries without central visibility on project status, costs and personel. To avoid a future significant financial issues, it faced the challenge to migrate 70 years of data and processes to a digital environment.
A digital transformation team was formed to devlop and implement the necessary digital products.

My contribution

My contribution

My contribution

My contribution

My contribution

I joined the team as a Sr. Product Designer to create 4 dashboards, we took a customised agile approach. Prototyped, tested and iterated features bi-weekly with Stakeholders and POs. I refactored the design system to be atomic in nature, matured the pattern library and style-guide. Identified similarities and redundancies in the existing build, and created a component library to QA with Devs. Led the design team for a period of time.

I joined the team as a Sr. Product Designer to create 4 dashboards, we took a customised agile approach. Prototyped, tested and iterated features bi-weekly with Stakeholders and POs. Refactored the design system to be atomic in nature, matured the pattern library and style-guide. Identified similarities and redundancies in the existing build, created a component library to QA with Devs. Led the design team for a period of time.

I joined the team as a Sr. Product Designer to create 4 dashboards, we took a customised agile approach. Prototyped, tested and iterated features bi-weekly with Stakeholders and POs. Refactored the design system to be atomic in nature, matured the pattern library and style-guide. Identified similarities and redundancies in the existing build, created a component library to QA with Devs. Led the design team for a period of time.

I joined the team as a Sr. Product Designer to create 4 dashboards, we took a customised agile approach. Prototyped, tested and iterated features bi-weekly with Stakeholders and POs. Refactored the design system to be atomic in nature, matured the pattern library and style-guide. Identified similarities and redundancies in the existing build, created a component library to QA with Devs. Led the design team for a period of time.

I joined the team as a Sr. Product Designer to create 4 dashboards, we took a customised agile approach. Prototyped, tested and iterated features bi-weekly with Stakeholders and POs. Refactored the design system to be atomic in nature, matured the pattern library and style-guide. Identified similarities and redundancies in the existing build, created a component library to QA with Devs. Led the design team for a period of time.

Skip Case Study?

Why read when you can look.

Skip Case Study?

Why read when you can look.

Skip Case Study?

Why read when you can look.

Skip Case Study?

Why read when you can look.

Skip Case Study?

Why read when you can look.

Process

Process

Process

Process

Process

• Design, test & refine features ahead of dev
• Update the design system accordingly
• Fine-tune dependent features across dashboards as needed
• Understand development restrictions, prior design.

• Design, test & refine features ahead of dev
• Update the design system accordingly
• Fine-tune dependent features across dashboards as needed
• Understand development restrictions, prior design.

• Design, test & refine features ahead of dev
• Update the design system accordingly
• Fine-tune dependent features across dashboards as needed
• Understand development restrictions, prior design.

1 Discover

1 Discover

1 Discover

1 Discover

1 Discover

We conducted rounds of workshops, affinity and empathy maps to pin point solutions bi-weekly with PO’s and Stakeholders. The insights converted to the decision to develop 4 dashboards each targeting a part of the business.

We conducted rounds of workshops, affinity and empathy maps to pin point solutions bi-weekly with PO’s and Stakeholders. The insights converted to the decision to develop 4 dashboards each targeting a part of the business.

We conducted rounds of workshops, affinity and empathy maps to pin point solutions bi-weekly with PO’s and Stakeholders. The insights converted to the decision to develop 4 dashboards each targeting a part of the business.

We conducted rounds of workshops, affinity and empathy maps to pin point solutions bi-weekly with PO’s and Stakeholders. The insights converted to the decision to develop 4 dashboards each targeting a part of the business.

We conducted rounds of workshops, affinity and empathy maps to pin point solutions bi-weekly with PO’s and Stakeholders. The insights converted to the decision to develop 4 dashboards each targeting a part of the business.

Issue:
• Limited project visibility, documentation & communication with staff and clients
• Difficulty in correlating data across tools
• Employee resistance to adopt new management system
• Ineffective supply chain, risk, and asset management
• Lack of visibility on project status & cost changes

Issue:
• Limited project visibility, documentation & communication with staff and clients
• Difficulty in correlating data across tools
• Employee resistance to adopt new management system
• Ineffective supply chain, risk, and asset management
• Lack of visibility on project status & cost changes

Issue:
• Limited project visibility, documentation & communication with staff and clients
• Difficulty in correlating data across tools
• Employee resistance to adopt new management system
• Ineffective supply chain, risk, and asset management
• Lack of visibility on project status & cost changes

Issue:
• Limited project visibility, documentation & communication with staff and clients
• Difficulty in correlating data across tools
• Employee resistance to adopt new management system
• Ineffective supply chain, risk, and asset management
• Lack of visibility on project status & cost changes

Issue:
• Limited project visibility, documentation & communication with staff and clients
• Difficulty in correlating data across tools
• Employee resistance to adopt new management system
• Ineffective supply chain, risk, and asset management
• Lack of visibility on project status & cost changes

Solution: Create 4 Dashboards
• Hive: Staff management
• Benchmarking: Improving new projects based on past data
• Market Rate DB: Compare global supplier prices for materials Cost
• Cost Control: Track project costs over time

Solution: Create 4 Dashboards
• Hive: Staff management
• Benchmarking: Improving new projects based on past data
• Market Rate DB: Compare global supplier prices for materials Cost
• Cost Control: Track project costs over time

Solution: Create 4 Dashboards
• Hive: Staff management
• Benchmarking: Improving new projects based on past data
• Market Rate DB: Compare global supplier prices for materials Cost
• Cost Control: Track project costs over time

Solution: Create 4 Dashboards
• Hive: Staff management
• Benchmarking: Improving new projects based on past data
• Market Rate DB: Compare global supplier prices for materials Cost
• Cost Control: Track project costs over time

Solution: Create 4 Dashboards
• Hive: Staff management
• Benchmarking: Improving new projects based on past data
• Market Rate DB: Compare global supplier prices for materials Cost
• Cost Control: Track project costs over time

2 Define

2 Define

2 Define

2 Define

2 Define

On top of bi-weekly user requirements and pain points we received daily insights from our target users. Through user stories we defined the MVP for the Cost Control Dashboard, it's goal is to help cost and risk managers monitor, update costs and health of a project at a glance.

On top of bi-weekly user requirements and pain points we received daily insights from our target users. Through user stories we defined the MVP for the Cost Control Dashboard, it's goal is to help cost and risk managers monitor, update costs and health of a project at a glance.

On top of bi-weekly user requirements and pain points we received daily insights from our target users. Through user stories we defined the MVP for the Cost Control Dashboard, it's goal is to help cost and risk managers monitor, update costs and health of a project at a glance.

On top of bi-weekly user requirements and pain points we received daily insights from our target users. Through user stories we defined the MVP for the Cost Control Dashboard, it's goal is to help cost and risk managers monitor, update costs and health of a project at a glance.

On top of bi-weekly user requirements and pain points we received daily insights from our target users. Through user stories we defined the MVP for the Cost Control Dashboard, it's goal is to help cost and risk managers monitor, update costs and health of a project at a glance.

3 Evaluation

3 Evaluation

3 Evaluation

3 Evaluation

3 Evaluation

After getting familiarised with work previously done I took notes on existing components and functionalities to reform, add or delete in the new designs. Although I have experienced working in all 4 products, this Case Study focuses on 3 features on the Cost Control Dashboard.

After getting familiarised with work previously done I took notes on existing components and functionalities to reform, add or delete in the new designs. Although I have experienced working in all 4 products, this Case Study focuses on 3 features on the Cost Control Dashboard.

After getting familiarised with work previously done I took notes on existing components and functionalities to reform, add or delete in the new designs. Although I have experienced working in all 4 products, this Case Study focuses on 3 features on the Cost Control Dashboard.

After getting familiarised with work previously done I took notes on existing components and functionalities to reform, add or delete in the new designs. Although I have experienced working in all 4 products, this Case Study focuses on 3 features on the Cost Control Dashboard.

After getting familiarised with work previously done I took notes on existing components and functionalities to reform, add or delete in the new designs. Although I have experienced working in all 4 products, this Case Study focuses on 3 features on the Cost Control Dashboard.

3.1 UX Architecture

3.1
UX Architecture

3.1
UX Architecture

3.1 UX Architecture

3.1 UX Architecture

Upon receiving the business logic briefing, I analyzed the MVP requirements and created a user flow, while keeping an eye for opportunities to reuse UI and UX. In this case study, the highlighted features in blue are the primary focus, as they are part of a broader project.

Upon receiving the business logic briefing, I analyzed the MVP requirements and created a user flow, while keeping an eye for opportunities to reuse UI and UX. In this case study, the highlighted features in blue are the primary focus, as they are part of a broader project.

Upon receiving the business logic briefing, I analyzed the MVP requirements and created a user flow, while keeping an eye for opportunities to reuse UI and UX. In this case study, the highlighted features in blue are the primary focus, as they are part of a broader project.

Upon receiving the business logic briefing, I analyzed the MVP requirements and created a user flow, while keeping an eye for opportunities to reuse UI and UX. In this case study, the highlighted features in blue are the primary focus, as they are part of a broader project.

Upon receiving the business logic briefing, I analyzed the MVP requirements and created a user flow, while keeping an eye for opportunities to reuse UI and UX. In this case study, the highlighted features in blue are the primary focus, as they are part of a broader project.

3.2 UI Assessment

3.2
UI Assessment

3.2
UI Assessment

3.2 UI Assessment

3.2 UI Assessment

To support sprint work, I identified opportunities to develop a scalable Design System to promote consistency and documentation across the team. The main challenge was presenting a vast amount of data on small screens while maintaining readability. To address this, I optimized graphs, colors, fonts, to comply with AA standards across all breakpoints.

To support sprint work, I identified opportunities to develop a scalable Design System to promote consistency and documentation across the team. The main challenge was presenting a vast amount of data on small screens while maintaining readability. To address this, I optimized graphs, colors, fonts, to comply with AA standards across all breakpoints.

To support sprint work, I identified opportunities to develop a scalable Design System to promote consistency and documentation across the team. The main challenge was presenting a vast amount of data on small screens while maintaining readability. To address this, I optimized graphs, colors, fonts, to comply with AA standards across all breakpoints.

To support sprint work, I identified opportunities to develop a scalable Design System to promote consistency and documentation across the team. The main challenge was presenting a vast amount of data on small screens while maintaining readability. To address this, I optimized graphs, colors, fonts, to comply with AA standards across all breakpoints.

To support sprint work, I identified opportunities to develop a scalable Design System to promote consistency and documentation across the team. The main challenge was presenting a vast amount of data on small screens while maintaining readability. To address this, I optimized graphs, colors, fonts, to comply with AA standards across all breakpoints.

3.3 Identify & Revise

3.3
Identify & Revise

3.3
Identify & Revise

3.3 Identify & Revise

3.3 Identify & Revise

The Filter Component exemplifies the positive impact of revising existing interface, usability, and interaction. It serves as a compelling example of how making improvements to an existing global component can yield significant benefits.

The Filter Component exemplifies the positive impact of revising existing interface, usability, and interaction. It serves as a compelling example of how making improvements to an existing global component can yield significant benefits.

The Filter Component exemplifies the positive impact of revising existing interface, usability, and interaction. It serves as a compelling example of how making improvements to an existing global component can yield significant benefits.

The Filter Component exemplifies the positive impact of revising existing interface, usability, and interaction. It serves as a compelling example of how making improvements to an existing global component can yield significant benefits.

The Filter Component exemplifies the positive impact of revising existing interface, usability, and interaction. It serves as a compelling example of how making improvements to an existing global component can yield significant benefits.

4 Implementation

4 Implement

4 Implement

4 Implement

4 Implement

After validating the user flows with developers and POs, I created lo-fi wireframe sketches that leveraged existing components while introducing new ones in a modular manner. During hi-fi wireframe iterations, I incorporated real data to stress test the design across different breakpoints. This was particularly challenging due to the volume of data involved.

After validating the user flows with developers and POs, I created lo-fi wireframe sketches that leveraged existing components while introducing new ones in a modular manner. During hi-fi wireframe iterations, I incorporated real data to stress test the design across different breakpoints. This was particularly challenging due to the volume of data involved.

After validating the user flows with developers and POs, I created lo-fi wireframe sketches that leveraged existing components while introducing new ones in a modular manner. During hi-fi wireframe iterations, I incorporated real data to stress test the design across different breakpoints. This was particularly challenging due to the volume of data involved.

After validating the user flows with developers and POs, I created lo-fi wireframe sketches that leveraged existing components while introducing new ones in a modular manner. During hi-fi wireframe iterations, I incorporated real data to stress test the design across different breakpoints. This was particularly challenging due to the volume of data involved.

After validating the user flows with developers and POs, I created lo-fi wireframe sketches that leveraged existing components while introducing new ones in a modular manner. During hi-fi wireframe iterations, I incorporated real data to stress test the design across different breakpoints. This was particularly challenging due to the volume of data involved.

4.1 Layout

4.1 Layout

4.1 Layout

4.1 Layout

4.1 Layout

After identifying common behaviours and organising the data based on hierarchy and reading flow, I suggested a layout that integrated the requirements across all dashboards.

After identifying common behaviours and organising the data based on hierarchy and reading flow, I suggested a layout that integrated the requirements across all dashboards.

After identifying common behaviours and organising the data based on hierarchy and reading flow, I suggested a layout that integrated the requirements across all dashboards.

After identifying common behaviours and organising the data based on hierarchy and reading flow, I suggested a layout that integrated the requirements across all dashboards.

After identifying common behaviours and organising the data based on hierarchy and reading flow, I suggested a layout that integrated the requirements across all dashboards.

1 - Overview: Show relevant key stats at a glance


1 - Overview: Show relevant key stats at a glance


1 - Overview: Show relevant key stats at a glance


1 - Overview: Show relevant key stats at a glance


1 - Overview: Show relevant key stats at a glance


2 - Functional Space: Reserved for in-screen navigation and operations



2 - Functional Space: Reserved for in-screen navigation and operations



2 - Functional Space: Reserved for in-screen navigation and operations



2 - Functional Space: Reserved for in-screen navigation and operations



2 - Functional Space: Reserved for in-screen navigation and operations



3 - Table: See a list of entries and their assigned DB information


3 - Table: See a list of entries and their assigned DB information


3 - Table: See a list of entries and their assigned DB information


3 - Table: See a list of entries and their assigned DB information


3 - Table: See a list of entries and their assigned DB information


4 - Slider: An overlay slider to view, filter or add information after selecting a row in the table

4 - Slider: An overlay slider to view, filter or add information after selecting a row in the table

4 - Slider: An overlay slider to view, filter or add information after selecting a row in the table

4 - Slider: An overlay slider to view, filter or add information after selecting a row in the table

4 - Slider: An overlay slider to view, filter or add information after selecting a row in the table

4.2 Prototype & Test

4.2 Prototype & Test

4.2 Prototype & Test

4.2 Prototype & Test

4.2 Prototype & Test

Developed lo-fi prototypes for bi-weekly testing with the stakeholders and incorporated daily feedback from product owners prior the testing.

Developed lo-fi prototypes for bi-weekly testing with the stakeholders and incorporated daily feedback from product owners prior the testing.

Developed lo-fi prototypes for bi-weekly testing with the stakeholders and incorporated daily feedback from product owners prior the testing.

Developed lo-fi prototypes for bi-weekly testing with the stakeholders and incorporated daily feedback from product owners prior the testing.

Developed lo-fi prototypes for bi-weekly testing with the stakeholders and incorporated daily feedback from product owners prior the testing.

4.3 Scaling

4.3 Scaling

4.3 Scaling

4.3 Scaling

4.3 Scaling

Through the iteration process, I identified opportunities to create a scalable Design System that better supports sprint work. This led for simultaneous refinement of the Dashboard while doing QA. As a result, the prototypes transitioned to high fidelity which we used primarily for our testing sessions.

Through the iteration process, I identified opportunities to create a scalable Design System that better supports sprint work. This led for simultaneous refinement of the Dashboard while doing QA. As a result, the prototypes transitioned to high fidelity which we used primarily for our testing sessions.

Through the iteration process, I identified opportunities to create a scalable Design System that better supports sprint work. This led for simultaneous refinement of the Dashboard while doing QA. As a result, the prototypes transitioned to high fidelity which we used primarily for our testing sessions.

Through the iteration process, I identified opportunities to create a scalable Design System that better supports sprint work. This led for simultaneous refinement of the Dashboard while doing QA. As a result, the prototypes transitioned to high fidelity which we used primarily for our testing sessions.

Through the iteration process, I identified opportunities to create a scalable Design System that better supports sprint work. This led for simultaneous refinement of the Dashboard while doing QA. As a result, the prototypes transitioned to high fidelity which we used primarily for our testing sessions.

RESULTS

FINISHED PIECE

FINISHED PIECE

FINISHED PIECE

FINISHED PIECE

Bring it all together

Putting it all together

Bring it all together

Bring it all together

Bring it all together

Our research and design has led to the creation of the Cost Control Dashboard. Here are 3 features, solved.

Our research and design has led to the creation of the Cost Control Dashboard. Here are 3 features, solved.

Our research and design has led to the creation of the Cost Control Dashboard. Here are 3 features, solved.

Our research and design has led to the creation of the Cost Control Dashboard. Here are 3 features, solved.

Our research and design has led to the creation of the Cost Control Dashboard. Here are 3 features, solved.

Change Tab

Change Tab

Change Tab

Change Tab

Change Tab

Our users were Cost Managers, with a glance they can now monitor the project's health and cost evolution. In this tab a user logs cost changes against the original project estimate, making it ideal for large-scale projects that may take months to years to complete.

Our users were Cost Managers, with a glance they can now monitor the project's health and cost evolution. In this tab a user logs cost changes against the original project estimate, making it ideal for large-scale projects that may take months to years to complete.

Our users were Cost Managers, with a glance they can now monitor the project's health and cost evolution. In this tab a user logs cost changes against the original project estimate, making it ideal for large-scale projects that may take months to years to complete.

Our users were Cost Managers, with a glance they can now monitor the project's health and cost evolution. In this tab a user logs cost changes against the original project estimate, making it ideal for large-scale projects that may take months to years to complete.

Our users were Cost Managers, with a glance they can now monitor the project's health and cost evolution. In this tab a user logs cost changes against the original project estimate, making it ideal for large-scale projects that may take months to years to complete.

Example of a Change
A change can be finding unexpected ruins on the land during construction.

Example of a Change
A change can be finding unexpected ruins on the land during construction.

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

Add & Edit a Change.
View history.

Add & Edit a Change.
View history.

Add & Edit a Change.
View history.

Add & Edit a Change.
View history.

Add & Edit a Change.
View history.

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

Search & Filter Changes

Search & Filter Changes

Search & Filter Changes

Search & Filter Changes

Search & Filter Changes

Risk & Opportunity Tab

Risk Tab

Risk Tab

Risk Tab

Risk & Opportunity Tab

Good risk management includes finding ways to maximise the value from a risk. At a glance, Risk Managers will identify the cost impact of risks and opportunities on a project and decide which risk response actions to take.

Good risk management includes finding ways to maximise the value from a risk. At a glance, Risk Managers will identify the cost impact of risks and opportunities on a project and decide which risk response actions to take.

Good risk management includes finding ways to maximise the value from a risk. At a glance, Risk Managers will identify the cost impact of risks and opportunities on a project and decide which risk response actions to take.

Good risk management includes finding ways to maximise the value from a risk. At a glance, Risk Managers will identify the cost impact of risks and opportunities on a project and decide which risk response actions to take.

Good risk management includes finding ways to maximise the value from a risk. At a glance, Risk Managers will identify the cost impact of risks and opportunities on a project and decide which risk response actions to take.

Example of a Risk
An economic crisis takes place during a construction.
A Potential Risk is logged, resulting in unrealised Cost Change on original estimation

Example of a Risk
An economic crisis takes place during a construction. A Potential Risk is logged, resulting in unrealised Cost Change on original estimation

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

Add & Edit a Risk.
View history.

Add & Edit a Risk.
View history.

Add & Edit a Risk.
View history.

Add & Edit a Risk.
View history.

Add & Edit a Risk.
View history.

Report Scheduling & Export

Report Scheduling & Export

Report Scheduling & Export

Report Scheduling & Export

Report Scheduling & Export

A live reporting system was created to help boost visibility of a project status and costs for clients and managers. Each project has its unique schedule, divided into states and periods. The report fetches live data from Cost Changes, Risk & Opportunity, Valuations, Cashflow, etc.

A live reporting system was created to help boost visibility of a project status and costs for clients and managers. Each project has its unique schedule, divided into states and periods. The report fetches live data from Cost Changes, Risk & Opportunity, Valuations, Cashflow, etc.

A live reporting system was created to help boost visibility of a project status and costs for clients and managers. Each project has its unique schedule, divided into states and periods. The report fetches live data from Cost Changes, Risk & Opportunity, Valuations, Cashflow, etc.

A live reporting system was created to help boost visibility of a project status and costs for clients and managers. Each project has its unique schedule, divided into states and periods. The report fetches live data from Cost Changes, Risk & Opportunity, Valuations, Cashflow, etc.

A live reporting system was created to help boost visibility of a project status and costs for clients and managers. Each project has its unique schedule, divided into states and periods. The report fetches live data from Cost Changes, Risk & Opportunity, Valuations, Cashflow, etc.

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

Add & Edit & Manage a Reporting Schedule

Add & Edit Manage Reporting Schedule

Add & Edit & Manage a Reporting Schedule

Add & Edit & Manage a Reporting Schedule

Add & Edit & Manage a Reporting Schedule

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

Export Report

Export Report

Export Report

Export a Report

Export a Report

Report Design

Report Design

Report Design

Report Design

Report Design

To share and print the live data from the dashboard, it was required to adjust the size and scale of graphs, font and spacings from digital to print units. I restructured the elements while maintaining readability for an A4. Added a print section in the style-guide to assist the developers. Having a graphic design background was handy.

To share and print the live data from the dashboard, it was required to adjust the size and scale of graphs, font and spacings from digital to print units. I restructured the elements while maintaining readability for an A4. Added a print section in the style-guide to assist the developers. Having a graphic design background was handy.

To share and print the live data from the dashboard, it was required to adjust the size and scale of graphs, font and spacings from digital to print units. I restructured the elements while maintaining readability for an A4. Added a print section in the style-guide to assist the developers. Having a graphic design background was handy.

To share and print the live data from the dashboard, it was required to adjust the size and scale of graphs, font and spacings from digital to print units. I restructured the elements while maintaining readability for an A4. Added a print section in the style-guide to assist the developers. Having a graphic design background was handy.

To share and print the live data from the dashboard, it was required to adjust the size and scale of graphs, font and spacings from digital to print units. I restructured the elements while maintaining readability for an A4. Added a print section in the style-guide to assist the developers. Having a graphic design background was handy.

Pattern Library

Pattern Library

Pattern Library

Pattern Library

Pattern Library

To scale and document and the products, I've created a UI Kit and Component Library to the Design System. The Slider Component is a good example of a global component needing to be standardised, I turned it into a master component to QA for StoryBook. As a result, all child components were also QA’d.

See Component Library UI Case Study →

To scale and document and the products, I've created a UI Kit and Component Library to the Design System. The Slider Component is a good example of a global component needing to be standardised, I turned it into a master component to QA for StoryBook. As a result, all child components were also QA’d.

See Component Library UI Case Study →

To scale and document and the products, I've created a UI Kit and Component Library to the Design System. The Slider Component is a good example of a global component needing to be standardised, I turned it into a master component to QA for StoryBook. As a result, all child components were also QA’d.

See Component Library UI Case Study →

To scale and document and the products, I've created a UI Kit and Component Library to the Design System. The Slider Component is a good example of a global component needing to be standardised, I turned it into a master component to QA for StoryBook. As a result, all child components were also QA’d.

See Component Library UI Case Study →

To scale and document and the products, I've created a UI Kit and Component Library to the Design System. The Slider Component is a good example of a global component needing to be standardised, I turned it into a master component to QA for StoryBook. As a result, all child components were also QA’d.

See Component Library UI Case Study →

Styleguide

Styleguide

Styleguide

Styleguide

Styleguide

To pass on fundamental documentation across the current and future teams, I've maintained a styleguide with details for using typography, colors, icons, layouts, crops, grids, etc.

To pass on fundamental documentation across the current and future teams, I've maintained a styleguide with details for using typography, colors, icons, layouts, crops, grids, etc.

To pass on fundamental documentation across the current and future teams, I've maintained a styleguide with details for using typography, colors, icons, layouts, crops, grids, etc.

To pass on fundamental documentation across the current and future teams, I've maintained a styleguide with details for using typography, colors, icons, layouts, crops, grids, etc.

To pass on fundamental documentation across the current and future teams, I've maintained a styleguide with details for using typography, colors, icons, layouts, crops, grids, etc.