Development

Unified Design System: Bridging Product and Tech

This case study explores how we successfully built a scalable design system for a digital marketplace that connects spiritual advisors with advice seekers at Adviqo GmbH.

Task

As Lead Product Designer, I deep dived into optimizing internal delivery processes within the product design team. Working closely with the Frontend Chapter Lead, I streamlined and improved the product-to-technology handover by introducing clearer workflows and ensuring designs always matched production. The biggest challenge was overcoming confusion and misalignment caused by outdated or unprioritized design files and lack of version control. This initiative enhanced collaboration, communication, and efficiency across design and development, setting a stronger foundation for future work.

  • Strategy

    Delivery, Hand over

  • Design

    Design Systems

  • Client

    adviqo GmbH

Overview

Scaling Design of a Digital Marketplace

Context: A fast-scaling digital marketplace connecting spiritual advisors with clients via chat-based sessions was suffering from inconsistent UI, slow design velocity, and handoff issues across platforms.

Challenge: Fragmented components, unclear visual language, and a lack of documentation made it hard to scale across multiple products (mobile, desktop, internal tools) and user roles (clients & advisors).

Role: I led and initiated the design system project, establishing principles and launching the first version with key stakeholder buy-in. After aligning with product and dev leads, I handed ownership to the Senior Product Designer, ensuring the team was well-guided and decisions were reviewed & documented. I advocated its importance by integrating maintenance and reviews into the development pipeline, improving visual testing efficiency.

Impact:

• Decreased misalignment and confusion between Product <> Tech. PMs, Devs, QA knew where to find the expected behavior on every sprint

• Created a scalable, token-based design system adopted across 2 platforms (client side (2 brands), advisor side).

• Reduced new feature UI design time by  ∼40% through reusable components and clear documentation.

• Improved dev handoff speed and quality by introducing shared naming conventions, Figma libraries, and usage guidelines.

• Enabled consistency across key journeys (onboarding, chat, transactions) without slowing down iterative product work.

Why It Matters:

 

• Enables quick, smooth collaboration between Product and Tech, supported by documentation and a clear source of truth for every sprint.
 
•Tracks delivery, documentation, and sprint progress, ensuring alignment beyond just the design system—but throughout the whole product process.
 
•Minimizes confusion: PMs, developers, and QA know where to find expected behaviors and make decisions faster.
 
•Consistent processes and components mean we can reliably deliver great experiences and products on every platform and for every user type.
Overview

Introduction

Building a design system from scratch is much easier than fitting it into an already living organism. It’s more than just creating components – it’s about structure, consistency, and collaboration. As a Lead Product Designer, I took on the challenge of designing the system and aligning it with developers, improving workflows, and ensuring its long-term usability.

 

This case study explores how we successfully built a scalable design system for a chat-based platform that connects spiritual advisors with seekers at Adviqo GmbH.

Adviqo GmbH has been acquired by Ingenio, US-based category leader on May 2022.

The Role

Lead Product Designer

As Lead Product Designer, I initiated and led the design system project, establishing core principles and launching the initial version with support from the Product Director and Frontend Dev Chapter Lead. I ensured alignment across product and development teams and transitioned ownership to the Senior Product Designer. Throughout, I kept the other two designers updated on its usage and reviewed all key design decisions. A major priority was advocating the design system’s value and embedding its maintenance and review process into the development pipeline via GitHub, Storybook, and Chromatic. This integration made visual testing much more efficient. Ultimately, I emphasized that without ongoing care, a design system in Figma is just a static library.

overview

Problem

The Advisor Tools side of the platform lacked consistency, leading to inefficiencies in both design and development. UI components were scattered, naming conventions were inconsistent, and collaboration between designers and developers was challenging. As we migrated to a new tech stack, we saw the opportunity to solve these issues by introducing a structured, scalable design system. We started building it in close cooperation with devs team to make sure that, in the end, what we have in Figma matches with what we have in Storybook.

Problem #1

Draft components

Since most of the components were made in a hurry for the MVP (as it usually happens 🥲) we couldn’t reuse them as product started to grow. Therefore we were in need to tune up almost every component that we had, from input fields to modal frames.

Example

• No structured button sizes and possible action states

• Validation for the input field isn’t part of the component

