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

I led the transformation of Powerful Web’s outdated Adobe XD workflow into a scalable Figma-based design system built for municipal and utility clients. The team had been slowed by repetitive work, broken components, and scattered assets, and the old tools could not support the pace of growth. I created the new system architecture, standardized workflows, and introduced variable-driven customization that dramatically increased speed and consistency. The result was a forty percent boost in production efficiency, reduced design debt, and a more reliable foundation for the agency’s long-term expansion.

What Sparked the change

Working on municipal and utility district websites inside Adobe XD, I started noticing the same friction week after week. Simple updates turned into scavenger hunts through outdated files. Components broke unpredictably. Branding changes had to be repeated for every project. Nothing scaled, and everything slowed the team down.

As client demand grew along with strict expectations for accessibility, accuracy, and public communication, the cracks in our workflow became impossible to ignore. The tools we relied on simply could not support the pace of work required. Experiencing this firsthand is what made the need for change clear.

XD Laurelhurst Template file

Snapshot of XD design assets file

The Breakpoint

The turning point came during a sprint where the same issues hit multiple designers at once. We were rebuilding components, fixing repeat breakages, and re-creating layouts that should have been scalable. Living inside the workflow made the pattern impossible to ignore. I documented the problems, gathered proof, and outlined a better path. I presented leadership with a plan to migrate to Figma and rebuild our system architecture for long-term stability and speed. They aligned, and I led the transition

Why Moving to Figma Was Necessary

Months inside the XD pipeline revealed every limitation. Manual repetition, version drift, and scattered assets created a workflow that could not scale across dozens of municipal clients. Figma addressed these problems immediately.

  • Centralized assets replaced file hunting.

  • Variables and components enabled true multi client scalability.

  • Real time collaboration removed version conflicts.

  • Predictable architecture created long term design stability.

For an agency supporting many structurally similar but uniquely branded public sector sites, Figma provided the foundation required for sustainable growth.

Laurelhurst DS

Snapshot of improved Figma component structure

Designing the Workflow That Held Everything Together

Standardization was essential. I had already experienced what happened without it. I created a complete SOP from the perspective of someone who had felt the friction firsthand. It established clear expectations for file setup, variable usage, theme application, component governance, municipal edge cases, and documentation.

Tasks that previously took hours now took minutes. Iteration cycles that once required days could now be completed in a single day. The system finally behaved like a production engine rather than a scattered collection of files.

Smart Customization for Brand Originality

Utility clients share similar structural needs such as alerts, outages, and conservation notices. At the same time, each one expresses its brand in a different way. The variable driven customization layer made this possible without sacrificing consistency.

  • Section level theme swapping

  • Built in accessible contrast

  • Flexible pattern options that did not require layout changes

  • Palette updates that cascaded across the system

This provided both structure and creative flexibility, allowing the team to support many utilities quickly and confidently.

Figma variable color template example

Where the System Proved Itself

You can always feel when a design system works.

  • Developers understood component logic right away.

  • Designers stopped creating one off components.

  • Project managers could present multiple theme directions easily.

  • Reviews focused on approvals rather than fixing inconsistencies.

Work accelerated. Stress decreased. Quality improved. The system finally met the needs of the business.

Applied variable template example

Measuring Impact & Looking Forward

The comparison between the old XD workflow and the new Figma system made the transformation unmistakable.

Before:
 • Manual asset hunting
• Per-site style updates
• Frequent component breakage
• No shared library
• Long onboarding
• High maintenance costs

After:
 • Centralized assets
• Theme updates in seconds
• One-click customization per district
• True design system governance
• Higher-fidelity, public-facing sites

Measured outcomes:
 • 40% faster production
• Massive reduction in design debt
• Ability to serve more clients with the same staff
• Increased profitability
• Consistent, accessible output across every new project

What This Project Reinforced for Me

This work reaffirmed that design systems are not about aesthetics. They are engines for scale. When architecture, constraints, variables, and governance work together, friction disappears and momentum increases.

This project was never just about cleaning up a workflow. It was about enabling a growing digital agency to expand its impact across many client communities. It turned chaos into structure, structure into momentum, and momentum into meaningful public value.

other work.