Improving design operations

Design Leadership | Piclo | B2B SaaS | 5 min read

Project summary

Company: Piclo (B2B SaaS)
My Role: UX Design / DesignOps Lead
Project Goal: Standardise the design-to-engineering pipeline by migrating to a code-aligned UI component library and piloting AI workflows for design and research synthesis to increase operational efficiency and support the Nuxt 4 platform migration
My activities: DesignOps strategy, cross-functional collaboration (Engineering), AI tool stress-testing, semantic design token architecture, mentoring (Staff/Senior levels), knowledge management auditing, and change management
Timeline: 2 months
Impact: Validated a 50–75% reduction in design cycle time, established a single "source of truth" between Figma and code, and delivered a turnkey, brand-aligned design system ready for engineering deployment.

The Problem: Resolving a Fractured Source of Truth

At the heart of our operations was a significant "translation tax." Our legacy Storybook library was unmaintained and fundamentally out of sync with our Figma design files. While the design team had developed "tribal knowledge" to navigate these limitations, the downstream impact on Engineering was severe.

The Operational Drag:

Engineering Guesswork: Without a 1:1 mapping between design and code, developers were forced to build custom "hacks" or "close-enough" approximations, leading to UI inconsistencies and ballooning technical debt.
The Nuxt 4 "Hard Stop": With a looming migration from Nuxt 2 to Nuxt 4, it became clear that our legacy library was an architectural liability. Every hour spent maintaining the old system was an hour stolen from the platform's future.

Leadership Strategy: I moved beyond "design-first" thinking to adopt a cross-functional stewardship role. I collaborated with the Lead Engineer to retire our legacy system in favour of Nuxt UI—a third-party, code-aligned library. We prioritised developer velocity and systemic scalability over the comfort of our existing, albeit substandard, workflows.

The Fractured Pipeline: A visual map of the operational friction between Design and Engineering, highlighting the "translation tax" and technical debt caused by desynchronised component libraries.

The Discovery: Mirror-Testing for Risk Mitigation

I led a dual-track validation process to de-risk the transition. I wanted objective proof that the Nuxt UI system would deliver the promised efficiency gains for both designers and developers.

The Design Stress Test: I tasked the design team with a "Hackathon": recreating a complex live page (featuring AG Grid tables and custom graphs) using Figma Make and the new library. We discovered a 50–75% time saving in drafting, though we identified a "fidelity gap" where the AI redrew components rather than using master instances—leading us to establish a "Hybrid Workflow" (AI for exploration, manual polish for handoff).

The Engineering Stress Test: In parallel, the Lead Engineer rebuilt the same live page using the Nuxt UI library. As we had hypothesised, the build time was significantly reduced. This dual-track validation provided the confidence needed to move forward with the wholesale migration.

Live page

AI generated design

Accelerated Drafting, Human Refinement: This comparison demonstrates the "approximate" nature of current AI design tools. While Figma Make successfully mapped the core components from our library, manual editing remained essential to bridge the gap between an AI "guess" and a production-ready design.

The Execution: Building the Turnkey System

With the library validated, I transitioned to a DesignOps model, empowering my team to lead specific architectural workstreams.

Semantic Tokenisation: We moved from literal colour names (e.g., "Navy 350") to semantic variables (e.g., "Nav-bar-background"). This established a sophisticated design-token architecture that allowed for platform-wide branding updates with a single click.
Strategic Bundling: I used the technical migration as a vehicle to resolve long-standing design debt, such as upgrading our core brand typography to a font better suited for UI legibility.
Audit & Gap Analysis: We audited complex third-party tools like AG Grid to ensure the new library met our heavy data requirements, ensuring no loss of functionality during the transition.

The Logic of Scalability: By abstracting raw colors into semantic aliases, I created a scalable bridge between Figma and Nuxt. This ensures a single "Global" update propagates across all components, guaranteeing 1:1 parity between design and production code.

The Intelligence Pilot: Automating "The What"

While the UI library addressed our delivery speed, I sought to solve a more strategic problem: "Knowledge Debt." Customer insights were fragmented across Slack, Miro, and HubSpot, making evidence-based prioritisation difficult. I mentored a Staff UX Designer through a two-phase exploration of AI-driven research synthesis.

Phase 1: The Strategic Pivot (Leadership through Restraint)

Our initial pilot revealed that our raw research data was too unstructured for off-the-shelf AI models to process reliably.

The Decision: Knowing that AI is only as valuable as its data hygiene and rather than forcing a failing solution, I made the executive call to park the work.
The Logic: By pausing, I protected the team from "insight hallucinations" and avoided basing roadmap decisions on flawed automated summaries. This demonstrated a commitment to data integrity over trend-chasing.

Phase 2: The Agent Workflow (Persistence & Scaling)

Six months later, as the technology matured, I re-initiated the project. I empowered the Staff Designer to build a custom Zapier-driven AI Agent to bridge our disparate data silos.

Quality Assurance: When early tests showed the agent was still prone to errors, I provided a critical steer: we implemented a "Human-in-the-loop" verification step.
The ROI: The goal shifted from total automation to augmented synthesis. This protected our small pool of B2B customers from "research fatigue" by allowing us to query existing data for low-risk questions before commissioning new, expensive primary research.

Augmented Synthesis Workflow: A "human-in-the-loop" pipeline designed to centralise fragmented customer feedback. By using AI to scaffold initial summaries for designer verification, we converted "Knowledge Debt" into actionable insights while maintaining data integrity.

Conclusion & Reflection: A Legacy of Readiness

Although an organisational restructure meant the full Nuxt 4 migration was paused, the project achieved its primary objective: eliminating the systemic friction between design and engineering. I left the business with a "Turnkey" operational framework that transformed a fractured hand-off process into a high-velocity, code-aligned pipeline.

Key Outcomes

Operational Efficiency: Reduced manual hand-off translation time by an estimated 75%, allowing the team to focus on strategic feature work rather than production debt.
Systemic Integrity: Achieved 1:1 parity between Figma tokens and Nuxt UI components, creating a single source of truth that de-risks future scale.
AI Readiness: Established a grounded, human-in-the-loop framework for AI implementation, ensuring the team can adopt emerging tools without compromising data integrity.

Final Reflection

This project reinforced my belief that DesignOps is a force multiplier. By treating the internal workflow with the same rigor as a user-facing product, I was able to bridge deep-seated technical gaps and empower the team to deliver higher-quality work with less effort. My legacy at the company is a design organisation that is no longer just "drawing boxes," but is now architecting a scalable, future-proof product ecosystem.

This case study highlights my strategic approach to design leadership, showcasing how I de-risk complex technical migrations by architecting scalable, code-aligned systems that significantly increase team velocity and output quality. Head back to the homepage to see more projects.

Other projects you can ask me about

Service Design: Evaluating customer and employee interactions with a supermarket's self-service checkouts at a major retailer
UX design: Prototyping and testing of a website selling electric vehicles, chargers and tariffs
UX research: An 8-week diary study assessing the impact of the COVID-19 lockdown on banking experiences
UX research: Field-based usability testing of a digital visitors guide for a Tudor palace
Product design: International human factors research and design of a luxury coach