Efficiency & Consistency: Echo Design System

Bringing efficiency, accessibility, and cohesion to product design

Overview

ZayZoon was scaling quickly across multiple surfaces, but our UI lived in scattered Figma files, ad‑hoc components, and one‑off decisions. Designers and engineers were solving the same problems repeatedly, visual consistency was fragile, and accessibility was handled reactively. I led the creation of Echo, a token‑first design system and collaborative working model that increased organizational efficiency without sacrificing quality, coherence, or accessibility.

The Challenge

As ZayZoon’s product surface grew, the same recurring issues appeared that I’d helped correct at Shaw, Benevity, and other orgs:

• Fragmented UI patterns built in isolation by different teams.
• Inconsistent visual language that weakened brand trust and caused confusion.
• Slow time‑to‑market due to redesigning and rebuilding basic UI from scratch over and over again.
• High rework rates caused by unclear standards and ambiguous specs.
• Accessibility is addressed late, often during QA instead of at design time.
• Onboarding for new designers and engineers is measured in weeks, not days.

The root cause wasn’t talent; it was a lack of shared structure, language, and ownership. Echo needed to fix that, not just “make a component library.”​

My Role

At ZayZoon, in my role as Director of Product Experience, I served as the system architect, primary designer, and internal advocate for Echo for this specific initiative. I was accountable for:

• Defining and tracking success metrics over time, not just at launch.
• Leading system strategy and architecture.
• Teaching designers and engineers how to build and iterate on a design system.
• Founding and strengthening design foundations and sensibilities in the organization.
• Coding the initial atoms & components in Tailwind CSS (small team, strapped for time at first).
• Auditing UI, components, and communication workflows across the product org.
• Leading the defining of tokens (colour, typography, spacing, elevation) and component hierarchies.
• Designing and documenting core components and patterns.
• Creating a Presentation Kit to standardize how work is presented and reviewed.
• Establishing contribution and governance models with design and engineering.

We completed a large heuristic review and the first atoms, colours, and typography styles were born. The initial Tailwind CSS repo was created on my local machine before being iterated on by designers and developers.

Approach

1. Measure First, Not Last, and tackle stigma & Bias

Before designing Echo, I established a baseline so we could quantify impact and started a rigorous education initiative to help garner adoption and build momentum.

Measuring:

• Consistency of atoms and molecules across product areas.
• Delivery: Time-to-market for key feature flows.
• Average design time on day-to-day high-fidelity screens.
• WCAG accessibility scores.
• Review overhead: UX/UI QA bugs, the number of comments, and iterations caused by inconsistency.
• Team engagement score (related due to the number of comments made on previous engagement surveys).

Educating:

• Educating new designers and developers.
• Educating upward to leaders with a fragmented opinion of design.
• Sharing achievements early and widely.
• Inviting organization-wide comments and criticism to inform and shape our approach.

This ensured Echo solved real bottlenecks and gave leadership tangible metrics to invest in, grounded in reality rather than gut.

2. Token‑First System Architecture

Using atomic design as a mental model (not dogma), Echo is built on a token‑first foundation:

• Color (semantic roles, not raw hex codes).
• Typography (scale and roles, responsive rules).
• Spacing and layout grid.
• Elevation, radius, and motion.

On top of this sits a structured component hierarchy of buttons, inputs, form controls, cards, navigation, tables, and more, composed into patterns and templates. This allows variation across products without fragmentation or one‑off styling. This was pressure-tested early on when ZayZoon underwent a rebrand, causing a swap in typography and main color styles, reflected seamlessly and effortlessly throughout the then secure system

3. Collaboration as a Design Tool

Echo was intentionally co‑created with:

• Product Designers and Marketing Designers, to align on intent, use cases, brand representation, tone, voice, and tradeoffs.
• Engineers, to ensure feasibility, maintainability, and a clean mapping to the codebase.
• Product Managers, to tie adoption directly to delivery speed and quality.

This involved workshops, shared audits, and live system critiques, making system evolution a collaborative process rather than a mandate from design.

4. Presentation Kit and Documentation That Gets Used

I introduced “Presentation Kits,” a structured way to present work inside Figma so anyone opening a file could immediately understand context, decisions, and variants. These kits standardized:

• How flows, components, and states are laid out and labelled.
• What annotations and notes accompany major decisions.
• How to show “before/after” and alternatives in one place.

Echo’s documentation lives alongside the components, not in a separate, forgotten wiki, and includes:

• Clear usage guidelines and rationale.
• Accessibility requirements and edge cases.
• Do/don’t examples.
• Behavioural notes for responsive and interactive states.
• Contribution and escalation paths.

5. Feedback Loops and Governance

Governance is lightweight but explicit:

• Regular, weekly critique sessions of all design work to catch inconsistencies and flag the need for new components.
• Regular reviews of proposed changes and new components.
• Contribution guidelines to avoid rogue patterns while still encouraging innovation from both designers and developers.
• Feedback channels for designers and engineers to report gaps or friction.

This turned Echo into a living product with an active backlog, not a static library.​

Impact

Across organizations, my design system work has consistently delivered measurable gains, and Echo follows the same pattern. For ZayZoon, we tracked:

• 75% improvement in consistency, where stagnant and highly experimental areas were the main outliers.
• ~30% improvement in total delivery speed, as not just design but also product management, engineering, and QA became familiar with new standards and adopted patterns.
• 25%+ design time saved on day‑to‑day design work through component reuse and standards alignment.
• ~50% improvement in WCAG accessibility scores as accessible patterns became the default.
• 80% reduction in UX/UI related QA and bugs due to consistency and standards being followed.
• 10% improvement in the next engagement survey scores for teams actively involved in the creation of or utilization of Echo.

Echo shifted the team from acting as a service function churning out screens and specs to operating as a strategic partner in how ZayZoon ships product. Efficiency gains and reduced design debt created room for thought leadership, experimentation, and more ambitious product work.