TURNER & TOWNSEND

TURNER & TOWNSEND

Cost Control Dashboard

Cost Control Dashboard

Cost Control Dashboard

Cost Control Dashboard

Case Study for a Management Dashboard & Design System for a multinational company in the property, infrastructure and natural resources sector

Four products for a multinational company in the property, infrastructure and natural resources sector

Four products for a multinational company in the property, infrastructure and natural resources sector

Four products for a multinational company in the property, infrastructure and natural resources sector

Four products for a multinational company in the property, infrastructure and natural resources sector

T&T_logo
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.
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.
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.
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.
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.
Deliverables
Deliverables
Deliverables
Deliverables
Deliverables

 Ideation & Solution Hunting
 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

 Ideation & Solution Hunting
 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

 Ideation & Solution Hunting
 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

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 develop 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 develop 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 develop 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 develop 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 develop 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.

My Role
UI Designer, UX Designer, 
IxD Designer 

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.

My Role
UI Designer, UX Designer, 
IxD Designer 

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.

My Role

UI Designer, UX Designer, 
IxD Designer 

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.

My Role
UI Designer, UX Designer, 
IxD Designer 

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.

My Role
UI Designer, UX Designer, 
IxD Designer 

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

Our team adopted a customised agile approach tailored to our team structure, our target users were Risk, Cost, and Asset Allocation Managers. Our PO’s and PM’s had prior experience as in such roles in the business, they received training to become part of the team making them natural interactive personas.

Our team adopted a customised agile approach tailored to our team structure, our target users were Risk, Cost, and Asset Allocation Managers. Our PO’s and PM’s had prior experience as in such roles in the business, they received training to become part of the team making them natural interactive personas.

Our team adopted a customised agile approach tailored to our team structure, our target users were Risk, Cost, and Asset Allocation Managers. Our PO’s and PM’s had prior experience as in such roles in the business, they received training to become part of the team making them natural interactive personas.

Our team adopted a customised agile approach tailored to our team structure, our target users were Risk, Cost, and Asset Allocation Managers. Our PO’s and PM’s had prior experience as in such roles in the business, they received training to become part of the team making them natural interactive personas.

• Prototype, interview, and refine high fidelity designs with stakeholders bi-weekly
• Daily stand-ups, weekly show-and-tell sessions, card sorting at the start of each sprint

• Prototype, interview, and refine high fidelity designs with stakeholders bi-weekly
• Daily stand-ups, weekly show-and-tell sessions, card sorting at the start of each sprint

• Prototype, interview, and refine high fidelity designs with stakeholders bi-weekly
• Daily stand-ups, weekly show-and-tell sessions, card sorting at the start of each sprint
• 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.

• Prototype, interview, and refine high fidelity designs with stakeholders bi-weekly
• Daily stand-ups, weekly show-and-tell sessions, card sorting at the start of each sprint
• 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.

unsplash-image

• 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.

 

 

TT_process
Research
Research
Research
Research
Research
1 Discover
2 Define
01 Discover
02 Define
01 Discover
02 Define
01 Discover
02 Define
01 Discover
02 Define
Design
Design
Design
Design
Design
3 Evaluation
4 Implementation
5 Monitor
03 Evaluation
04 Implementation
05 Monitor
03 Evaluation
04 Implementation
05 Monitor
03 Evaluate
04 Implement
05 Monitor
03 Evaluate
04 Implement
05 Monitor
process

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.

unsplash-image
TT_define_2
TT_define_3

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.

Change Tab: Track, log & manage Changes affecting the base cost of a project.
Risk & Opportunity: Track, log, manage Risks and Opportunities to detect unexpected cost impact
Report: Report Design, Report generation, Manage reporting periods

Change Tab: Track, log & manage Changes affecting the base cost of a project.
Risk & Opportunity: Track, log, manage Risks and Opportunities to detect unexpected cost impact
Report: Report Design, Report generation, Manage reporting periods

Change Tab: Track, log & manage Changes affecting the base cost of a project.
Risk & Opportunity: Track, log, manage Risks and Opportunities to detect unexpected cost impact
Report: Report Design, Report generation, Manage reporting periods

Change Tab: Track, log & manage Changes affecting the base cost of a project.
Risk & Opportunity: Track, log, manage Risks and Opportunities to detect unexpected cost impact
Report: Report Design, Report generation, Manage reporting periods

Change Tab: Track, log & manage Changes affecting the base cost of a project.
Risk & Opportunity: Track, log, manage Risks and Opportunities to detect unexpected cost impact
Report: Report Design, Report generation, Manage reporting periods

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.

TT_user_flow

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.

Issues: 

No atomic structure

Using copies instead of instances of an object

Missing key UI elements: forms, tables & states

No colour compliancy

Issues: 

No atomic structure

Using copies instead of instances of an object

Missing key UI elements: forms, tables & states

No colour compliancy

Issues: 

No atomic structure

Using copies instead of instances of an object

Missing key UI elements: forms, tables & states

No colour compliancy

Issues: 

No atomic structure

