Helping to build a better world of work
Product Design
Design systems
Prototyping
Figma
Helping to build a better world of work
Product Design
Design systems
Prototyping
Helping to build a better world of work
Product Design
Design systems
Prototyping
Figma
↑
A page in the Culture Amp product building in showing all the ways the components interact.
↑
A page in the Culture Amp product building in showing all the ways the components interact.
↑
A page in the Culture Amp product building in showing all the ways the components interact.
Challenges
As a Senior Product Designer on the Kaizen Design System team at Culture Amp, my role was to work with teams across the company to build new components as needed while continuously improving existing ones. Over time, though, the design system had started to drift. The Figma component library and React codebase had fallen out of sync, leading to confusion and inefficiencies amongst teams.
Designers struggled with outdated components that didn’t take advantage of Figma’s newer features, and when projects began, teams lacked reliable page templates to kick things off. This created bottlenecks, inconsistencies, and wasted effort across teams.
KEY CHALLENGES
01
Figma and React libraries were out of sync, misrepresenting what was actually in the code base
02
Outdated Figma components lacked auto layout, variants, and usage guidelines
03
Missing component properties created uncertainty and slowed adoption
04
Teams had no page templates, leading to wasted time and mismatched layouts in development
05
Designers needed a consistent way to filter table and list data
Challenges
As a Senior Product Designer on the Kaizen Design System team at Culture Amp, my role was to work with teams across the company to build new components as needed while continuously improving existing ones. Over time, though, the design system had started to drift. The Figma component library and React codebase had fallen out of sync, leading to confusion and inefficiencies amongst teams.
Designers struggled with outdated components that didn’t take advantage of Figma’s newer features, and when projects began, teams lacked reliable page templates to kick things off. This created bottlenecks, inconsistencies, and wasted effort across teams.
KEY CHALLENGES
01
Figma and React libraries were out of sync, misrepresenting what was actually in the code base
02
Outdated Figma components lacked auto layout, variants, and usage guidelines
03
Missing component properties created uncertainty and slowed adoption
04
Teams had no page templates, leading to wasted time and mismatched layouts in development
05
Designers needed a consistent way to filter table and list data
Challenges
As a Senior Product Designer on the Kaizen Design System team at Culture Amp, my role was to work with teams across the company to build new components as needed while continuously improving existing ones. Over time, though, the design system had started to drift. The Figma component library and React codebase had fallen out of sync, leading to confusion and inefficiencies amongst teams.
Designers struggled with outdated components that didn’t take advantage of Figma’s newer features, and when projects began, teams lacked reliable page templates to kick things off. This created bottlenecks, inconsistencies, and wasted effort across teams.
KEY CHALLENGES
01
Figma and React libraries were out of sync, misrepresenting what was actually in the code base
02
Outdated Figma components lacked auto layout, variants, and usage guidelines
03
Missing component properties created uncertainty and slowed adoption
04
Teams had no page templates, leading to wasted time and mismatched layouts in development
05
Designers needed a consistent way to filter table and list data
↑
A showcase of all the components in the Culture Amp UI Kit – Kaizen.
↑
A showcase of all the components in the Culture Amp UI Kit – Kaizen.
↑
A showcase of all the components in the Culture Amp UI Kit – Kaizen.
↑
Components are constructed with tokens and primitives, then annotated and documented to make their makeup clear to users.
↑
Components are constructed with tokens and primitives, then annotated and documented to make their makeup clear to users.
↑
Components are constructed with tokens and primitives, then annotated and documented to make their makeup clear to users.
↑
All components built with user-friendly Figma attirbutes so users can quickly select the variation they need for a design.
↑
All components built with user-friendly Figma attirbutes so users can quickly select the variation they need for a design.
↑
All components built with user-friendly Figma attirbutes so users can quickly select the variation they need for a design.
Solution
I led the rebuild of the Figma component library, combing through each component and variant to ensure it matched the React Storybook. I collaborated closely with engineers to keep design and code aligned, refining structure, naming conventions, and organization to make the library more intuitive and searchable.
To speed up project setup, I created Figma page templates and worked with developers to ensure matching coded versions were available. This gave teams a reliable way to begin projects without reusing outdated layouts or wasting time rebuilding from scratch.
For the filter bar, I partnered with product designers to understand their needs and design a flexible yet consistent solution for filtering table data. We validated the design through prototyping and usability testing before moving into development, ensuring it scaled to support major use cases across the product.
Solution
I led the rebuild of the Figma component library, combing through each component and variant to ensure it matched the React Storybook. I collaborated closely with engineers to keep design and code aligned, refining structure, naming conventions, and organization to make the library more intuitive and searchable.
To speed up project setup, I created Figma page templates and worked with developers to ensure matching coded versions were available. This gave teams a reliable way to begin projects without reusing outdated layouts or wasting time rebuilding from scratch.
For the filter bar, I partnered with product designers to understand their needs and design a flexible yet consistent solution for filtering table data. We validated the design through prototyping and usability testing before moving into development, ensuring it scaled to support major use cases across the product.
Solution
I led the rebuild of the Figma component library, combing through each component and variant to ensure it matched the React Storybook. I collaborated closely with engineers to keep design and code aligned, refining structure, naming conventions, and organization to make the library more intuitive and searchable.
To speed up project setup, I created Figma page templates and worked with developers to ensure matching coded versions were available. This gave teams a reliable way to begin projects without reusing outdated layouts or wasting time rebuilding from scratch.
For the filter bar, I partnered with product designers to understand their needs and design a flexible yet consistent solution for filtering table data. We validated the design through prototyping and usability testing before moving into development, ensuring it scaled to support major use cases across the product.
↑
Advanced prototyping of the Filter Bar component to test usability and functionality.
↑
Advanced prototyping of the Filter Bar component to test usability and functionality.
↑
Advanced prototyping of the Filter Bar component to test usability and functionality.
Outcomes
The updated library saw strong uptake, with teams reporting smoother workflows and greater trust in the design system. Designers were able to find and use components quickly, and confidence grew as the Figma and React libraries stayed in sync. Page templates reduced wasted setup time and eliminated mismatched layouts downstream.
The filter bar became a reliable, reusable solution for data-heavy views, balancing flexibility with consistency. By introducing weekly showcases and keeping an open dialogue with product teams, we built stronger alignment between design and engineering. This gave the design system a solid foundation for future growth and enabled product teams to move faster with fewer bottlenecks.
Outcomes
The updated library saw strong uptake, with teams reporting smoother workflows and greater trust in the design system. Designers were able to find and use components quickly, and confidence grew as the Figma and React libraries stayed in sync. Page templates reduced wasted setup time and eliminated mismatched layouts downstream.
The filter bar became a reliable, reusable solution for data-heavy views, balancing flexibility with consistency. By introducing weekly showcases and keeping an open dialogue with product teams, we built stronger alignment between design and engineering. This gave the design system a solid foundation for future growth and enabled product teams to move faster with fewer bottlenecks.
Outcomes
The updated library saw strong uptake, with teams reporting smoother workflows and greater trust in the design system. Designers were able to find and use components quickly, and confidence grew as the Figma and React libraries stayed in sync. Page templates reduced wasted setup time and eliminated mismatched layouts downstream.
The filter bar became a reliable, reusable solution for data-heavy views, balancing flexibility with consistency. By introducing weekly showcases and keeping an open dialogue with product teams, we built stronger alignment between design and engineering. This gave the design system a solid foundation for future growth and enabled product teams to move faster with fewer bottlenecks.
Credits
Credits
Credits
Role
Senior Product Designer
Client
Culture Amp
Year
2023
2023
2023
Other Projects
Other Projects
Other Projects
I acknowledge the Traditional Custodians of Country throughout Australia and their connections to land, sea and community.
I pay my respect to their Elders past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples.
I acknowledge the Traditional Custodians of Country throughout Australia and their connections to land, sea and community. I pay my respect to their Elders past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples.