SECTOR

SECTOR

Infrastructure, Real Estate

TYPE

UI/UX, Product Design

Production, Artwork, Guidelines

ROLE

UI Designer, UX Designer, IxD Designer

Graphic & UI Designer

Pioneering a digital shift of 70 years of multinational operations with four responsive dashboards and a design system for Turner and Townsend, an infrastructure leader.

Pioneering a digital shift of 70 years of multinational operations with four responsive dashboards and a design system for Turner and Townsend, an infrastructure leader.

Pioneering a digital shift of 70 years of multinational operations with four responsive dashboards and a design system for Turner and Townsend, an infrastructure leader.

Pioneering a digital shift of 70 years of multinational operations with four responsive dashboards and a design system for Turner and Townsend, an infrastructure leader.

Pioneering a digital shift of 70 years of multinational operations with four responsive dashboards and a design system for Turner and Townsend, an infrastructure leader.

Logo

Goals

Goals

Goals

Goals

Goals

T&T lacked dedicated digital tools, causing issues with project visibility, cost control, and team coordination. I joined the digital transformation team to solve these issues by developing four dashboards.

T&T lacked dedicated digital tools, causing issues with project visibility, cost control, and team coordination. I joined the digital transformation team to solve these issues by developing four dashboards.

T&T lacked dedicated digital tools, causing issues with project visibility, cost control, and team coordination. I joined the digital transformation team to solve these issues by developing four dashboards.

T&T lacked dedicated digital tools, causing issues with project visibility, cost control, and team coordination. I joined the digital transformation team to solve these issues by developing four dashboards.

T&T lacked dedicated digital tools, causing issues with project visibility, cost control, and team coordination. I joined the digital transformation team to solve these issues by developing four dashboards.

Challenge

I faced the challenge of simultaneously developing and refining four products, the Design System, and managing dependencies across them. Given the absence of industry-comparable tools for inspiration, the team regularly delved into "Spiking ideas" to assess their feasibility.

I faced the challenge of simultaneously developing and refining four products, the Design System, and managing dependencies across them. Given the absence of industry-comparable tools for inspiration, the team regularly delved into "Spiking ideas" to assess their feasibility.

I faced the challenge of simultaneously developing and refining four products, the Design System, and managing dependencies across them. Given the absence of industry-comparable tools for inspiration, the team regularly delved into "Spiking ideas" to assess their feasibility.

I faced the challenge of simultaneously developing and refining four products, the Design System, and managing dependencies across them. Given the absence of industry-comparable tools for inspiration, the team regularly delved into "Spiking ideas" to assess their feasibility.

I faced the challenge of simultaneously developing and refining four products, the Design System, and managing dependencies across them. Given the absence of industry-comparable tools for inspiration, the team regularly delved into "Spiking ideas" to assess their feasibility.

My Contribution & Team

Working in an agile team with 1 Designer, 13+ Devs, and 5 Product Owners & Product Managers, I, as Senior UI/UX Designer, contributed to all dashboards, seamlessly transitioning between features and dashboards when needed, expanded the Design System, and QA'd for Storybook.

Working in an agile team with 1 Designer, 13+ Devs, and 5 Product Owners & Product Managers, I, as Senior UI/UX Designer, contributed to all dashboards, seamlessly transitioning between features and dashboards when needed, expanded the Design System, and QA'd for Storybook.

Working in an agile team with 1 Designer, 13+ Devs, and 5 Product Owners & Product Managers, I, as Senior UI/UX Designer, contributed to all dashboards, seamlessly transitioning between features and dashboards when needed, expanded the Design System, and QA'd for Storybook.

Working in an agile team with 1 Designer, 13+ Devs, and 5 Product Owners & Product Managers, I, as Senior UI/UX Designer, contributed to all dashboards, seamlessly transitioning between features and dashboards when needed, expanded the Design System, and QA'd for Storybook.

Working in an agile team with 1 Designer, 13+ Devs, and 5 Product Owners & Product Managers, I, as Senior UI/UX Designer, contributed to all dashboards, seamlessly transitioning between features and dashboards when needed, expanded the Design System, and QA'd for Storybook.

Solution

To design four responsive dashboards for different part of the business based on employee’s feedback. Onboarding former cost and risk managers as part of the team to streamline the processes. Create a Design System and Qa with Storybook for scalability.

To design four responsive dashboards for different part of the business based on employee’s feedback. Onboarding former cost and risk managers as part of the team to streamline the processes. Create a Design System and Qa with Storybook for scalability.

To design four responsive dashboards for different part of the business based on employee’s feedback. Onboarding former cost and risk managers as part of the team to streamline the processes. Create a Design System and Qa with Storybook for scalability.

