Optimizing Tools & Workflows For Scaling Business Needs

Role

Product Designer

Timeline

August 2023 - January 2025

Tools

Figma, Adobe XD, Wordpress

Deliverables

9 themed desktop templates with 3-8 related color palettes, 9 variable sets, 1 global design system

Overview

At Powerful Web, a web services provider for utility districts and municipalities, I initially supported client projects and recommended transitioning from XD to Figma. To streamline their growing operations, I built a global design system in Figma to support both templated and custom customer experiences.

Uncovering the Bottleneck

To uncover workflow inefficiencies at Powerful Web, I embedded myself in their design process and identified key bottlenecks:

  • Inconsistent and unlinked components led to frequent errors, requiring time-consuming corrections.

  • No shared component library meant designers had to manually pull in assets from various files, increasing setup time and inconsistency.

  • Versioning issues made collaboration difficult, as styles and updates had to be manually applied to every project.

These challenges hindered collaboration and scalability. I recommended switching to Figma, but more importantly, implemented a structured design system to streamline workflows and support future growth.

XD Laurelhurst Template file

Laying the Foundation for Change

The first step was to transition Powerful Web from Adobe XD to Figma. This move alone opened up new possibilities.

  • Enhanced asset management allows for better organization.

  • Real-time collaboration offers better transparency for team members and clients.

  • Variable collections & Component templates make it easier to customize themes without starting from scratch.

However, for this transition to be truly effective, we needed a scalable structure that would ensure consistency across projects while affording micro & macro customization with improved precision.

Building the Design System

To design at scale, I leveraged Figma variables over styles for greater flexibility and efficient system-wide updates.

  • 9 themed templates with each template serving different client needs.

  • 1,023 components that stretch across themed templates.

  • 2,340 variables enabling seamless speed in customization.

  • 55 variable collections for the range of template themes offered.

I organized themes and sub-themes into variable collections, enabling designers to make instant, theme-wide updates to colors, typography, and layouts—eliminating the previous need for manual adjustments broken components.

Laurelhurst DS

Implementing the New Workflow

To support adoption of the new Figma system, I created a Standard Operating Procedure (SOP) outlining how to set up files, use variable collections, and apply best practices. This ensured consistent, scalable designs and helped new team members ramp up quickly.

  • Setting up a new Figma file with the design system components and variable collections.

  • Leveraging the variable collection template to create consistent, reusable designs.

  • Applying best practices for maintaining consistency across projects, ensuring that templates remain scalable and easy to use.

Scaling with Smart Customization

Given consistent content structures but unique branding needs, I introduced a color token system using Figma variables. This enabled rapid, section-level theme customization, reduced repetitive tasks and errors, and allowed designers to focus more on creativity than maintenanc

The Breakthrough: Collaboration & Efficiency

Figma transformed team collaboration—eliminating silos, streamlining file-sharing, and accelerating feedback loops that were previously slow and manual.

This shift wasn’t just about efficiency—it fostered a culture of collaboration, where designers, developers, and stakeholders have clear visibility into the design process.

Measuring Impact & Looking Forward

To measure the success of this transformation, I walked through the updated workflow and compared it directly to the old XD process. The results were clear:

  • Before: Designers had to manually import assets because XD didn’t support shared components.

  • After: All assets lived in a single source of truth, allowing for seamless integration into projects.

  • Before: Styles had to be updated individually for each project, making the setup cumbersome.

  • After: Variable collections enabled global updates with a few clicks, dramatically reducing production time.

  • Before: Broken components required frequent fixes before they could be used.

  • After: Single source of truth ensured a fix within the master component trickled down to child elements.

By integrating a structured design system with reusable components, color tokens, and theme variables, I helped Powerful Web achieve:

✅ 40% faster production time, allowing the team to take on more projects with consistent quality.

✅ Seamless design scalability, reducing manual work.

✅ Improved asset organization, making updates quicker and more systematic.

✅ Increased profitability, as time saved translated directly into higher-value output.

A Lasting Impact

The new design system and workflow positioned Powerful Web for sustained growth—enabling them to scale without sacrificing quality and onboard designers more efficiently. I continue to support their evolving needs, and it’s been rewarding to see their progress.

Looking Ahead

This project reaffirmed that design systems are about scalability and team enablement—not just aesthetics. With the right tools and structure, Powerful Web now delivers high-quality digital experiences faster, with empowered designers and stronger collaboration.

other work.