Overview
Overview
Overview
At Ecolab, a global powerhouse in sustainability, I took on a challenge that hadn’t been touched before: creating the company’s first Design System from nothing. As the lead, with the help of another mid level designer, I poured six months into crafting over 1,000 components, laying the foundation for a unified digital experience. What started as a solo mission grew into something bigger, sparking the creation of a dedicated three-person team to carry it forward. This wasn’t just about pixels—it was about redefining how Ecolab’s digital products came to life, and I led the charge.
At Ecolab, a global powerhouse in sustainability, I took on a challenge that hadn’t been touched before: creating the company’s first Design System from nothing. As the lead, with the help of another mid level designer, I poured six months into crafting over 1,000 components, laying the foundation for a unified digital experience. What started as a solo mission grew into something bigger, sparking the creation of a dedicated three-person team to carry it forward. This wasn’t just about pixels—it was about redefining how Ecolab’s digital products came to life, and I led the charge.
My role: Lead UX Designer
My role: Lead UX Designer
My role: Lead UX Designer
Problem
Problem
Problem
Ecolab’s digital world was a mess. Every product team did their own thing, churning out interfaces that didn’t match—buttons looked different, fonts clashed, and the brand felt fractured online. Without a Design System, designers and developers were stuck reinventing the wheel, wasting time and energy. The company’s reputation for excellence wasn’t shining through in its digital spaces, and that gap kept me up at night. Stepping into this void as a Principal UX Designer, I saw a chance to bring order to the chaos, but it meant starting from scratch with no roadmap, limited resources, and a need to win over skeptical stakeholders.
Ecolab’s digital world was a mess. Every product team did their own thing, churning out interfaces that didn’t match—buttons looked different, fonts clashed, and the brand felt fractured online. Without a Design System, designers and developers were stuck reinventing the wheel, wasting time and energy. The company’s reputation for excellence wasn’t shining through in its digital spaces, and that gap kept me up at night. Stepping into this void as a Principal UX Designer, I saw a chance to bring order to the chaos, but it meant starting from scratch with no roadmap, limited resources, and a need to win over skeptical stakeholders.
Process
Process
Process
I kicked things off by diving deep into Ecolab’s brand, working hand-in-hand with the branding team to shape guidelines that would hold up in the digital realm. Picture me in a buzzing conference room, sketching ideas on a whiteboard, hashing things out with marketing leads, product folks, and developers. We weren’t just aligning on colors or fonts—we were crafting a shared vision for what Ecolab could be online. Those sessions were intense, full of back-and-forth, but they set the stage for something transformative.
Using Figma and atomic design principles, I built a library of over 1,000 components in six months. I started small—buttons, icons, typography—then scaled up to complex patterns like forms and tables. It was a grind. As the only one pushing this forward, I juggled design, documentation, and feedback loops while convincing teams this was worth their time. I ran workshops, showed off prototypes, and leaned on user testing to refine everything. Resistance was real—some teams loved their old ways—but I kept at it, using empathy and hard evidence to show how a Design System could make their lives easier.
The biggest hurdle? Building something this big, this fast, with no precedent. I leaned on rapid prototyping in Figma, iterating based on real feedback from developers and designers. Slowly, I turned doubters into believers, proving this system could unify Ecolab’s digital presence.
I kicked things off by diving deep into Ecolab’s brand, working hand-in-hand with the branding team to shape guidelines that would hold up in the digital realm. Picture me in a buzzing conference room, sketching ideas on a whiteboard, hashing things out with marketing leads, product folks, and developers. We weren’t just aligning on colors or fonts—we were crafting a shared vision for what Ecolab could be online. Those sessions were intense, full of back-and-forth, but they set the stage for something transformative.
Using Figma and atomic design principles, I built a library of over 1,000 components in six months. I started small—buttons, icons, typography—then scaled up to complex patterns like forms and tables. It was a grind. As the only one pushing this forward, I juggled design, documentation, and feedback loops while convincing teams this was worth their time. I ran workshops, showed off prototypes, and leaned on user testing to refine everything. Resistance was real—some teams loved their old ways—but I kept at it, using empathy and hard evidence to show how a Design System could make their lives easier.
The biggest hurdle? Building something this big, this fast, with no precedent. I leaned on rapid prototyping in Figma, iterating based on real feedback from developers and designers. Slowly, I turned doubters into believers, proving this system could unify Ecolab’s digital presence.
Solution
Solution
Solution
🔱 Neptune
🔱 Neptune
The result was “Neptune,” Ecolab’s first Design System—a toolkit built for scale and consistency. It included a massive component library in Figma, covering everything from buttons to modals, all designed with accessibility and Ecolab’s brand in mind. A detailed style guide locked in colors, typography, and spacing, while a custom documentation portal gave teams clear instructions on how to use it all.
To make it real for developers, I worked closely with engineers to turn designs into reusable React components. Neptune wasn’t just a static library—it was built to grow, with a structure that invited contributions from across the company. My goal was to balance creativity with consistency, and I made sure every piece of Neptune delivered on that promise.
The result was “Neptune,” Ecolab’s first Design System—a toolkit built for scale and consistency. It included a massive component library in Figma, covering everything from buttons to modals, all designed with accessibility and Ecolab’s brand in mind. A detailed style guide locked in colors, typography, and spacing, while a custom documentation portal gave teams clear instructions on how to use it all.
To make it real for developers, I worked closely with engineers to turn designs into reusable React components. Neptune wasn’t just a static library—it was built to grow, with a structure that invited contributions from across the company. My goal was to balance creativity with consistency, and I made sure every piece of Neptune delivered on that promise.
Reusable Components
I created reusable components with comprehensive documentation for designers and developers. Ensuring consistent usage and complete brand excellence.
Reusable Components
I created reusable components with comprehensive documentation for designers and developers. Ensuring consistent usage and complete brand excellence.
Reusable Components
I created reusable components with comprehensive documentation for designers and developers. Ensuring consistent usage and complete brand excellence.
Comprehensive Semantic Naming
I spent time, in conjunction with devs, to build a robust set of semantic names to be used within our library. Making it even easier for developers to style components as needed. I included three modes: Light, Dark, and Wireframe for designers to test thoughts before committing to high-fidelity designs.
Comprehensive Semantic Naming
I spent time, in conjunction with devs, to build a robust set of semantic names to be used within our library. Making it even easier for developers to style components as needed. I included three modes: Light, Dark, and Wireframe for designers to test thoughts before committing to high-fidelity designs.
Comprehensive Semantic Naming
I spent time, in conjunction with devs, to build a robust set of semantic names to be used within our library. Making it even easier for developers to style components as needed. I included three modes: Light, Dark, and Wireframe for designers to test thoughts before committing to high-fidelity designs.
Impact
Impact
Impact
Neptune changed the game at Ecolab. Over 80% of product teams adopted it, slashing design cycles by 30% and letting designers focus on big ideas instead of nitty-gritty UI details. Developers saved 40% of their time with pre-built components that dropped right into their code. The system brought Ecolab’s brand to life online, creating a seamless look across dashboards, apps, and tools.
Neptune changed the game at Ecolab. Over 80% of product teams adopted it, slashing design cycles by 30% and letting designers focus on big ideas instead of nitty-gritty UI details. Developers saved 40% of their time with pre-built components that dropped right into their code. The system brought Ecolab’s brand to life online, creating a seamless look across dashboards, apps, and tools.
80%
Adoption
30%
Efficiency
3
Team Members
More than numbers, Neptune shifted how teams worked. My push for this system led Ecolab to form a three-person Design Systems team to keep it growing. Where there was once chaos, there was now collaboration—a shared language that tied teams together. Walking through Ecolab’s offices, seeing Neptune powering products, felt like proof I’d done something real. This project showed I could lead, innovate, and deliver impact in a corporate setting.
More than numbers, Neptune shifted how teams worked. My push for this system led Ecolab to form a three-person Design Systems team to keep it growing. Where there was once chaos, there was now collaboration—a shared language that tied teams together. Walking through Ecolab’s offices, seeing Neptune powering products, felt like proof I’d done something real. This project showed I could lead, innovate, and deliver impact in a corporate setting.