• Sizes for the graphic elements, avatars and illustrations were not defined

Impact

Design team couldn’t reuse components while creating new flows with common elements across the design.

Problem #2

No doc & guidelines

Lack of rules for basic design principles led us to different font sizes, corner radius of the elements, etc from page to page. Which is crucial not only for the design team but also for our fron-end fellows.

Example

• Corner radius for parent and nested elements were different depends on who designed the page.

• Typography rules are abstract and unmeasurable for desktop and mobile view.

• Icon has different sizes and styles which led to problems while scaling.

Impact

Designers, Product Managers & Devs spending a lot of time visually finding out common rules for each element instead actually working on their task.

Problem #3

Product <> Tech Communication

All the challenges and inconsistencies mentioned above resulted in the absence of a single source of truth. We realized that what we have in Figma is not always matches with elements in Storybook.

Example

• Style and functionality of input fields, buttons, checkboxes etc. differs from flow to flow on the production.

• Some action states are missing on the production because they are not defined in the design.

• No one could trust neither Production or any type of documentation as the source of truth while talking about expected behavior.

Impact

QA, PMs and Designers are unable to reference on the source of truth in order to make decision or create awareness of the situation. 

HMW

Defining the problem

Goals

Business Goals

1

Increase Efficiency

A structured design system speeds up both design and development, reducing time spent on repetitive tasks or misalignments that are going ot be fixed "later".
2

Ensure Scalability

A unified system allows for easier expansion, whether adding new features or adapting to multiple brands.
3

Cut Costs

Streamlined workflows mean fewer design inconsistencies, less back-and-forth between teams, and ultimately, lower development expenses.
Goals

User Goals

1

Consistent Experience

A unified design system ensures a familiar and seamless experience across the platform.
2

Improved Usability

Clear, structured UI elements make navigation more intuitive, reducing friction in both advisor and customer journeys.
3

Faster updates and improvements

With a scalable design system, new features and enhancements can be rolled out more efficiently, improving the platform over time.
Results

Impact

The implementation of the design system significantly streamlined our workflow and improved overall efficiency. By introducing structured documentation and standardizing components, we minimized friction between design and development, ensuring a smoother handoff process. This not only reduced misunderstandings but also sped up implementation by eliminating redundant work and providing a single source of truth for both teams. Additionally, the design system laid a strong foundation for scalability, allowing us to extend it seamlessly to the Customer side while maintaining consistency across multiple brands.

Goals

Our Users

A design system is more than just a UI kit – it’s a shared language for everyone involved, from designers and developers to stakeholders. Our goal is to create a single source of truth that stays consistent, up-to-date, and seamlessly integrated across Figma, Storybook, and production.

But all of us has our own needs which needs to be covered:

Developers

Required a structured, reusable component system to speed up implementation and reduce inconsistencies.

Stakeholders

PMs & QA benefited from a shared source of truth, reducing back-and-forth discussions on design & Product decisions.

Designers

Need a clear, structured component system that is intuitive, easy to use, and self-explanatory.
Approach

Process

To meet the tight timeline dictated by the a Back-end migration, we embraced a pragmatic approach for the MVP:

Laying the Foundation

  • Created the first version of the design system myself
  • Refined existing elements, such as buttons, established rules for spacing, typography, and naming with the team on the go.

onboard the Design Team

  • Onboarded 3 designers to create and document new components
  • Ensured smooth, consistent collaboration within the design team

Stakeholders

  • Got buy-ins from QA and developers that were suffering from the lack of a design system
  • Pitched the Project to the Product Team with followed up demo where devs and QA team confirmed the need of a design system into our delivery processes

Alignment with Development

Frequent meetings with our Front-End Chapter Lead ensured naming and structures matched across Figma and Storybook. We also aligned with developers to add annotations for ambiguous elements and behaviors, which proved to be more effective than traditional documentation in Jira.

Documentation & Education

We documented every element’s usage guidelines, do’s/don’ts, and best practices. This was followed by a team workshop to ensure adoption.

Expansion to Customer Side

  • pplied the Supply side’s structural approach to review and clean the existing Customer side, updating branding as needed
  • Applied learnings from the Supply side design system to improve consistency and efficiency
  • Unlike Advisor Tools, the Customer side had an established brand identity
  • Implemented updates gradually, integrating new components while maintaining brand consistency
  • Reworked chaotic typography scales for better clarity and usability
  • Addressed lack of documentation and unclear logic from the previous team to streamline design and development

