As our digital products evolved, cracks started to show. With a commitment to quality and efficiency, HAWE aimed to unify its digital experience and streamline processes to minimize design debt and development costs. I led the initiative to bring that vision to life.

• Establish visual and functional consistency

  Create shared UI components to unify the look, feel, and behavior across tools.

• Streamline collaboration
  and development

  Bridge gaps between design and dev through a shared source of truth.

Every tool had its own aesthetic and logic. Without a unified approach, we ended up with fragmented journeys, inconsistent visuals, and inefficient workflows. Outsourced design and dev made scaling a headache.

• No
  code ownership

  Most of our front-end work was outsourced, which made iterating on designs slow and clunky. We couldn’t move fast.

• Too many cooks in the kitchen

  Each tool was built by a different agency. That meant different UI patterns, no reusable components and a very patchy experience.

• Documentation?
  Sort of...

  We had a design manual, but it wasn’t widely used. Some teams followed it, others didn’t know it existed.

• Design team
  of one

  With limited resources, I juggled design, strategy, and stakeholder alignment. It pushed me to build a system all could rally around.

I kicked things off with a cross-product audit. I talked to teams and gathered my suspects in an inventory: mismatched buttons, inconsistent patterns and interactions. This helped visualize just how fragmented our experience had become, and it gave me a clear place to start.

Using Material UI as a base, I quickly mocked up clean, consistent interfaces. Stakeholders saw the value, and we shifted from debating theory of "nice-to-haves" to exploring solutions.

We piloted the system on one product. I followed Atomic Design principles to build tokens, components, and patterns. Early dev feedback helped me refine things fast.

With regular critiques, open Teams threads, and async walkthroughs I helped the system become collaborative. By creating visibility early and inviting others in, we turned a design system into a shared language.

Initially a solo mission, I was later joined by a fellow designer. This collaboration sharpened decision-making, boosted component quality, and added momentum through regular design critiques.

Designing components wasn’t just about looks. Dev teams needed clarity, and we needed consistency. To achieve that, I documented specs covering design, behavior, and best practices.

• Design
  tokens

  Colors, spacing, type, and other visual elements - all consistent, all reusable.

• Interaction
  rules

  Hover states, focus behavior, animation timing - no guesswork.

• Guidelines and
  edge cases

  Usage do’s and don’ts, accessibility guide, and examples.

• Dev-ready
  snippets

  HTML/CSS snippets to make implementation smoother.

To expand adoption beyond our bubble, I built playbooks and wrote guidelines for contribution, versioning, and ongoing feedback. Our system quickly matured into a team-wide asset, saving hours otherwise spent on repeated work.

Accidentaly pulling an update was causing chaos in prototypes. To solve this, I introduced a versioning practice inspired by front-end workflows. Designers could now test changes safely before "pushing to production".

Before launch, we consulted with an external agency for a last review. Their fresh perspective helped sharpen accessibility and reinforced our vision and direction - turning a solid system into a robust one.

• Design time cut by around 50%

  Reusable components sped up new feature creation and design iterations.

• Consistency across 4+ products achieved

  No more guessing games for users. A single design language replaced fragmented visuals.

• Increased developer and PM satisfaction

  Less back-and-forth, clearer specs, and a shared language made handoff smoother.

• Shared
  ownership unlocked

  The system wasn’t mine anymore. Thanks to governance and maintenance guidelines the team was empowered to co-create.

• The visible system isn't the whole system

  True success depends on governance, shared purpose, and evolving the system intentionally - not just creating components.

• Shared vision unlocks real adoption

  Aligning design and engineering teams around the 'why' behind the system leads to stronger buy-in and lasting impact.

• Governance and critique fuel growth

  Establishing a clear review process and philosophy of critique keeps the system healthy and adaptable over time.

• Strengthen
  contribution models

  Making it even easier for devs and designers to co-create and expand the library.

• Introduce design
  system KPIs

  Track and measure usage, adoption, and a feedback loop for continuous improvement.

• Build a living system, not a frozen one

  Continue evolving the design system based on prioritized needs, team feedback, and user insights.

This wasn’t just a design system. It was about creating a shared foundation for better, faster, more delightful products. I started alone. By the end, we had a living system, a growing team, and a culture that valued UX.

If you're tackling messy systems and want a design partner who brings systems thinking, momentum and clarity to cross-team collaboration, let’s connect.