Sarah Kadlecek, Product Design Engineer, Artist, Tinkerer
{{ pre }}
SK
©{{ year }}
{{ preScr }}
PRODUCT DESIGN ENGINEER, ARTIST, TINKERER
SK.
/{{ l.num }} {{ l.label }}
LINKEDIN HELLO@SARAHKADLECEK.COM
PRODUCT DESIGN ENGINEER, ARTIST, TINKERER PORTFOLIO, ©{{ year }}

Sarah Kadlecek.

Senior Product Designer & Lead Designer who designs from strategy through to shipped code. I build scalable design systems, prototype with AI, and lead conversion-driven product design.

BASED IN BEAUTIFUL COLORADO, USA
BY THE NUMBERS
8+
YEARS PRODUCT DESIGN EXPERIENCE
25+
YEARS CREATIVE EXPERIENCE
10+
INDUSTRIES SERVED

Key Expertise

( SCROLL )
/01

Design Systems at Scale

I build and evolve scalable design systems and component libraries, including a custom component registry teams install and build from, that improve consistency, accelerate development, and let teams ship on-brand faster. I vibe-code prototypes directly on top of my own systems, which frees up more time for user testing instead of production polish, and hands off to engineers who are already building in that same system.

/02

AI-Assisted Design & Front-End

I design from concept through to working code, using AI-assisted workflows, Claude Code, Cursor, Figma MCP, and v0, to prototype fast and hand off production-ready UI. I also design AI-powered product features, keeping people at the center.

/03

Conversion-Driven UX & Experimentation

I drive measurable outcomes through data-informed UX, A/B testing, and personalization, improving conversion, AOV, and operational efficiency across eCommerce and SaaS.

/04

Design Leadership

I lead UX strategy from research through iteration, mentor designers, set design vision, and establish the systems, rituals, and standards that let design scale across product, engineering, and go-to-market teams.

MOBILE & WEB APP DESIGN

I create intuitive and visually appealing interfaces that enhance user experience across multiple platforms. Versed in key UI design systems.

Design that ships & converts.

FEATURED WORK

Portfolio.

Projects that speak volumes.

SELECTED CASES /06 ( SCROLL )
{{ p.title }} {{ p.cat }} COMING SOON
/{{ p.num }}

{{ p.title }}

{{ p.desc }}

WANT TO SEE MORE CASE STUDIES?
Let's
Connect
ECOMMERCE SOFTWARE /03

Livewire.

eCommerce Site Management Software

Livewire dashboard
ROLE & SCOPE

Lead Product Designer owning UX strategy, design systems, and cross-functional alignment. Platform supporting merchandising, content, and inventory workflows for Cotopaxi's eCommerce ecosystem.

PROBLEM

Existing tooling fragmented merchandising workflows and slowed decision-making across teams.

OUTCOME

Designed a scalable dashboard system that improved operational clarity, reduced friction, and supported faster merchandising decisions.

TECH STACK
{{ x }}

The Process

PHASE /{{ st.num }}

{{ st.t }}

{{ st.d }}

PRODUCT FLOW CHART

This flow chart outlines the various offerings users rely on to maintain their areas of focus within the company. It illustrates how these separate tools and processes are streamlined through Livewire, funneling them into a unified dashboard. This dashboard enables eCommerce managers and merchants to manage all data and information directly from the source and seamlessly integrate it onto the site, simplifying operations and enhancing efficiency.

FLOW CHART, SUPPLY IMAGE
USER FLOWS, SUPPLY IMAGE
USER FLOWS

User flows mapped out the journey of site merchants and eCommerce managers, highlighting their interactions with the new dashboard. They helped identify potential pain points, streamline processes, and ensure the design aligned with their needs, and communicated the design vision to stakeholders.

USER INTERVIEWS

I conducted interviews with site merchants and eCommerce managers to understand their needs and pain points. Additionally, I interviewed engineering teams to identify the limitations of the available APIs and app integrations, ensuring the design would be both functional and technically feasible.

INTERVIEW NOTES, SUPPLY IMAGE
LOW FIDELITY PROTOTYPES
LOW-FI WIREFRAMES, SUPPLY IMAGE
BRAND IDENTITY
TYPOGRAPHY
DEFAULT COLORS
GRAYSCALE
LIGHT MODE

The Prototype

HI-FI PROTOTYPE, EMBED OR SUPPLY IMAGES
CONTENT + COMMERCE /05

Common Thread.

Blog Management Software, Content + Commerce Platform UX, Dashboard Strategy

Common Thread dashboard
ROLE & SCOPE

Lead Product Designer responsible for UX strategy, research, and system design for a blog and content management platform supporting merchandising and editorial workflows.