Ongoing Evolution

We set up a workflow for continuous updates, keeping the system adaptable as the platform evolves. This also reduced QA workload by standardizing design and front-end components.
Approach

The Three Pillars of a Strong Design System

A truly effective design system stands on three essential foundations: Components, Variables, and Documentation—ensuring consistency, flexibility, and clarity across design and development.

Components

The building blocks of the interface, crafted for reusability and efficiency.

Variables

The glue that holds the system together, bringing consistency to spacing, colors, and typography.

Documentation

The guide that keeps everyone aligned, making adoption seamless across teams.

process

Bridging Design & Code

We built the design system from the ground up, starting with core elements like typography, spacing, and colors, then structured scalable components with semantic naming and variables. Once refined in Figma, we aligned everything with Storybook to ensure seamless integration between design and code.

Redesigning Design-to-Development Handover with Branching Workflow

“Alignment lasts as long as you maintain it” 🤓

Problems

  • Confusion from mixed ready and unready designs in Figma causing mismatch with production
  • Multiple outdated feature files due to deprioritization, leading to inconsistency and false finalization
  • No version tracking or overview of past sprint designs to correlate with analytics and product versions

Solutions

  • Figma file always matches production using branching for new prioritized features
  • New features finalized only after dev review and sprint planning is scheduled one week earlier
  • Branches named after dev releases for documentation and QA ease
  • Branches remain accessible but locked post-release ensuring stable main branch
  • Designers can freely work on branches allowing system-wide updates without disrupting production

New Product<>Tech Delivery Process

Smarter Design-to-Development: Unified Systems & Chromatic
I introduced a new workflow inspired by leading design handoff practices, connecting Figma, Storybook, and Chromatic. This streamlined collaboration, enabled side-by-side review of coded and design UI, and reduced friction between teams.
  • Faster, clearer feedback between designers and developers.
  • Shared component library for consistent UI across products.
  • Automated visual tests to instantly spot unintended changes.
Finale

Final Designs

The result was a robust and scalable design system for the Supply side, built for maximum efficiency. Partnering closely with Senior Product Designer Maksim and Frontend Lead Maksim, we integrated Chromatic into our workflow, streamlining visual testing and ensuring consistent alignment between design and code. After a successful implementation, we extended this systematic approach to the Customer side, carefully adapting it to their established brand identity. This iterative, thoughtful process laid a strong foundation for ongoing enhancements across the entire platform, proving that true alignment lasts only as long as it is actively maintained. 1 developer and a Product Designer have been called to share this responsibility moving forward.

Supply/Seller Side

Demand/Customer Side

Wraping up

What We Learned

A design system is more than just a UI kit – it’s a shared language for everyone involved, from designers and developers to stakeholders. Our goal is to create a single source of truth that stays consistent, up-to-date, and seamlessly integrated across Figma, Storybook, and production.

But all of us has our own needs which needs to be covered:

Bridging Design & Development

Working closely with the Frontend team and bringing Chromatic into the mix was an eye-opening experience in alignment, negotiation, and problem-solving. From discussing design system components to aligning on implementation details, we learned how to meet halfway and build a shared vision that really works for both design and development.

Mastering Storybook & Dev Workflows

Getting hands-on with Storybook and diving into the developers’ pipeline helped me see how product designers can actively be part of the development process. This not only made the handoff smoother but also helped us design with scalability and real-world constraints in mind.

Falling Deeper for Design Systems

This whole journey really showed me that design systems aren’t just about making things look consistent—they’re about making our teams more efficient, fostering better collaboration, and ultimately creating better products. My passion grew because I saw design handoff as such a crucial part of delivering great work. Collaborating with other leads to build a handover process that solved pain points for everyone became its own exciting project. It created a space where everyone felt comfortable to speak up, suggest improvements, and work together to keep raising the bar on how we build amazing products.
Finale

Next Steps

With multiple brands under the company, the product design team recognized the need to evolve the design system into a flexible white-label solution.

Back
Next Project
Redesigning 4m annual users marketplace