To design four responsive dashboards for different part of the business based on employee’s feedback. Onboarding former cost and risk managers as part of the team to streamline the processes. Create a Design System and Qa with Storybook for scalability.

To design four responsive dashboards for different part of the business based on employee’s feedback. Onboarding former cost and risk managers as part of the team to streamline the processes. Create a Design System and Qa with Storybook for scalability.

Results

Initially, we encountered resistance to the adoption of the product by employees, but the improvements to T&T's digital capabilities proved vital during the 2020 lockdown, ensuring the continuity of business processes.

Initially, we encountered resistance to the adoption of the product by employees, but the improvements to T&T's digital capabilities proved vital during the 2020 lockdown, ensuring the continuity of business processes.

Initially, we encountered resistance to the adoption of the product by employees, but the improvements to T&T's digital capabilities proved vital during the 2020 lockdown, ensuring the continuity of business processes.

Initially, we encountered resistance to the adoption of the product by employees, but the improvements to T&T's digital capabilities proved vital during the 2020 lockdown, ensuring the continuity of business processes.

Initially, we encountered resistance to the adoption of the product by employees, but the improvements to T&T's digital capabilities proved vital during the 2020 lockdown, ensuring the continuity of business processes.

MY SERVICES

MY SERVICESa

MY SERVICES

- UX & UI Design
- Wireframes
- Low-fidelityPrototyping
- High-fidelity Prototyping
- Testing
- Component library
- Design System
- QA

- UX & UI Design
- Wireframes
- Low-fidelityPrototyping
- High-fidelity Prototyping
- Testing
- Component library
- Design System
- QA

- UX & UI Design
- Wireframes
- Low-fidelityPrototyping
- High-fidelity Prototyping
- Testing
- Component library
- Design System
- QA

- UX & UI Design
- Wireframes
- Low-fidelityPrototyping
- High-fidelity Prototyping
- Testing
- Component library
- Design System
- QA

- UX & UI Design
- Wireframes
- Low-fidelityPrototyping
- High-fidelity Prototyping
- Testing
- Component library
- Design System
- QA

Turner and Townsend (T&T) operates in 50 countries and have over 70 years in the business. They consult in programme, cost and project management. They oversee major projects in property, infrastructure, natural resources. Notable works: The Shard in London and airports in Hong Kong and Abu Dhabi..

Turner and Townsend (T&T) operates in 50 countries and have over 70 years in the business. They consult in programme, cost and project management. They oversee major projects in property, infrastructure, natural resources. Notable works: The Shard in London and airports in Hong Kong and Abu Dhabi.

Turner and Townsend (T&T) operates in 50 countries and have over 70 years in the business. They consult in programme, cost and project management. They oversee major projects in property, infrastructure, natural resources. Notable works: The Shard in London and airports in Hong Kong and Abu Dhabi.

Turner and Townsend (T&T) operates in 50 countries and have over 70 years in the business. They consult in programme, cost and project management. They oversee major projects in property, infrastructure, natural resources. Notable works: The Shard in London and airports in Hong Kong and Abu Dhabi.

Turner and Townsend (T&T) operates in 50 countries and have over 70 years in the business. They consult in programme, cost and project management. They oversee major projects in property, infrastructure, natural resources. Notable works: The Shard in London and airports in Hong Kong and Abu Dhabi.

Research

Research

Research

Research

Design

Design

Design

Design

Project

Pretty Pictures

Pretty Pictures

Pretty Pictures

Skip Case Study?

Skip Case Study?

Skip Case Study?

Skip Case Study?

Skip Case Study?

 

I’ve poured hours into crafting this case study - It is lengthy.
If you skip now you can always you know, scroll up?

I’ve poured hours into crafting this case study - It is lengthy. If you skip now you can always you know, scroll up?

I’ve poured hours into crafting this case study - It is lengthy. If you skip now you can always you know, scroll up?

 

 

RESEARCH PHASE

RESEARCH PHASE

RESEARCH PHASE

01 DISCOVER   |   02 DEFINE  |   03 EVALUATE

01 DISCOVER   |   02 DEFINE   |   03 EVALUATE

DESIGN PHASE

DESIGN PHASE

DESIGN PHASE

04 IMPLEMENT UX   |   05 IMPLEMENT UI   |   06 FINE TUNE

04 IMPLEMENT UX   |  05 IMPLEMENT UI  
06 FINE TUNE

01 DISCOVER

01 DISCOVER

01 DISCOVER

01 DISCOVER | 02 DEFINE | 03 EVALUATE | 04 IMPLEMENT UX | 05 IMPLEMENT UI | 06 FINE TUNE

01 RESEARCH

