Chameleon: Slashing build times by 65%

Q4 2023 - Q1 2024

Team

Senior Designer (me) UX/UI Designer Director of UX

Team

Senior Designer (me) UX/UI Designer Director of UX

Team

Senior Designer (me) UX/UI Designer Director of UX

Team

Senior Designer (me) UX/UI Designer Director of UX

Techniques

Branding Design Leadership Design Systems Efficiency Optimization Scalable Design

Techniques

Branding Design Leadership Design Systems Efficiency Optimization Scalable Design

Techniques

Branding Design Leadership Design Systems Efficiency Optimization Scalable Design

Techniques

Branding Design Leadership Design Systems Efficiency Optimization Scalable Design

After company downsizing, our Professional Services (PS) team found themselves short-staffed and overwhelmed with academy builds for large prospects—many of whom wouldn’t move forward without a custom demo. As design and code experts, UX was pulled in to help, which started eating into our own Product work.

To streamline our workflow and empower PS to be more self-sufficient, we designed and developed a CSS template—Project Chameleon. This 4,000+ line file was meticulously organized with variables and classes, paired with separate documentation to ensure easy implementation for even the least code-savvy of us.

The template

The template

The template

The template

Dropping from 20+ hours to under 7

… while making it look fantastic

The template consisted of four steps that match core pillars of a design system needed for our customers to create a branded academy quickly. These steps came with detailed instructions meant to guide anyone, including non-designers.

The template consisted of four steps that match core pillars of a design system needed for our customers to create a branded academy quickly. These steps came with detailed instructions meant to guide anyone, including non-designers.

The template consisted of four steps that match core pillars of a design system needed for our customers to create a branded academy quickly. These steps came with detailed instructions meant to guide anyone, including non-designers.

The template consisted of four steps that match core pillars of a design system needed for our customers to create a branded academy quickly. These steps came with detailed instructions meant to guide anyone, including non-designers.

The results

The results

The results

The results

Prospects we strived to replicate:

Versus the real demos that blended seamlessly with their site

Skin with Chameleon!

Skin with Chameleon!

Skin with Chameleon!

Skin with Chameleon!

Skin with Chameleon!

Skin with Chameleon!

Skin with Chameleon!

Skin with Chameleon!

2025 © Niki Tam

2025 © Niki Tam

2025 © Niki Tam

2025 © Niki Tam