PROBLEM

Content publishing workflows were fragmented, error-prone, and disconnected from merchandising needs, slowing time-to-publish and increasing operational overhead.

OUTCOME

Designed a unified content management experience that streamlined publishing, improved visibility into content status, and reduced friction between editorial and commerce teams.

TECH STACK
{{ x }}

The Process

PHASE /{{ st.num }}

{{ st.t }}

{{ st.d }}

WIREFRAMES, BACKEND

The backend wireframes outline a clear layout: a dedicated area for writing and editing blog posts, a user and author management section where admins can update roles and permissions, and a media management area for organizing and uploading images and videos, effortlessly inserted into blog posts.

BACKEND WIREFRAMES, SUPPLY IMAGE
FRONTEND WIREFRAMES, SUPPLY IMAGE
WIREFRAMES, FRONTEND

The frontend wireframes show how the backend content will translate onto the site. These low fidelity wireframes provide a clear visual guide for stakeholders, ensuring all essential features are logically arranged and easily accessible.

USER INTERVIEWS

Interviews with content creators, editors, and merchandisers uncovered where publishing broke down, and where merchandising opportunities inside blog articles were being missed. Engineering interviews confirmed what the API-based approach could support.

INTERVIEW NOTES, SUPPLY IMAGE

The Prototypes

LOGIN, SUPPLY IMAGE
DASHBOARD, SUPPLY IMAGE
AI POWERED MOBILE APP /04

Wondertime Tales.

Generative AI, one-of-a-kind children's stories, Product Designer · UXR · Project Manager

Wondertime Tales app
THE CHALLENGE

This mobile app utilizes generative AI to craft unique, one-of-a-kind children's stories tailored to each child's imagination. With just a few quick and easy prompts, users can dictate the characters, themes, length, and overall tone of the stories. Whether the child wants a whimsical adventure with talking animals, a magical journey through an enchanted forest, or a heartwarming tale about friendship, the app's LLM generates a personalized story that captivates and engages young readers. The app is designed to be intuitive and user-friendly, making it easy for parents, caregivers, or even older children to create stories on the go.

TECH STACK
{{ x }}

The Process

PHASE /{{ st.num }}

{{ st.t }}

{{ st.d }}

Competitor Research

{{ c.name }}

/{{ c.num }}
PROS
  • +{{ x }}
CONS
  • {{ x }}
KEY TAKEAWAYS
/{{ k.num }}

{{ k.t }}

The Prototype

ONBOARDING
STORY BUILDER
READER VIEW
LIBRARY
DESIGN SYSTEMS & DEV TOOLING /01

Project North Star.

A component registry design system, installed via CLI and vibe-coded on top of, not just documented.

Work done under NDA, anonymized here as Project North Star. Stack: React 19, Tailwind CSS v4, shadcn/ui + Radix primitives, TypeScript, a custom CLI-distributable component registry, Figma.

Project North Star dashboard preview composed from the registry

PLATFORM PREVIEW, DASHBOARD COMPOSED ENTIRELY FROM REGISTRY COMPONENTS

ROLE & SCOPE

Design system lead, owning the UX strategy, token architecture across code and Figma, component design, build and rollout. The registry itself is code I authored, not just a spec or Figma file handed to engineers.

PROBLEM

No shared component system existed outside a Figma library, so teams rebuilt the same components slightly differently, and increasingly vibe-coded prototypes with AI tools that produced generic, off-brand UI needing cleanup.

OUTCOME

A CLI-installable registry, used to build its own docs site, that both humans and AI tools assemble genuinely on-brand UI from, with no designer babysitting every screen.

TECH STACK
{{ x }}

The Build

PHASE /{{ st.num }}

{{ st.t }}

{{ st.d }}

WHY A REGISTRY, NOT A STORYBOOK

A Storybook is a documentation layer, it renders components in isolation so people can look at them, but they still live elsewhere. North Star is a distribution layer: a repo with a component registry, the shadcn model, where each component is a self-contained file a team pulls into their own codebase with one CLI command. They get the actual source, styled with our tokens, which they own and can adapt. The registry is the product; documentation is a byproduct.

Installable component source code from the North Star registry
North Star component playground with live preview and configuration
THE SYSTEM BUILDS ITSELF

Every page of the documentation, navigation, buttons, code blocks, interactive playgrounds, the theme toggle, is composed from the exact same registry components teams install. There is no separate docs stack styled independently. That makes drift structurally impossible: if a token changes, the docs re-theme with it; if a component's API changes, the docs break in CI until they're updated. The system's own UI is a permanent, live integration test.

ONE SYSTEM, EVERY SURFACE