Audit existing Product
Competitive analysis
Personas

Audit existing Product
Competitive analysis
Personas

Audit existing Product
Competitive analysis
Personas

Audit existing Product
Competitive analysis
Personas

Audit Existing Product

02 DEFINE

02 DEFINE

02 DEFINE

02 DEFINE

02 DEFINE

Goals
MVP

Goals
MVP

Goals
MVP

Goals
MVP

Audit Existing Product

03 EVALUATE

03 EVALUATE

03 EVALUATE

03 EVALUATE

03 EVALUATE

UX Assessment
UI Assessment
Interaction Assessment

UX Assessment
UI Assessment
Interaction Assessment

UX Assessment
UI Assessment
Interaction Assessment

UX Assessment
UI Assessment
Interaction Assessment

Audit Existing Product

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

01 RESEARCH

CJM
Features
Wireframes
User Flow
Wireframess

CJM
Features
Wireframes
User Flow
Wireframess

CJM
Features
Wireframes
User Flow
Wireframess

CJM
Features
Wireframes
User Flow
Wireframess

Audit Existing Product

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT UI

01 RESEARCH

Layout
Refinement
Design System Break Points

Layout
Refinement
Design System Break Points

Layout
Refinement
Design System Break Points

Layout
Refinement
Design System Break Points

Audit Existing Product

06 FINE TUNING

06 FINE TUNING

06 FINE TUNING

06 FINE TUNING

01 RESEARCH

Iteration
Bring it all together

Iteration
Bring it all together

Iteration
Bring it all together

Iteration
Bring it all together

Audit Existing Product

01 DISCOVER

01 DISCOVER

01 DISCOVER

01 DISCOVER | 02 DEFINE | 03 EVALUATE | 04 IMPLEMENT UX | 05 IMPLEMENT UI | 06 FINE TUNE

01 RESEARCH

Audit existing Product
Competitive analysis
Personas

Audit existing Product
Competitive analysis
Personas

Audit existing Product
Competitive analysis
Personas

Audit existing Product
Competitive analysis
Personas

Audit Existing Product

02 DEFINE

02 DEFINE

02 DEFINE

02 DEFINE

02 DEFINE

Goals
MVP

Goals
MVP

Goals
MVP

Goals
MVP

Audit Existing Product

03 EVALUATE

03 EVALUATE

03 EVALUATE

03 EVALUATE

03 EVALUATE

UX Assessment
UI Assessment
Interaction Assessment

UX Assessment
UI Assessment
Interaction Assessment

UX Assessment
UI Assessment
Interaction Assessment

UX Assessment
UI Assessment
Interaction Assessment

Audit Existing Product

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

01 RESEARCH

CJM
Features
Wireframes
User Flow
Wireframess

CJM
Features
Wireframes
User Flow
Wireframess

CJM
Features
Wireframes
User Flow
Wireframess

CJM
Features
Wireframes
User Flow
Wireframess

Audit Existing Product

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT UI

01 RESEARCH

Layout
Refinement
Design System Break Points

Layout
Refinement
Design System Break Points

Layout
Refinement
Design System Break Points

Layout
Refinement
Design System Break Points

Audit Existing Product

06 FINE TUNING

06 FINE TUNING

06 FINE TUNING

06 FINE TUNING

01 RESEARCH

Iteration
Bring it all together

Iteration
Bring it all together

Iteration
Bring it all together

Iteration
Bring it all together

Audit Existing Product

TT_dashboard_mockup_2x

Process

We adopted an agile approach with a unique team structure. To facilitate the digital transformation, the business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers for this project. They also represented our targeted users. This strategic move improved efficiency within the team.
We adopted an agile approach with a unique team structure. To facilitate the digital transformation, the business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers for this project. They also represented our targeted users. This strategic move improved efficiency within the team.
We adopted an agile approach with a unique team structure. To facilitate the digital transformation, the business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers. They also represented our targeted users. This strategic move improved efficiency within the team.
We adopted an agile approach with a unique team structure. To facilitate the digital transformation, the business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers. They also represented our targeted users. This strategic move improved efficiency within the team.
We adopted an agile approach with a unique team structure. The business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers. They also represented our targeted users.
process
01. Prototype & Refine

Bi-weekly prototyping, testing and refining sessions with stakeholders and PO’s with high fidelity prototypes.

Bi-weekly prototyping, testing and refining sessions with stakeholders and PO’s with high fidelity prototypes.

Bi-weekly prototyping, testing and refining sessions with stakeholders and PO’s with high fidelity prototypes.

02. Design to Scale

Refine and update the design system and component library for across all dashboards.

Refine and update the design system and component library for across all dashboards.