Using copies instead of instances of an object

Missing key UI elements: forms, tables & states

No colour compliancy

Issues: 

No atomic structure

Using copies instead of instances of an object

Missing key UI elements: forms, tables & states

No colour compliancy

Solutions:

UI Kit & Component library

Pattern Library & Style-guide

Revise & add User Interaction & QA

Solutions:

UI Kit & Component library

Pattern Library & Style-guide

Revise & add User Interaction & QA

Solutions:

UI Kit & Component library

Pattern Library & Style-guide

Revise & add User Interaction & QA

Solutions:

UI Kit & Component library

Pattern Library & Style-guide

Revise & add User Interaction & QA

Solutions:

UI Kit & Component library

Pattern Library & Style-guide

Revise & add User Interaction & QA

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.

Issue: 
Opening a filter would preselect all toggles leading the user to deselect multiple toggles from "all" to narrow a search.

Issue: 
Opening a filter would preselect all toggles leading the user to deselect multiple toggles from "all" to narrow a search.

Issue: 
Opening a filter would preselect all toggles leading the user to deselect multiple toggles from "all" to narrow a search.

Issue: 
Opening a filter would preselect all toggles leading the user to deselect multiple toggles from "all" to narrow a search.

Issue: 
Opening a filter would preselect all toggles leading the user to deselect multiple toggles from "all" to narrow a search.

Solution: 
Opening a filter shows all toggles off so that a user may narrow a search.

Solution: 
Opening a filter shows all toggles off so that a user may narrow a search.

Solution: 
Opening a filter shows all toggles off so that a user may narrow a search.

Solution: 
Opening a filter shows all toggles off so that a user may narrow a search.

Solution: 
Opening a filter shows all toggles off so that a user may narrow a search.

close
TT_fine_tuning1
ticker
TT_finetuning2

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.

TT_wireframe-1

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.
TT_layout1

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


TT_layout2

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


TT_layout3

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.

Issues: 
There was a global component, the Slider used to slide to right across all products, hiding RHS content underneath

Issues: 
There was a global component, the Slider used to slide to right across all products, hiding RHS content underneath

Issues: 
There was a global component, the Slider used to slide to right across all products, hiding RHS content underneath

Issues: 
There was a global component, the Slider used to slide to right across all products, hiding RHS content underneath

Issues: 
There was a global component, the Slider used to slide to right across all products, hiding RHS content underneath

Solution: 
Reverse the direction to align with users' natural reading flow and reveal RHS content first, freeing the LHS for secondary operations.

Solution: 
Reverse the direction to align with users' natural reading flow and reveal RHS content first, freeing the LHS for secondary operations.

Solution: 
Reverse the direction to align with users' natural reading flow and reveal RHS content first, freeing the LHS for secondary operations.

Solution: 
Reverse the direction to align with users' natural reading flow and reveal RHS content first, freeing the LHS for secondary operations.

Solution: 
Reverse the direction to align with users' natural reading flow and reveal RHS content first, freeing the LHS for secondary operations.

TT_wireframe_yes_nay

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.

TT_tray
TT_details

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.

 

 

 

1 change

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.

browser_bar_dark
browser_bar_dark

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

TT_Change_filters
TT_Change_Edit
TT_Change_edit_history

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

 

 

 

risk landing page

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.

browser_bar_dark
TT_edit_risk-1
TT_Risk_edit
TT_Risk_filters
TT_edit_risk

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.

TT_Report_Scheduling_Export

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

browser_bar_dark
browser_bar_dark

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

USER JOURNEY

Export Report

Export Report

Export Report

Export a Report

Export a Report

The Reporting Schedule generates a Report in PDF format. A user can see version history, sections to include in the report, set ownership & export.

The Reporting Schedule generates a Report in PDF format. A user can see version history, sections to include in the report, set ownership & export.

The Reporting Schedule generates a Report in PDF format. A user can see version history, sections to include in the report, set ownership & export.

The Reporting Schedule generates a Report in PDF format. A user can see version history, sections to include in the report, set ownership & export.

TT_Report_slider2
TT_Report_slider1

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.

TT_report_design_1
TT_treated_report_original
report_0007_Vector-Smart-Object
report_0006_Vector-Smart-Object
report_0005_Vector-Smart-Object
report_0004_Vector-Smart-Object
report_0003_Vector-Smart-Object
report_0002_Vector-Smart-Object
report_0001_Vector-Smart-Object
report_0000_Vector-Smart-Object

Design System

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 →

TT_-Pattern_Library

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.

TT_-styleguide_typography-1
TT_-styleguide_layout
TT_-styleguide_images
TT_UI_Kit

The end.

Other projects

Ciclo de ConversasBranding, UI Design, Concept

SuperRare - Sneak PeekUI & UX, Concept, Product, QA

Component Library & UI KitUI Design & UI Architecture

Logo@0.33x

Have a project in mind? If you'd like to chat about a potential project, get in touch.
Currently based in London, Open for freelance opportunities

©Marcia Gaudencio 2023. All Rights Reserved.