The registry isn't only a codebase. I used Figma MCP to bring the coded components back into Figma and to build a matching Figma token library, so design files and the codebase reference the same source of truth instead of drifting apart. From there I extended the system to meet people wherever they already work.

FIGMA

Coded components synced into Figma via MCP, plus an MCP-built token library, so designers work from the same components and tokens engineering ships.

CLAUDE DESIGN

A Claude Design Design System built directly off the registry, so anyone vibe-coding in Claude Design starts from North Star's real components and tokens.

CURSOR & CODE-FORWARD TOOLS

A "Get Started" page and companion skills package an app shell for Cursor and similar tools, so engineers can scaffold a new experience straight on the registry.

TOKEN LIBRARY IN FIGMA

Semantic tokens (and their primitive aliases) live in Figma Variables across multiple product themes, AG, Navy, NS Pro, light and dark, so theming is a mode switch, not a redesign.

North Star semantic color tokens in Figma Variables across multiple themes
North Star color token structure in Figma
SAME COMPONENT, TWO TOOLS

Calendar in Cursor & Figma

A single Calendar component, documented with a live playground and code in the registry, then mirrored in Figma so designers and engineers aren't maintaining two different calendars. The parity is the point: change once, update everywhere.

Calendar component docs and playground inside Cursor
IN CURSOR, DOCS + PLAYGROUND + SOURCE
Calendar component in the North Star Figma library
IN FIGMA, SAME COMPONENT, DESIGN-READY
VIBE-CODING AS THE PRIMARY USE CASE

When a designer or PM opens an AI prototyping tool and asks for a settings page with a plan-upgrade card, the tool assembles UI from whatever vocabulary it has. Point it at a generic component set and you get generic output. Point it at North Star's registry, installed into the project, with semantic tokens and typed, documented components, and the assembled prototype inherits the brand automatically. The workflow shifted from "generate something, then spend an afternoon making it on-brand" to "generate something that's already on-brand, then refine the ideas."

That speed and accuracy pays off twice. It buys back the time that used to go into making a prototype look believable, time that goes into user testing instead, so ideas get validated with real people earlier and more often. And because the prototype is built from the same registry engineering already uses, handoff isn't a translation exercise: the components in the tested prototype are the same components in the shipped product, so engineering builds faster with fewer surprises.

What It Enables

  • Install, don't reinvent, teams pull components in via CLI and own the source, no rebuilding primitives.
  • On-brand by default, semantic tokens mean prototypes and products inherit theming, dark mode, and accessibility for free.
  • Vibe-code with guardrails, AI tools generate from a designed vocabulary, so output starts on-brand instead of needing cleanup.
  • Zero-drift docs, the system's own UI is built from the system, so documentation can't fall out of sync.
  • Extensible, not locked, owning the source lets teams adapt for edge cases without forking a dependency.
  • More time for testing, less for polish, faster, more accurate prototypes free up time to user-test ideas instead of dressing them up.
  • Handoff that's already built, engineers work in the same registry the prototype came from, so shipping is assembly, not translation.
WHAT I LEARNED
/01

Distribution is design. Choosing a registry over a Storybook was the design decision that made adoption effortless, it hands teams the thing instead of describing it.

/02

Dogfooding is the only honest proof. Building the docs from the registry surfaced every rough edge a component-in-isolation view would have hidden.

/03

Semantic tokens are what make AI output look designed. Get the vocabulary right, and both humans and machines produce work that looks like it had a designer behind it.

The Results

33

components in the registry, each installable via CLI

33

theme-aware semantic tokens spanning color, type, spacing & radii

10

unique accent/badge tokens per theme

15 min

to scaffold an on-brand, functional prototype in code, vs. days or weeks before

5

teams building on the registry, from product designers and PM/POs to the executive committee

100%

of the docs site's UI composed from the registry itself, zero drift

LIVE PROJECT

Explore the System

Browse the full Project North Star docs, component library, and Getting Started guides in the live design system.

VIEW LIVE PROJECT
ECOMMERCE / PERSONALIZATION /02

Cotopaxi Personalization.

Award-winning conversion experimentation, Sr. UX/UI Designer · Sep 2022–Aug 2024

CRO CASE STUDY, SUPPLY IMAGE
ROLE & SCOPE

Senior UX/UI Designer partnered with the CRO team, owning design and experimentation across Cotopaxi's site, from hypothesis to shipped, tested change.

PROBLEM

Cotopaxi faced a persistent headwind of soft AOV and AUR. The CRO team's mandate was to lift conversion and order value without discounting the brand, by removing friction in the journey and giving shoppers compelling, well-designed reasons to add more to cart.

OUTCOME