Refine and update the design system and component library for across all dashboards.

03. Iterate updates

Fine-tuning dependent features across dashboards based on testing insights

01 DISCOVER

01 DISCOVER

01 DISCOVER

01 DISCOVER

01 DISCOVER

RESEARCH

RESEARCH

RESEARCH

RESEARCH

RESEARCH

Insights

Insights

After a few rounds of workshops using preliminary user feedback, empathy maps, and card sorting we determined the main issues.
After a few rounds of workshops using preliminary user feedback, empathy maps, and card sorting we determined the main issues.
We adopted an agile approach with a unique team structure. To facilitate the digital transformation, the business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers. They also represented our targeted users. This strategic move improved efficiency within the team.
We adopted an agile approach with a unique team structure. To facilitate the digital transformation, the business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers. They also represented our targeted users. This strategic move improved efficiency within the team.
We adopted an agile approach with a unique team structure. The business trained risk, cost, and asset managers to transition into the roles of Product Owners and Project Managers. They also represented our targeted users.
01. Adoption Resistance
01. Adoption Resistance

Employees were too used to the old system and resisted adopting a new management system

Employees were too used to the old system and resisted adopting a new management system

Bi-weekly prototyping, testing and refining sessions with stakeholders and PO’s with high fidelity prototypes.

Bi-weekly prototyping, testing and refining sessions with stakeholders and PO’s with high fidelity prototypes.

Bi-weekly prototyping, testing and refining sessions with stakeholders and PO’s with high fidelity prototypes.

02. Slow action on agreements
02. Slow action on agreements

Documents must have a centralised place to live for overseas employer signatures, not in paper.

Documents must have a centralised place to live for overseas employer signatures, not in paper.

Documents must have a centralised place to live for overseas employer signatures, not in paper.

Documents must have a centralised place to live for overseas employer signatures, not in paper.

Documents must have a centralised place to live for overseas employer signatures, not in paper.

03. Data Sharing Challenge
03. Data Sharing Challenge

Data was predominantly paper-based, hindering effective sharing across departments.

Data was predominantly paper-based, hindering effective sharing across departments.

03. Lack of Automation
03. Lack of Automation

Manual data entering lead to human-errors, resulting in cost overruns and inaccurate budgeting.

Manual data entering lead to human-errors, resulting in cost overruns and inaccurate budgeting.

Personas

Personas

Personas

Personas

Personas

Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
TT_Persona1
TT_Persona2
Grouping issues by product
Grouping issues by product

50 people were interviewed and we grouped the insights by possible product, 52.78% needed a solution for cost control.

50 people were interviewed and we grouped the insights by possible product, 52.78% needed a solution for cost control.

TT_tests1

Personas

Personas

Personas

Personas

Personas

Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
Our target users were employees, particularly risk and account managers who have been in the business for at least 5 years.
TT_Persona1
TT_Persona2
Grouping issues by product
Grouping issues by product

50 people were interviewed and we grouped the insights by possible product, 52.78% needed a solution for cost control.

50 people were interviewed and we grouped the insights by possible product, 52.78% needed a solution for cost control.

TT_tests1

02 DEFINE

02 DEFINE

02 DEFINE

02 DEFINE

02 DEFINE

RESEARCH

RESEARCH

RESEARCH

RESEARCH

RESEARCH

Goals

Goals

Goals

Goals

Goals

With 52.78% of the people interviewed needing a solution for Cost Control, his case study focus on exactly that.
With 52.78% of the people interviewed needing a solution for Cost Control, his case study focus on exactly that.
With 52.78% of the people interviewed needing a solution for Cost Control, his case study focus on exactly that.
With 52.78% of the people interviewed needing a solution for Cost Control, his case study focus on exactly that.
With 52.78% of the people interviewed needing a solution for Cost Control, his case study focus on exactly that.
TT_hive1
TT_Benchmarking
TT_Market-Rate-DB
TT_CC

03 EVALUATE

03 EVALUATE

03 EVALUATE

03 EVALUATE

03 EVALUATE

RESEARCH

RESEARCH

RESEARCH

RESEARCH

RESEARCH

User Interface Assessment

User Interface Assessment

User Interface Assessment

User Interface Assessment

User Interface Assessment

Before wire-framing, I evaluate the current product to guide data structure. This involves assessing UI, UX, and interactions to find chances for reusing, revising, or refreshing elements, flows, and components.
Before wire-framing, I evaluate the current product to guide data structure. This involves assessing UI, UX, and interactions to find chances for reusing, revising, or refreshing elements, flows, and components.
Before wire-framing, I evaluate the current product to guide data structure. This involves assessing UI, UX, and interactions to find chances for reusing, revising, or refreshing elements, flows, and components.
Before wire-framing, I evaluate the current product to guide data structure. This involves assessing UI, UX, and interactions to find chances for reusing, revising, or refreshing elements, flows, and components.
Before wire-framing, I evaluate the current product to guide data structure. This involves assessing UI, UX, and interactions to find chances for reusing, revising, or refreshing elements, flows, and components.
TT_Minor
TT_Severe
TT_Solutions

