Kseniya Markevich

PROJECTS

Genius Answering

Workiz Design System

Workiz Phone

ZooBazar

All projects

Workiz — Design System

What worked for a smaller team became increasingly difficult to maintain as complexity grew. Components, styles and patterns were scattered across files, often duplicated and inconsistently updated, with no clear ownership or structure. This led us to build a system that could scale with both the product and the team.

Problem

UI Kit was holding us back

The existing UI kit couldn’t keep up with evolving product needs, it lacked advanced properties and flexible component configurations. The number of reusable components was critically low.

Without a shared component library, designers and developers often solved the same problems in different ways, leading to duplication, inconsistencies and misalignment across the product.

No single source of truth

Our guidelines described what something looked like and not how it behaved. Documentation lived across files, meetings and conversations. It was challenging to find answers fast.

Designs were built from screenshots and groups, with no component-driven design approach. Files became heavy, difficult to navigate and hand off.

Laying the foundations

I began the research by mapping existing patterns and defining a structure that could support the product’s current flows and future growth.

💡

Key insights

A system, not a collection of assets

Atomic Design becomes the foundation for creating reusable building blocks that could scale experiences.

The intent behind components

Each component should solve a specific user problem and be intuitive to use across the product.

Creating a shared language

Design tokens are essential to align design with implementation.

AI-ready artifacts

Well-structured system + UX thinking = faster AI-powered creation.

✨

Developers in charge, AI on the job

Throughout the process, developers were our key partners. Their feedback helped shape decisions around component architecture, naming conventions and implementation requirements.

We were lucky to be building the design system at a time when AI was becoming part of our workflow. Working together with developers, we used AI to speed up the creation and refinement of components in isolation. This allowed us to build the system faster, instead of creating components only as part of product features.

Architecture & components

From design tokens to complex interface layouts.

Tokens

Tokens in the system became our new artifacts. Since the legacy colors were limited and lacked accessibility,

we had to rework them so that color combinations could pass accessibility tests. We shifted from using styles to a more scalable color system — primitives and semantic tokens. We also didn’t have any established guidelines for spacing previously; now we do, which reduces guesswork in layout decisions.

Tokens in the system became our new artifacts. Since the legacy colors were limited and lacked accessibility, we had to rework them so that color combinations could pass accessibility tests. We shifted from using styles to a more scalable color system — primitives and semantic tokens. We also didn’t have any established guidelines for spacing previously; now we do, which reduces guesswork in layout decisions.

Components

I audited the existing UI kit and production environment and identified gaps.

Our main references for best practices and component libraries came from leading design systems such as Primer, Salesforce Lightning Design System, Atlassian Design System, shadcn/ui, and others. This helped shape a clearer vision
of the system we needed to establish — simple, functional and visually balanced.

I audited the existing UI kit and production environment and identified gaps.

Our main references for best practices and component libraries came from leading design systems such as Primer, Salesforce Lightning Design System, Atlassian Design System, shadcn/ui, and others. This helped shape a clearer vision of the system we needed to establish — simple, functional and visually balanced.

Connecting design, code and product context

Design documentation

Each component now follows the same documentation structure. This helped designers stay aligned on patterns and made it easier for AI to scan and work with the system.

We treated AI as a powerful design engineer that we could use to structure component documentation, gather best practices, compare patterns across design systems and consider our platform’s specific needs. We stayed in control, validating every suggestion and adapting it to our product library.

Design System as development context

Storybook became our source of truth for the component library from a technical perspective.

To explore AI workflows, we created a custom skill that brought together our component-building rules and connected Figma specifications with Storybook documentation. This gave AI the context it needed to build components. Most components we worked on went through several rounds of iteration, with reviews and validation with developers before release.

Layout system

Component customization & templates

We recognized the need for reusable templates for key product screens, built from well-structured and customizable components. These templates gave the product design team a shared starting point to align earlier on deliverables and reduce back-and-forth discussions during the design process.

Responsive design

Many of our users, such as field technicians, access the product on tablets and mobile devices. To support their workflows, we defined responsive layouts and the way components should adapt across different screen sizes.

Designed experience for AI call & message answering assistant

SaaS

Web App

AI feature

Shipped

Workiz Phone — UX Improvements

SaaS

Web App

Shipped