Shipped experiments spanning conversion lifts of +6% to +16% and roughly $3M in combined annualized revenue impact, recognized with the Dynamic Yield Personalization Innovator Award, 2024.

TECH STACK
{{ x }}

The Process

PHASE /{{ st.num }}

{{ st.t }}

{{ st.d }}

FINDING THE FRICTION

I identified friction through heat mapping and user funneling, formed hypotheses tied to a primary KPI, designed the experiences, and worked with the experimentation stack, Dynamic Yield, to run controlled A/B tests, including holdout groups to measure true incrementality. Every iteration was data-driven and customer-focused.

HEAT MAP & FUNNEL DATA, SUPPLY IMAGE

The Experiments

{{ x.tag }}/{{ x.num }}

{{ x.name }}

{{ x.d }}

{{ x.conv }}
CONVERSION
{{ x.rpv }}
REV/VISITOR
{{ x.rev }} share of the combined revenue impact
WHAT I LEARNED
/01

The fastest way through a design disagreement is a test. Holdout groups turned "I think this is better" into a measured lift, and made design a revenue lever the whole org could trust.

/02

Small, well-instrumented changes compound. Bundling, outfit curation, and navigation work each moved a different KPI; together they added up to millions annualized.

/03

Design for AOV without discounting. Curated outfits and bundles lifted order value by making it easier and more compelling to buy more, not cheaper.

The Results

+6 to +16%

conversion-rate lifts across shipped experiments

+7 to +17%

revenue-per-visitor lifts across shipped experiments

3/3

experiments proven incremental against a holdout group

★ AWARD

Dynamic Yield Personalization Innovator, 2024, an award for only the savviest Dynamic Yield customers, recognizing brands that understand the true value of customer experiences and find new ways to build use cases and level up personalization.

FIGMA COMPONENT SYSTEM /06

The Ordinary.

COMING SOON
MY ROLE

UI Designer

TECH STACK
{{ x }}
The Ordinary component system
THE CHALLENGE

Conducted a thorough audit of the eCommerce site, focusing on user behavior data to identify pain points and friction in the customer journey. Through heat mapping and analytics, I uncovered several inefficiencies, including unclear navigation paths and excessive steps during checkout that led to cart abandonment. Using these insights, I executed strategic design changes to simplify user flows and enhance the overall experience.

Based on the data-driven findings, I developed a scalable component system that streamlined the site's design, ensuring consistency and flexibility across pages, ultimately improving conversion rates and customer satisfaction.

EXPERIENCE & EDUCATION

Resume.

Senior Product Designer and Lead Designer with 8+ years in product design and 25+ years of creative experience across 10+ industries. I specialize in scalable design systems, AI-assisted design and front-end implementation, and conversion-driven UX, taking work from strategy and research through to shipped, production-ready code. I build component libraries and registries teams design from, prototype rapidly with AI tools including Claude Code, Cursor, Figma MCP, and v0, design AI-powered product features, and lead design at scale across product, engineering, and go-to-market teams. Based in Northern Colorado.

SKIP THE RED TAPE
Your questions, answered.
SKIP THE RED TAPE

The Toolkit

{{ tk.cat }}
{{ x }}

Experience

/{{ j.num }}

{{ j.co }}

{{ j.role }}
{{ j.meta }}
★ AWARD

{{ j.award }}

  • {{ b }}
SKILLS & TECH

{{ j.skills }}

Education

/{{ e.num }}

{{ e.school }}

{{ e.deg }}

Recommendations

{{ recNum }} / {{ recTotal }}

"{{ rec.q }}"

{{ rec.name }}, {{ rec.role }}
SKIP THE RED TAPE

Interview.

{{ f.cat }}

{{ para }}

{{ f.quote }}

STILL HAVE QUESTIONS?
BEYOND THE PIXELS

Other Art.

Photography and personal work, a BA in Commercial Photography put the camera in my hands first.

{{ a.label }} {{ a.f }}

STRIPED TILES = PLACEHOLDERS, SARAH'S REAL PHOTOGRAPHY & ART DROPS IN HERE

GET IN TOUCH

Let's Connect.

Have a role, a project, or just a question? I'd love to hear about it.

COLO, {{ clock }} · USUALLY REPLIES FAST
MESSAGE RECEIVED
Talk soon.

Thanks for reaching out, I'll get back to you within a day or two. In the meantime, the portfolio's right over there.

ERROR / 404

Lost.

This page isn’t in the system. It may have moved, or the URL might be a typo — either way, let’s get you back to something real.

NEXT STEPS
Let's Connect.
HELLO@SARAHKADLECEK.COM LINKEDIN
{{ zoomLabel }}
{{ zoomLabel }} · {{ zoomMeta }}
{{ lbLabel }}
{{ lbMeta }}