User Experience Assessment

User Experience Assessment

User Experience Assessment

The Filter Component exemplifies the impact of revising existing UI, UX and interaction. Previously, the Global component Filter required users to untick all options to narrow a search down.
The Filter Component exemplifies the impact of revising existing UI, UX and interaction. Previously, the Global component Filter required users to untick all options to narrow a search down.
The Filter Component exemplifies the impact of revising existing UI, UX and interaction. Previously, the Global component Filter required users to untick all options to narrow a search down.
close
TT_Filters-1
ticker
TT_Filters-1
close
TT_Filters-1
ticker
TT_Filters-1

Interaction Assessment

Interaction Assessment

Interaction Assessment

In the design process I began to noticed some UI & UX sub-optimal choices, such as a a global slider on the left sliding right, covering initial cells in all tables. Rectifying this improved visibility, expediting analysis.
In the design process I began to noticed some UI & UX sub-optimal choices, such as a a global slider on the left sliding right, covering initial cells in all tables. Rectifying this improved visibility, expediting analysis.
In the design process I began to noticed some UI & UX sub-optimal choices, such as a a global slider on the left sliding right, covering initial cells in all tables. Rectifying this improved visibility, expediting analysis.
TT_slide

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

04 IMPLEMENT UX

DESIGN

DESIGN

DESIGN

RESEARCH

DESIGN

Customer Journey Map

Customer Journey Map

Customer Journey Map

Customer Journey Map

Customer Journey Map

I find immense value brainstorming in a war room pre-design work. These workshops help turning feedback into opportunities.
I find immense value brainstorming in a war room pre-design work. These workshops help turning feedback into opportunities.
I find immense value brainstorming in a war room pre-design work. These workshops help turning feedback into opportunities.
I find immense value brainstorming in a war room pre-design work. These workshops help turning feedback into opportunities.
I find immense value brainstorming in a war room pre-design work. These workshops help turning feedback into opportunities.
TT_process.jpg
TT_Shot
TT_define_2.jpg
TT_Journey

Feature requests

Feature requests

Feature requests

Feature requests

Feature requests

We found out the 3 most required features, to be part of the MVP release. These will be the features I’ll be focusing on this case study.
We found out the 3 most required features, to be part of the MVP release. These will be the features I’ll be focusing on this case study.
We found out the 3 most required features, to be part of the MVP release. These will be the features I’ll be focusing on this case study.
We found out the 3 most required features, to be part of the MVP release. These will be the features I’ll be focusing on this case study.
We found out the 3 most required features, to be part of the MVP release. These will be the features I’ll be focusing on this case study.
01 Change Tab
01 Change Tab
01 Change Tab
01 Change Tab
01 Change Tab

Cost Managers monitor the project’s health and the evolution of its costs. The change tab logs the ledger of all cost changes on a project.



Use Case: A long-term, large-scale project undergoes a cost adjustment that deviates from the original project estimate.

Cost Managers monitor the project’s health and the evolution of its costs. The change tab logs the ledger of all cost changes on a project.



Use Case: A long-term, large-scale project undergoes a cost adjustment that deviates from the original project estimate.

Cost Managers monitor the project’s health and the evolution of its costs. The change tab logs the ledger of all cost changes on a project.



Use Case: A long-term, large-scale project undergoes a cost adjustment that deviates from the original project estimate.

Cost Managers monitor the project’s health and the evolution of its costs. The change tab logs the ledger of all cost changes on a project.



Use Case: A long-term, large-scale project undergoes a cost adjustment that deviates from the original project estimate.

Cost Managers monitor the project’s health and the evolution of its costs. The change tab logs the ledger of all cost changes on a project.



Use Case: A long-term, large-scale project undergoes a cost adjustment that deviates from the original project estimate.

02 Risk Tab
02 Risk Tab
02 Risk Tab
02 Risk Tab
02 Risk Tab

Help Risk Managers optimise the value derived from risks, identify opportunities and decide which response actions to take.

Use Case: The project faces the risk of a 23% cost increase due to foreign glass importation.

Help Risk Managers optimise the value derived from risks, identify opportunities and decide which response actions to take.

Use Case: The project faces the risk of a 23% cost increase due to foreign glass importation.

