01
Therma
The previous UI library was fragmented across Figma and Sketch, with duplicated components, inconsistent naming, and missing variable and properties optimisation.
Watlow ©
The new system unifies design and documentation, providing clear guidelines for teams and optimised, token-driven components that ensure consistency, scalability, and seamless collaboration.
Architecture
02
02
02
A scalable, modular library architecture
Specialised libraries like Therma EPM extend the base architecture with product-specific components, data-driven UI patterns, and interaction models optimised for complex industrial workflows and domain precision.
Built using Atomic Design principles, each layer, from tokens to organisms, ensures scalability, consistency, and flexibility, allowing updates to cascade system-wide while maintaining clarity and alignment across products.
Architecture
02
02
A scalable, modular library architecture
Specialised libraries like Therma EPM extend the base architecture with product-specific components, data-driven UI patterns, and interaction models optimised for complex industrial workflows and domain precision.
Built using Atomic Design principles, each layer, from tokens to organisms, ensures scalability, consistency, and flexibility, allowing updates to cascade system-wide while maintaining clarity and alignment across products.
01/04
02
A scalable, modular library architecture
Specialised libraries like Therma EPM extend the base architecture with product-specific components, data-driven UI patterns, and interaction models optimised for complex industrial workflows and domain precision.
Built using Atomic Design principles, each layer, from tokens to organisms, ensures scalability, consistency, and flexibility, allowing updates to cascade system-wide while maintaining clarity and alignment across products.
Components
04
04
04
Scalability & systemised component logic
Components were structured following Atomic Design principles, ensuring scalability and clarity from foundational atoms to complex, reusable organisms.
Each component was built with optimised properties panels, variants, auto-layout, & standardised layer naming, enabling designers to configure variants efficiently and maintain consistency across products.
Tokens
03
03
03
Demonstrate consistency & logic at the core level
The foundation layer defines colour, shape, and typography tokens, providing consistent visual logic across all components.
Each variable follows a structured naming convention, enabling easy updates and seamless handoff to development.
Tokens
03
03
Demonstrate consistency & logic at the core level
The foundation layer defines colour, shape, and typography tokens, providing consistent visual logic across all components.
Each variable follows a structured naming convention, enabling easy updates and seamless handoff to development.
01/04
01/04
03
Demonstrate consistency & logic at the core level
The foundation layer defines colour, shape, and typography tokens, providing consistent visual logic across all components.
Each variable follows a structured naming convention, enabling easy updates and seamless handoff to development.
Components
04
04
Scalability & systemised component logic
Components were structured following Atomic Design principles, ensuring scalability and clarity from foundational atoms to complex, reusable organisms.
Each component was built with optimised properties panels, variants, auto-layout, & standardised layer naming, enabling designers to configure variants efficiently and maintain consistency across products.
01/04
01/04
04
Scalability & systemised component logic
Components were structured following Atomic Design principles, ensuring scalability and clarity from foundational atoms to complex, reusable organisms.
Each component was built with optimised properties panels, variants, auto-layout, & standardised layer naming, enabling designers to configure variants efficiently and maintain consistency across products.
Handoff
05
05
05
Production-readiness & collaboration
The system was designed for seamless developer handoff, with component specs, tokens, & variant logic documented within Figma, Confluence & Jira.
It’s structured for cross-disciplinary understanding, providing clear guidelines and shared language that align product managers, developers, and designers throughout the workflow.
Handoff
05
05
Production-readiness & collaboration
The system was designed for seamless developer handoff, with component specs, tokens, & variant logic documented within Figma, Confluence & Jira.
It’s structured for cross-disciplinary understanding, providing clear guidelines and shared language that align product managers, developers, and designers throughout the workflow.
01/04
01/04
05
Production-readiness & collaboration
The system was designed for seamless developer handoff, with component specs, tokens, & variant logic documented within Figma, Confluence & Jira.
It’s structured for cross-disciplinary understanding, providing clear guidelines and shared language that align product managers, developers, and designers throughout the workflow.
Result
06
06
06
Results & measurable impact on collaboration
The new design system and workflow improvements significantly increased engagement, with survey responses rising threefold and overall satisfaction reaching 94% across key collaboration metrics.
Feedback highlighted stronger alignment between UX, stakeholders, and engineering, improved communication, and clearer design deliverables, demonstrating the system’s measurable impact on efficiency, trust, and cross-functional collaboration.
Result
06
06
Results & measurable impact on collaboration
The new design system and workflow improvements significantly increased engagement, with survey responses rising threefold and overall satisfaction reaching 94% across key collaboration metrics.
Feedback highlighted stronger alignment between UX, stakeholders, and engineering, improved communication, and clearer design deliverables, demonstrating the system’s measurable impact on efficiency, trust, and cross-functional collaboration.
01/04
01/04
06
Results & measurable impact on collaboration
The new design system and workflow improvements significantly increased engagement, with survey responses rising threefold and overall satisfaction reaching 94% across key collaboration metrics.
Feedback highlighted stronger alignment between UX, stakeholders, and engineering, improved communication, and clearer design deliverables, demonstrating the system’s measurable impact on efficiency, trust, and cross-functional collaboration.
01/04
Introduction
01
01
Therma
The previous UI library was fragmented across Figma and Sketch, with duplicated components, inconsistent naming, and missing variable and properties optimisation.
Watlow ©
The new system unifies design and documentation, providing clear guidelines for teams and optimised, token-driven components that ensure consistency, scalability, and seamless collaboration.
Introduction
01
01
01
Therma Watlow ©
The previous UI library was fragmented across Figma and Sketch, with duplicated components, inconsistent naming, and missing variable and properties optimisation.
The new system unifies design and documentation, providing clear guidelines for teams and optimised, token-driven components that ensure consistency, scalability, and seamless collaboration.
Therma
The previous UI library was fragmented across Figma and Sketch, with duplicated components, inconsistent naming, and missing variable and properties optimisation.
The new system unifies design and documentation, providing clear guidelines for teams and optimised, token-driven components that ensure consistency, scalability, and seamless collaboration.
Next
see more +
see more +
see more +
see more +
see more +
see more +
Thermal Watch
Led the design for Thermal Watch, an industrial system health monitor, rapidly evolving an unfinished concept into a functional product within three weeks.
Thermal Watch Watlow ©
Led the design for Thermal Watch, an industrial system health monitor, rapidly evolving an unfinished concept into a functional product within three weeks.
Thermal Watch Watlow ©
Led the design for Thermal Watch, an industrial system health monitor, rapidly evolving an unfinished concept into a functional product within three weeks.
Thermal Watch
Watlow ©
Led the design for Thermal Watch, an industrial system health monitor, rapidly evolving an unfinished concept into a functional product within three weeks.
Watlow ©
UX & UI Designer
End-to-End Ownership, Problem Framing
Interaction, Information, & UX Design Under Pressure
Project Manager & Developer Collaboration
UX & UI Designer
End-to-End Ownership, Problem Framing
Interaction, Information, & UX Design Under Pressure
Project Manager & Developer Collaboration
Watlow ©
UX & UI Designer
End-to-End Ownership, Problem Framing
Interaction, Information, & UX Design Under Pressure
Project Manager & Developer Collaboration
Watlow ©
UX & UI Designer
End-to-End Ownership, Problem Framing
Interaction, Information, & UX Design Under Pressure
Project Manager & Developer Collaboration
UX & UI Designer
End-to-End Ownership, Problem Framing
Interaction, Information, & UX Design Under Pressure
Project Manager & Developer Collaboration
UX & UI Designer
End-to-End Ownership, Problem Framing
Interaction, Information, & UX Design
Project Manager & Developer Collaboration
01/04
01/04
Problem
The Project was half-started. Stakeholders urgently needed a usable product to meet deadlines and ensure usability and reliability.
Solution
I designed and built missing pages, transforming an empty product into a functional, development hand-off ready system, delivered in just three weeks.
