Enterprise Design system

Develop a cohesive and scalable enterprise design system for internal software and applications at Colgate-Palmolive. This system serves as a centralized resource for designers, developers, and stakeholders across multiple brands and products, providing standardized components and design tokens that promote consistency, efficiency, and usability across all platforms.

My role

  • Created 7 core components, 3 enterprise components, applied tokens, and performed QA

  • Designed atomic components, states, behaviors, and component architecture

  • Conducted component research and landscape analysis

  • Conduct moderated usability testing sessions with 8 designers

  • Analyzed and summarized key findings in a presentation deck

Design System Team

  • Penny Kasinphila (Me), UX design intern

  • Teressa Clark, UX Design Manager

Tools

  • June 2024 – May 2025

Duration

  • Figma, FigJam

Design Process

Understanding the Problem

“ Across teams at Colgate-Palmolive, we were constantly rebuilding the same components, yet still ending up with inconsistent, inaccessible, and unscalable design.”

“ Every project feels like we’re reinventing the wheel, there’s no centralized way to reuse what we’ve already made.”

Developer

“When designs aren’t consistent, we spend more time redoing work and guessing what’s correct, it slows us down and makes the code harder to maintain.”

Developer

It’s so time-consuming to build a design system from scratch, it takes me away from core UX work, especially when I’m working under tight deadlines or sprint cycles.”

UX Designer

It’s hard to manage all the complexity, every time there’s a tech, accessibility, or branding update, I end up reworking the same component across multiple brands.

UX Designer

Personas

Designers’ need

  • A centralized, well-documented design system to reduce rework

  • Confidence in using tested and approved components

  • Clear guidance on how to apply tokens (colors, spacing, typography)

  • An onboarding experience that’s easy to follow and not overwhelming

  • Consistency across files to reduce confusion

Developers’ need

  • A streamlined setup process for installing and using design system components

  • Tokens synced directly to code to avoid manual styling

  • Confidence that components are accessible, tested, and match design

  • A visual + code reference (e.g., Storybook) to quickly understand properties and variants

  • Flexibility to customize when needed, without breaking the system

Solution

Created an integrated design system that bridges design and development by providing reusable components, synced design tokens, and clear documentation and best practices.

Empowers designers to work efficiently and consistently across products.

Gives developers a reliable, scalable foundation.

Reducing rework and also improving collaboration

Design System Metaphor

I sketched this metaphor diagram to help me understand what I’m doing. The first image shows a room with furniture coming together to build a living room. The second image shows components or building blocks used to build software and applications.

These examples follow a similar process, beginning with building blocks and a single source of truth to create a scalable structure and efficient process.

Design Tokens

We use primitive tokens for raw values (e.g., color/innovation blue/600) and semantic tokens for meaningful roles (e.g., color/background/action/primary/default) to ensure consistency and flexibility. To streamline design-to-code handoff, we built an internal plugin that syncs tokens between Figma and VS Code. When we publish the Figma library, the corresponding JSON files in our codebase update automatically.

Cross-Brand Theming with Design Tokens

To streamline collaboration between designers and developers, we propose aligning the token naming system. This will enable future development to easily swap tokens based on brand, especially for direct-to-consumer website experiences across our multi-brand products.

See our brands

Applying Tokens

Applying semantic tokens in Figma as a single source of truth ensures consistency across color, typography, spacing, and borders. By linking components to token variables, we simplify updates, support theming, and keep design and development in sync.

Workflow

Components We Built

Usability Testing for designers and developers

The purpose

  • Learn how UX designers and developers expect to import design system library, searching and using components

  • Watch how designers using components, editing components and applying tokens (color, typography, spacing)

  • Use this feedback to iterate on developed design system components and onboarding documentation.

Study Methodology

  • 8 CP Designers (GIT/ Global Design, Hills)

  • 7 CP Developers (Enterprise/ Direct-to-customer)

  • 1 hour Qualitative Moderated Usability Test

Tasks and Scenarios

As part of the usability study, designers were asked to complete two tasks: first, import the CP Design System and explore the onboarding docs; second, bring a wireframe to life by recreating two screens using components from the library. These tasks helped assess ease of onboarding, finding components, and applying tokens like color, spacing, and typography.

Analysis

After receiving feedback from my UX manager, Teressa Clark, I learned how to better summarize key findings: begin with what users said and did, then provide context to explain why. Most importantly, avoid jumping to conclusions too quickly.

Key Findings

Overall, most designers found the experience of importing libraries and working with components to be smooth, and intuitive.

It was a straightforward process, from dragging and assembling components to editing component properties. 

They saw its value in reducing redundant work and could speed up their project. The well-defined components gave them confidence and helped avoid the need to piece components together component.

Using components

Most users found it easy to edit properties on the right panel, as editable property usage allowed them to avoid manual editing.

Most users appreciated the editable side panel properties, the ease of changing properties, and the editable text property.  These gave them the flexibility to work on with their design and helped reduce redundant work.

Onboard Documentation

Although users mentioned that the documentation is structured and easy to scan, some found onboarding documentation overwhelming. 

All users generally scanned through multiple sections. Some expected a clearer documentation to distinguish  between “what is essential to know” vs. “what is nice to know."

Applying tokens

Most users experienced difficulty in applying tokens. They wanted to see documentation, visual example, and guidance on how to apply tokens such as color, typography, spacing unit, and border radius tokens. 

They felt frustrated when they didn’t know how to apply tokens due to having less experience with primitive tokens, semantic tokens and variables, which made them less confident in applying the tokens.

Impact and effort matrix

To prioritize and plan next steps, we used the Impact–Effort Matrix to help identify and define high-impact, low-effort and high-impact, high-effort tasks.

Next Step

Short Term : Low Effort / High Impact

We will focus on enhancing onboarding clarity and token education by providing a file organization overview, educational tutorials, and examples for applying tokens. We’ll also improve component flexibility by adding size variations to top navigation and clearer typography token guidance.

Long Term : High Effort / High Impact

We’ll develop visual templates to support onboarding and design kickstarts, restructure onboarding materials to highlight essential content, and provide detailed guidance for token application, including clarifying naming conventions and expanding key components like cards or containers.

Ref : Lightning Design System , Salesforce

What I Learned

This project gave me hands-on experience across the entire UX design process, from research and usability testing to creating components and documenting design systems.

I learned how powerful moderated usability testing can be, not just in observing what users do, but in understanding why they think and act the way they do. Asking follow-up questions and digging deeper helped me connect behavior with motivation. I realized that what people say and what they do aren’t always the same, and thoughtful listening is key to uncovering real insights.

I learned how to structure atomic components with properties, enabling to toggle options on and off, select variants, and edit properties with flexibility.Thinking holistically about states, behaviors, signifiers, and affordances. It challenged me to not only design for clarity and flexibility, but also to create documentation that supports designers and developers as well.

This experience strengthened my skills in

  • Design thinking

  • System-level thinking

  • Reinforced the value of thoughtful UX research in creating better experiences that actually solve real problems.

Mentorship and UX Team

Having Teressa Clark as both my manager and mentor was an amazing experience. I learned so much from her: UX thinking, analytical thinking, and how to ask the right questions. She helped me set clear goals and guided me in growing in the areas I was most curious about. She planted that UX mindset in me, and it’s been growing ever since. Now, I constantly think about the “why” behind my design decisions. It’s like she helped build my UX instincts without me even realizing it.

I’d also like to thank the amazing UX team for creating such a supportive environment, sharing insights, and always being generous with feedback. Working with this team made the experience even more rewarding.

Next
Next

Hills Pet Profile