Help Risk Managers optimise the value derived from risks, identify opportunities and decide which response actions to take.

Use Case: The project faces the risk of a 23% cost increase due to foreign glass importation.

Help Risk Managers optimise the value derived from risks, identify opportunities and decide which response actions to take.

Use Case: The project faces the risk of a 23% cost increase due to foreign glass importation.

Help Risk Managers optimise the value derived from risks, identify opportunities and decide which response actions to take.

Use Case: The project faces the risk of a 23% cost increase due to foreign glass importation.

03 Generate, Export and Print a Report
03 Generate, Export and Print a Report
03 Generate, Export and Print a Report
03 Generate, Export and Print a Report
03 Generate, Export and Print a Report

Export and Print a Report Live reports are periodically shared with clients and managers to monitor budgets and schedules. Enable digital signatures to speed processes.



Use Case: Te supplier increased their prices. The updated budget, reflecting the revised costs, awaits managerial and client signatures.

Export and Print a Report Live reports are periodically shared with clients and managers to monitor budgets and schedules. Enable digital signatures to speed processes.



Use Case: Te supplier increased their prices. The updated budget, reflecting the revised costs, awaits managerial and client signatures.

Export and Print a Report Live reports are periodically shared with clients and managers to monitor budgets and schedules. Enable digital signatures to speed processes.



Use Case: Te supplier increased their prices. The updated budget, reflecting the revised costs, awaits managerial and client signatures.

Export and Print a Report Live reports are periodically shared with clients and managers to monitor budgets and schedules. Enable digital signatures to speed processes.



Use Case: Te supplier increased their prices. The updated budget, reflecting the revised costs, awaits managerial and client signatures.

Export and Print a Report Live reports are periodically shared with clients and managers to monitor budgets and schedules. Enable digital signatures to speed processes.



Use Case: Te supplier increased their prices. The updated budget, reflecting the revised costs, awaits managerial and client signatures.

User Flow

User Flow

User Flow

User Flow

User Flow

The highlighted features in orange are the primary focus in this case study. Similar features apply to Risk, Schedule Report Settings and Schedule are in Settings.
The highlighted features in orange are the primary focus in this case study. Similar features apply to Risk, Schedule Report Settings and Schedule are in Settings.
The highlighted features in orange are the primary focus in this case study. Similar features apply to Risk, Schedule Report Settings and Schedule are in Settings.
The highlighted features in orange are the primary focus in this case study. Similar features apply to Risk, Schedule Report Settings and Schedule are in Settings.
The highlighted features in orange are the primary focus in this case study. Similar features apply to Risk, Schedule Report Settings and Schedule are in Settings.
TT_Flow

Wire-framing

Wire-framing

Wire-framing

Wire-framing

Wire-framing

Once the user flow was approved, low-fidelity wireframes were done considering the project audit done previously.
Once the user flow was approved, low-fidelity wireframes were done considering the project audit done previously.
Once the user flow was approved, low-fidelity wireframes were done considering the project audit done previously.
Once the user flow was approved, low-fidelity wireframes were done considering the project audit done previously.
Once the user flow was approved, low-fidelity wireframes were done considering the project audit done previously.
TT_define_3.jpg
TT_wireframe-1.jpg

Layout

Layout

Layout

Layout

Layout

After organising the data based on hierarchy and reading flow across all products, I suggested global layout, aiming for scalability.
After organising the data based on hierarchy and reading flow across all products, I suggested global layout, aiming for scalability.
After organising the data based on hierarchy and reading flow across all products, I suggested global layout, aiming for scalability.
After organising the data based on hierarchy and reading flow across all products, I suggested global layout, aiming for scalability.
After organising the data based on hierarchy and reading flow across all products, I suggested global layout, aiming for scalability.
TT_layout1.png

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

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

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

Refining

Refining

Refining

Refining

Refining

Moving towards high-fidelity wireframes to map real spacing, dependencies, interactions, states and questions that may surge to bring on the next iteration.
Moving towards high-fidelity wireframes to map real spacing, dependencies, interactions, states and questions that may surge to bring on the next iteration.
Moving towards high-fidelity wireframes to map real spacing, dependencies, interactions, states and questions that may surge to bring on the next iteration.
Moving towards high-fidelity wireframes to map real spacing, dependencies, interactions, states and questions that may surge to bring on the next iteration.
Moving towards high-fidelity wireframes to map real spacing, dependencies, interactions, states and questions that may surge to bring on the next iteration.
TT_exploration

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT UI

05 IMPLEMENT Ui

DESIGN

DESIGN

DESIGN

DESIGN

DESIGN

Design System

Design System

Design System

Design System

Design System

