UX / UI & Design Systems
Colgate
Duration: Jan - March 2026 Role: UX/UI Designer
Team: Design Team
Led end-to-end UX/UI design for a new digital product passport page, translating research insights into a fast, intuitive, and conversion-focused experience. Structured content to surface key information upfront, enabling access within one click, and designed a seamless, low-friction interaction flow.
Context
The existing DSM Foundations was lacking cohesiveness and was missing some key elements that designers were needing. Photon design team conducted a typography audit to create scalable and flexible typography styles.
They implemented their colors, weights and radious as design tokens using Figma Variables.This document outlines the technical stack and architectural approach for implementing UI tokenization in a frontend application using Angular Material UI with Storybook. The solution will focus on scalability, maintainability, and reusability while ensuring a consistent UI experience across different platforms.
Workflow & Design Evolution
The project evolved from a unified Product Detail Page +Digital Product Passport concept into a scalable, flexible, and phased DPP experience. Driven by continuous alignment, iteration, and validation.
Aligning on the Foundation
Established a clear direction by aligning on product requirements, revisiting research insights, and integrating EU regulatory constraints for the Digital Product Passport.
Shaping the Initial Experience
Defined the initial structure through wireframes in collaboration with the core team, starting with a unified PDP + DPP approach.
Evolving the Product Direction
As the project progressed, the scope shifted from a unified experience to a dedicated DPP page, driven by new technical and product inputs.
Designing for Scale
Translated wireframes into high-fidelity mockups using Colgate’s style guidelines, creating a flexible, brand-agnostic template.
Iterating through Feedback
Refined the experience across multiple iterations, introducing a phased approach (Now, Next, Later) to support incremental rollout.
Validating with Users
Tested the full experience prototype with users via Maze, leveraging insights to refine usability and clarity before client delivery.
Building the System
Developed a scalable design system in parallel, including tokens and reusable components to ensure consistency and efficiency.
Mobile First (Prototype)
UX / UI & Design Systems
Colgate
Duration: Jan - March 2026 Role: UX/UI Designer Team: Design Team
Led end-to-end UX/UI design for a new digital product passport page, translating research insights into a fast, intuitive, and conversion-focused experience. Structured content to surface key information upfront, enabling access within one click, and designed a seamless, low-friction interaction flow.
Context
The existing DSM Foundations was lacking cohesiveness and was missing some key elements that designers were needing. Photon design team conducted a typography audit to create scalable and flexible typography styles.
They implemented their colors, weights and radious as design tokens using Figma Variables.This document outlines the technical stack and architectural approach for implementing UI tokenization in a frontend application using Angular Material UI with Storybook. The solution will focus on scalability, maintainability, and reusability while ensuring a consistent UI experience across different platforms.
Workflow & Design Evolution
The project evolved from a unified Product Detail Page +Digital Product Passport concept into a scalable, flexible, and phased DPP experience. Driven by continuous alignment, iteration, and validation.
Mobile First (Prototype)
UX / UI & Design Systems
Colgate
Duration: Jan - March 2026 Role: UX/UI Designer Team: Design Team
Led end-to-end UX/UI design for a new digital product passport page, translating research insights into a fast, intuitive, and conversion-focused experience. Structured content to surface key information upfront, enabling access within one click, and designed a seamless, low-friction interaction flow.
Context
As part of a Creative Discovery to create the Digital Product Passport for Colgate, when I joined the project, core research, including Current State Analysis, Competitive Analysis, and Information Architecture, had already been established, providing a clear strategic foundation. I led the UX/UI execution, translating these insights, along with defined KPIs and product requirements, into a high-impact design.
My focus was on driving efficiency and clarity, ensuring key information was accessible within minimal steps, enabling fast, intuitive interactions, and delivering a seamless end-to-end user experience aligned with business goals.
Workflow & Design Evolution
The project evolved from a unified Product Detail Page +Digital Product Passport concept into a scalable, flexible, and phased DPP experience. Driven by continuous alignment, iteration, and validation.
01
Aligning on the Foundation
Established a clear direction by aligning on product requirements, revisiting research insights, and integrating EU regulatory constraints for the Digital Product Passport.
02
Shaping the Initial Experience
Defined the initial structure through wireframes in collaboration with the core team, starting with a unified PDP + DPP approach.
03
Evolving the Product Direction
As the project progressed, the scope shifted from a unified experience to a dedicated DPP page, driven by new technical and product inputs.
04
Designing for Scale
Translated wireframes into high-fidelity mockups using Colgate’s style guidelines, creating a flexible, brand-agnostic template.
05
Iterating through Feedback
Refined the experience across multiple iterations, introducing a phased approach (Now, Next, Later) to support incremental rollout.
06
Validating with Users
Tested the full experience prototype with users via Maze, leveraging insights to refine usability and clarity before client delivery.
07
Building the System
Developed a scalable design system in parallel, including tokens and reusable components to ensure consistency and efficiency.
Mobile First (Prototype)