Status and Timeline
Side initiative while at Kohler Co., between September 2021 and July 2022. Never presented officially. Completed here, as a portfolio reconstruction.
Building FLOW:
Design System for KOHLER Co. product pages
FLOW is a self-initiated design system for product landing pages and product detail pages I started with a fellow designer alongside my roadmap work while at KOHLER Co., and completed subsequently.
Role
Senior Product Designer
Team
2 Product Designers
Scope
PLPs (Product Landing Pages) and PDPs (Product Detail Pages) - Desktop and Mobile breakpoints for kohler.com as the core brand and four of its decorative brands: Ann Sacks, Kallista, Robern and Sterling.
Deliverables
Components, Variables, Patterns, Libraries, Templates, Documentation, (Additional, but incomplete: metrics deck, quarterly and annual planning.)
Technology
Started in Miro, InVision, Sketch - progressed into Figma, React Native, Web components
What success would look like
The project never shipped, so these are the measures we would have used to make the case to engineering and management.
• Handoff per page - From design-ready to engineering-ready
• One-off components - Count of non-library UI per release
• AA pass rate - Share of text pairings meeting 4.5 : 1
• Component reuse - library components used vs. rebuilt in code
Reflection
We built FLOW between September 2021 and July 2022 with no mandate, dedicated time or resources, and it never reached engineering. What I took from it: a design system is an organizational commitment, not a side project. It needs a sponsor, an engineering partner and protected time from Day 1. By 2024 Kohler’s design job postings were asking designers to extend an “established design system and pattern library”, which tells me the need we saw was real. Two designers can start a design system, but it takes an organization to sustain, maintain and evolve one. Ideally, next time I’d secure an advocate/sponsor/co-producer and an engineering co-owner before building the first component.