As a result of iteration, I started a Design System that supports sprint work in preparation for scaling. Soon enough, we were prototyping and testing in high fidelity wireframes.
As a result of iteration, I started a Design System that supports sprint work in preparation for scaling. Soon enough, we were prototyping and testing in high fidelity wireframes.
As a result of iteration, I started a Design System that supports sprint work in preparation for scaling. Soon enough, we were prototyping and testing in high fidelity wireframes.
As a result of iteration, I started a Design System that supports sprint work in preparation for scaling. Soon enough, we were prototyping and testing in high fidelity wireframes.
As a result of iteration, I started a Design System that supports sprint work in preparation for scaling. Soon enough, we were prototyping and testing in high fidelity wireframes.
TT_DS_1
TT_guide_2

Breakpoints

Breakpoints

Breakpoints

Breakpoints

Breakpoints

High-Fidelity wireframes study to stress test content and design elements across different breakpoints.
High-Fidelity wireframes study to stress test content and design elements across different breakpoints.
High-Fidelity wireframes study to stress test content and design elements across different breakpoints.
High-Fidelity wireframes study to stress test content and design elements across different breakpoints.
High-Fidelity wireframes study to stress test content and design elements across different breakpoints.
TT_breakpoint1b
TT_breakpoint2b

Iterating

Iterating

Iterating

Iterating

Iterating

Last but not least, design decisions and releases go through the process of iteration until they pass the quality we set for each round.
Last but not least, design decisions and releases go through the process of iteration until they pass the quality we set for each round.
Last but not least, design decisions and releases go through the process of iteration until they pass the quality we set for each round.
Last but not least, design decisions and releases go through the process of iteration until they pass the quality we set for each round.
Last but not least, design decisions and releases go through the process of iteration until they pass the quality we set for each round.
TT_Box1
TT_Box2

RESULTS

RESULTS

RESULTS

RESULTS

RESULTS

Bring it all together

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

Cost Control Dashboard. Here are 3 features, solved.

Cost Control Dashboard. Here are 3 features, solved.

Cost Control Dashboard. Here are 3 features, solved.

Change Tab

Change Tab

Change Tab

Change Tab

Change Tab

At a glance Cost Managers can now monitor the project's health and cost evolution, log cost changes against the original project estimate

At a glance Cost Managers can now monitor the project's health and cost evolution, log cost changes against the original project estimate

At a glance Cost Managers can now monitor the project's health and cost evolution, log cost changes against the original project estimate

At a glance Cost Managers can now monitor the project's health and cost evolution, log cost changes against the original project estimate

At a glance Cost Managers can now monitor the project's health and cost evolution, log cost changes against the original project estimate

TT_ChangeTab

JOURNEY

JOURNEY

JOURNEY

JOURNEY

JOURNEY

Cost Slider

Cost Slider

Cost Slider

Cost Slider

Cost Slider

Add, edit/change a cost, view cost history, key stats, change and cost status.

Add, edit/change a cost, view cost history, key stats, change and cost status.

Add, edit/change a cost, view cost history, key stats, change and cost status.

Add, edit/change a cost, view cost history, key stats, change and cost status.

Add, edit/change a cost, view cost history, key stats, change and cost status.

browser_bar_dark

JOURNEY

JOURNEY

JOURNEY

JOURNEY

JOURNEY

Filter entries

Filter entries

Filter entries

Filter entries

Filter entries

Show history log of changes in a chronological graph. Search entries.

Show history log of changes in a chronological graph. Search entries.

Show history log of changes in a chronological graph. Search entries.

Show history log of changes in a chronological graph. Search entries.

Show history log of changes in a chronological graph. Search entries.

browser_bar_dark

Risk & Opportunity Tab

Risk & Opportunity Tab

Risk & Opportunity Tab

Risk & Opportunity Tab

Risk & Opportunity Tab

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.

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.

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.

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.

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.

TT_RiskTab2

JOURNEY

JOURNEY

JOURNEY

JOURNEY

JOURNEY

Risk Slider

Risk Slider

Risk Slider

Risk Slider

Risk Slider

Add & edit a Risk, view cost history, key stats, change and cost status.

Add & edit a Risk, view cost history, key stats, change and cost status.

Add & edit a Risk, view cost history, key stats, change and cost status.

Add & edit a Risk, view cost history, key stats, change and cost status.

Add & edit a Risk, view cost history, key stats, change and cost status.

browser_bar_dark

Report

Report

Report

Report

Report Scheduling

To enhace project transparency, a live reporting system was included.
It displays live data from costs, risks, valuations and cashflows to accurately show status, costs and schedules of a project.

To enhace project transparency, a live reporting system was included.
It displays live data from costs, risks, valuations and cashflows to accurately show status, costs and schedules of a projec.

To enhace project transparency, a live reporting system was included. It displays live data to accurately show status, costs and schedules of a project.

To enhace project transparency, a live reporting system was included. It displays live data to accurately show status, costs and schedules of a project.

To enhace project transparency, a live reporting system was included. It displays live data to accurately show status, costs and schedules of a project.

TT_Report

JOURNEY

JOURNEY

JOURNEY

JOURNEY

JOURNEY

Reporting Schedule

Reporting Schedule

Reporting Schedule

Reporting Schedule

Reporting Schedule

Set the reporting schedules to reflect a project’s unique timeline before exporting to PDF, or print. Manage the progress of several projects at once.

Set the reporting schedules to reflect a project’s unique timeline before exporting to PDF, or print. Manage the progress of several projects at once.

Set the reporting schedules to reflect a project’s unique timeline before exporting to PDF, or print. Manage the progress of several projects at once.

Set the reporting schedules to reflect a project’s unique timeline before exporting to PDF, or print.

Set the reporting schedules to reflect a project’s unique timeline before exporting to PDF, or print.

browser_bar_dark

Change Tab

Change Tab

Change Tab

Change Tab

Change Tab

TT_mobile1
TT_mobile2
TT_mobile3
TT_mobile4

Risk Tab

Risk Tab

Risk Tab

Risk Tab

Risk Tab

TT_mobile5
TT_mobile6
TT_mobile7
TT_mobile8

JOURNEY

JOURNEY

JOURNEY

JOURNEY

JOURNEY

Export Report

Export Report

Export Report

Export Report

Export Report

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

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

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

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

browser_bar_dark

GRAPHIC DESIGN

GRAPHIC DESIGN

GRAPHIC DESIGN

GRAPHIC DESIGN

JOURNEY

Report Design

Report Design

Report Design

Report Design

Report Report

To print the Report, I adjusted the elements and spacings from digital to print units to fit a A4, ensuring readability.

To print the Report, I adjusted the elements and spacings from digital to print units to fit a A4, ensuring readability.

To print the Report, I adjusted the elements and spacings from digital to print units to fit a A4, ensuring readability. 

To print the Report, I adjusted the elements and spacings from digital to print units to fit a A4, ensuring readability. 

To print the Report, I adjusted the elements and spacings from digital to print units to fit a A4, ensuring readability.

TT_treated_report_original
TT_report_design_1
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
report_0007_Vector-Smart-Object
report_0005_Vector-Smart-Object
report_0003_Vector-Smart-Object
report_0006_Vector-Smart-Object
report_0004_Vector-Smart-Object
report_0001_Vector-Smart-Object

Design System

Since there are 4 dashboards sharing the same design language, a Component Library, Style-guide, UI KIT and Pattern Library were created to form a Design System.

Since there are 4 dashboards sharing the same design language, a Component Library, Style-guide, UI KIT and Pattern Library were created to form a Design System.

Component Library

Component Library

Component Library

Component Library

Component Library

Many components and their variants are shared across dashboards, I have set the files and logic to ensure the child components are automatically QA’d. one of which is a Slider Component which I reset into a Master Component, and QA’d for StoryBook. 

See Component Library UI Case Study

Many components and their variants are shared across dashboards, I have set the files and logic to ensure the child components are automatically QA’d. one of which is a Slider Component which I reset into a Master Component, and QA’d for StoryBook. 

See Component Library UI Case Study 

Many components and their variants are shared across dashboards, I have set the files and logic to ensure the child components are automatically QA’d.

See Component Library UI Case Study →

Many components and their variants are shared across dashboards, I have set the files and logic to ensure the child components are automatically QA’d for Storybook.

See Component Library UI Case Study

Many components and their variants are shared across dashboards, I have set the files and logic to ensure the child components are automatically QA’d for Storybook.

See Component Library UI Case Study

TT_-Pattern_Library

Styleguide

Styleguide

Styleguide

Styleguide

Styleguide

Collaborated on the style guide detailing how to use colours, icons, layouts, typography and more, serving as a key documentation for both the present and future teams.

Collaborated on the style guide detailing how to use colours, icons, layouts, typography and more, serving as a key documentation for both the present and future teams.

Collaborated on the style guide detailing how to use colours, icons, layouts, typography and more, serving as a key documentation for both the present and future teams.

Collaborated on the style guide detailing how to use colours, icons, layouts, typography and more, serving as a key documentation for both the present and future teams.

Collaborated on the style guide detailing how to use colours, icons, layouts, typography and more, serving as a key documentation for both the present and future teams.

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

The end.

Logo@0.33x

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

©Marcia Gaudencio 2023. All Rights Reserved.