Design system for faster development

I joined Perceive Now, a B2B SaaS startup, as a contract UX designer. While my main focus was the AI-powered platform, I also led the effort to build a scalable design system.

I built reusable components and clear design standards that kept pages consistent. The system helped designers and developers move faster and stay aligned.

Due to NDA (Non-Disclosure Agreement), sensitive details have been omitted while highlighting the essence of the project and my role.

Duration

2022-2023

My role

UX designer

Client

Perceive Now

Problem

Inconsistency slowed us down

Designing in parallel, we made different choices for identical components, such as tables with inconsistent padding and mismatched buttons.

Without a unified system, updates had to be applied screen by screen, slowing already tight timelines.

Competitive analysis matrix plotting competitors on two axes: direct versus indirect and legacy versus emerging

Challenge

Convincing a feature-driven startup to value a system

Stakeholders wanted features shipped, not infrastructure. To get buy-in, we framed the design system as an efficiency tool: faster design, easier development, and more consistent output.

We built it alongside product work so its value was proven organically. Developers began reusing components before designs were finalized.

My role

Creating consistency across 50+ pages

The product was the top priority, and stakeholders had little interest in a design system. To keep our Figma files and product pages consistent, I took the initiative to create one anyway.

I audited existing styles, defined standards, and built reusable components, which later saved the team time as the MVP expanded.

Key Decisions

How we approached it

Audit and gap analysis

We started by auditing a style guide left by a previous designer. It covered basics like colors and typography but lacked grids, spacing, and standardized components. These gaps would only grow more visible as the product scaled.

Defining standards to keep work consistent

I applied Atomic Design principles to structure the system. This modular hierarchy made components easier to maintain, scale, and combine across 50+ pages while keeping the library lightweight.

Atom-level components in design system showing foundational elements such as grids, typography, buttons, icons, and form controls

Atoms formed the foundation of the design system, defining the smallest reusable elements

Molecule-level components in design system showing inputs, cards, search fields, tabs, dropdown menus, and chart legends

Examples of molecules created to keep patterns consistent across the product

Organism-level components in design system showing data visualizations such as maps, charts, and data tables

Organisms built by combining molecules into complex, reusable components

Build reactively, not upfront

Instead of creating a large system at once, we added components as we built product pages, including navigation, buttons, and data tables.

Patterns like login flows and empty states were systematized immediately, keeping the library relevant to real needs.

Accessibility

All components met WCAG AA standards, with built-in contrast ratios, clear error states, and keyboard navigation, making the system more inclusive.

All system colors passed AAA contrast checks, ensuring accessible text and UI

Adoption through communication

With no time for formal documentation, we relied on direct communication: a Slack channel for design system questions and weekly syncs with developers to update, clarify, and gather feedback.

work in action

The product page built with the system

This page demonstrates how the grid, spacing system, and reusable components worked together to keep the design consistent across screens.

Laptop mockup showing Lutron homepage built with the new design system, displaying consistent navigation and layout

Sample page layout built from design system components, with placeholder content

Impact

The difference we made

Faster design cycles with reusable components

Faster development through component reuse

100

UI consistency achieved across the product

All components met WCAG AA

Takeaways

Practical beats perfect

The most valuable systems are not the biggest; they are the ones that solve real problems.

By focusing on immediate needs and building reactively, we created a lean design system that powered design and development without slowing product delivery.

Testimonials

What people are saying

"Karyna consistently delivered top-tier work, driving a 95% customer satisfaction rating and a 25% increase in click-through rates for marketing campaigns."

Vinitha Upaassana

CEO & Founder, Perceive Now

"Karyna is extremely detail-oriented and has a great ability to solve complex design problems. She is a great communicator and works well in a team environment, always going the extra mile to ensure the success of the project."

Ashna Parekh

UX Designer, Perceive Now

“She was really good at communication, always listened to the feedback from developers and gave her feedback and suggestions. She is an amazing team player as well. Her designs are well thought, clean and good to the eyes.”

Santosh Bhandari

Full Stack Developer, Perceive Now

Design system for faster development

Inconsistency slowed us down

Convincing a feature-driven startup to value a system

Creating consistency across 50+ pages

How we approached it

Audit and gap analysis

Defining standards to keep work consistent

Build reactively, not upfront

Accessibility

Adoption through communication

The product page built with the system

The difference we made

Practical beats perfect

What people are saying

A showcase of my latest work — designed with purpose and impact

I'm just an email away :)