Back to work

Migrating 300+ Brands to Figma

Training a global design team, building a scalable white-label design system, and redesigning key e-commerce pages — all in a 3-month engagement that started from a blog post.

Hero Image
Client Newell Brands (Marmot, Yankee Candle, Elmer's, 300+ brands)
Duration January 2022 – June 2022
My Role Principal Experience Designer
Team 1 Design Lead, 1 Principal UX (me), 1 Tech Lead, 1 PM
Tools Figma, Sketch (legacy), Storybook, Airtable
Key Deliverables Figma training program, white-label design system, product catalog & detail page redesigns

The problem

Newell Brands managed over 300 e-commerce brands — from Marmot to Yankee Candle to Elmer's Glue — and their design workflow was falling apart.

The team was scattered across Sketch and Zeplin with no unified design system, fragmented handoff processes, and a "white label" template library that was becoming increasingly difficult to manage across hundreds of brand variants. Designers lacked confidence in their tooling. Developers were working from outdated specs. And the gap between design and engineering was widening with every brand they onboarded.

Newell found us through a blog post I'd written about migrating Comcast Business's product team to Figma. They needed the same thing — but at a scale that touched every brand in their portfolio.

Problem visualization
300+ e-commerce brands managed in a single ecosystem
8 instructional training videos produced
2 wks of intensive daily Figma training workshops
3 mo from kickoff to full Figma migration and delivery

My role

I was the principal designer on a small but focused Think Company team — a design lead, a tech lead, a PM, and me. My job was to lead the hands-on Figma training, drive the migration of Newell's design assets from Sketch, build out the white-label system architecture in Figma, and then put it all to work by redesigning key product pages alongside the team I'd just trained.

This wasn't just a migration. It was a chance to fundamentally reshape how a global brand's design team operated — from tools and process to collaboration and delivery.

Training & Education

Led two weeks of daily 2-hour workshops covering Figma fundamentals through advanced features. Produced 8 instructional videos for ongoing reference — ensuring the team could continue learning after the engagement ended.

Migration Leadership

Imported foundational components — colors, typography, grid, buttons, icons — from Sketch into Figma. Then guided the design team through building the rest, reinforcing learning while developing a scalable file structure.

White-Label System Design

Architected a white-label design system in Figma that let unbranded templates be customized per brand — managing both the universal system and brand-specific overrides at scale.

Product Redesign

Collaborated with the newly trained design team to redesign the product catalog and product detail pages — putting their Figma skills to immediate, practical use in a real delivery context.

The approach

Phase 1 — Research & Discovery

Understand the ecosystem

Conducted research and discovery sessions with Newell's design and development teams to understand existing workflows, pain points, and requirements. Mapped the white-label template system and identified the key challenges of managing 300+ brand variants in a single design ecosystem.

Phase 2 — Training & Migration

Upskill the team and move to Figma

Led two weeks of intensive daily workshops — 2 hours per day — covering frames, auto layout, components, variants, and collaborative workflows. Produced 8 instructional videos for complex features. Simultaneously imported foundational Sketch components into Figma and guided the team through building out the remaining system themselves.

Phase 3 — Dev Team Integration

Bridge design and engineering

Trained the development team on Figma's inspection and handoff tools. Our tech lead discovered a Storybook plugin that let developers view live Figma files directly within their component browser — immediately improving alignment between design and code.

Phase 4 — Product Redesign & Delivery

Put the new skills to work

Collaborated with the Newell design team to redesign the product catalog and product detail pages across two 2-week sprints. This wasn't just about delivering new designs — it was a proving ground for the team's new Figma skills, the white-label system, and the end-to-end design-to-dev process we'd built together.

Teaching a team to fish

The training wasn't about Figma features — it was about changing how a team thinks about design tools, collaboration, and delivery.

Over two weeks of daily workshops, I took the team from Sketch-level familiarity to intermediate-to-expert Figma proficiency. We covered everything from basic frame manipulation through advanced component architecture, auto layout nesting, and variant-based design systems. But the real value wasn't in the tool mechanics — it was in rethinking their workflow entirely.

In Sketch, their process was siloed: designers worked alone, exported to Zeplin, and hoped developers could make sense of it. In Figma, we built a collaborative model where designers worked in shared files, developers could inspect live designs, and the white-label system served as a single source of truth across every brand.

Training content showcase

"The measure of a great migration isn't whether the new tool works — it's whether the team can sustain it without you."

Building for 300+ brands at once

Newell's biggest design challenge wasn't any single brand — it was managing a white-label system that had to flex across hundreds of them without breaking.

The white-label library housed unbranded templates that were customized per brand. In Sketch, this was a maintenance nightmare — every change to the base template had to be manually propagated. In Figma, we architected a system using components and variants that let the base template evolve independently while brand-specific overrides stayed intact.

The file structure we built gave the team clear boundaries: where universal patterns lived, where brand customization happened, and how to manage both without stepping on each other. It was the foundation that made the rest of the engagement possible.

Before (Sketch + Zeplin)

  • Designers worked in isolated Sketch files
  • Handoffs through static Zeplin exports
  • White-label changes manually propagated
  • No shared component library across brands
  • Dev team working from outdated specs

After (Figma)

  • Collaborative, shared design files
  • Live Figma inspection + Storybook integration
  • Component-based white-label system
  • Scalable library with brand override support
  • End-to-end design-to-dev workflow established

Redesigning with the new system

The best way to prove a new system works is to ship something real with it. So we did.

Newell's team had recently completed UX research identifying layout and feature enhancements for their product catalog and product detail pages. Once the design team reached an intermediate Figma proficiency, we put their new skills to immediate use — collaborating on a full redesign of both pages across two 2-week sprints.

The product catalog page got a simplified product tile that more prominently featured thumbnails, along with an updated horizontal filter pattern. The product detail page focused on emphasizing product imagery, designing a new zoom behavior, simplifying form inputs, and enhancing the below-the-fold content. Both pages were designed, reviewed, and delivered using the new end-to-end process we'd built together — proving the workflow could sustain real delivery, not just training exercises.

Product catalog & detail page redesigns

Outcomes

Migration impact

  • Successfully migrated the entire design team from Sketch + Zeplin to Figma
  • Imported and rebuilt foundational components into a scalable Figma library
  • Established a file structure that supported 300+ brand variants

Team impact

  • Elevated the design team from beginner to intermediate-to-expert Figma proficiency
  • Produced 8 instructional videos for ongoing self-service learning
  • Team fully equipped to maintain and evolve the system independently

System impact

  • Built a white-label design system with brand-specific override support
  • Connected Figma to Storybook for live design-to-dev alignment
  • Established an end-to-end design and delivery workflow

Product impact

  • Redesigned product catalog and product detail pages across two sprints
  • Delivered using the new process — validating the entire workflow under real conditions
  • Applied recent UX research findings into tangible design improvements

What I learned

Newell was a reminder that the most impactful work isn't always the most complex. Sometimes it's walking into a room full of designers who are frustrated with their tools and leaving them feeling confident, capable, and excited about how they work. The technical migration was the easy part. Changing habits, building confidence, and establishing a process that would outlast our engagement — that was the real job.

This project also proved that Think Company could do something new: Figma migration and training as a standalone service offering. Newell found us because of a blog post I'd written about migrating Comcast Business to Figma. That single piece of content turned into a client engagement — which reinforced how much value there is in sharing what you know publicly. The expertise wasn't just useful internally; it was marketable.

The white-label system architecture I built here — managing universal patterns alongside brand-specific overrides at massive scale — became a reference point I'd return to on future design system work. Every system I've built since has benefited from thinking through the "300 brands" problem, even when the actual scale was smaller.

Continue reading

Previous case study

From 15% to 95% Accessibility Compliance

Design Systems, Accessibility, Cross-Platform Design

 Next case study

Designing Under FDA-Level Scrutiny

UX Design, Design Systems, Healthcare Compliance

How this site was built

I'm going to say the quiet part out loud: AI built this website. And I'm proud of that.

Most people hide behind the fact that they use AI to create things. I want to flaunt it — because I think the way you use AI says more about you than whether you use it at all.

I've spent 16 years trying to deploy the portfolio website I always envisioned. I tried everything a non-coder could try — Webflow, Wix, Squarespace, literally just shipping a Figma prototype as my portfolio for the last few years. My most recent attempt had me deep in Framer, convinced I'd finally cracked it. Another unfinished project. The truth is, when you're working full time leading design teams, there's never enough time or energy left to also build and maintain your own site. The vision was always there. The bandwidth never was.

AI changed that equation entirely.

I designed every screen, every interaction, and every detail of this site in Figma — the same way I design everything. Then I used Claude Code to bring it to life, guiding it step by step through layout, styling, animation, and content. Every decision was mine. Every pixel was intentional. The AI was the tool that finally closed the gap between what I could envision and what I could ship.

But the site itself is just one output. The real unlock came from the way I've been working on projects like Meevo — building an AI-assisted design operations framework around markdown files, GitHub repositories, and context systems that keep multiple AI agents working with the most comprehensive understanding of the project possible. Over 18 months of leading that engagement, I accumulated a massive amount of project data: strategy documents, design rationale, stakeholder feedback, research findings, system documentation, the works.

So when it came time to write the case studies on this site, I didn't start from scratch. I pointed AI at all of that structured context and used it to help me aggregate, synthesize, and draft the narratives you're reading here. Because why wouldn't I? The craft is in the curation, the framing, and the judgment. The AI handles the grunt work that used to make case studies the thing designers never finish.

The result is the thing you're looking at right now — a portfolio that actually represents who I am, built the way I believe design should work. Not despite AI, but because of it.