Building design system

Do startups really need a design system?

Do startups really need a design system?
Building design system from scratch

Jaewan Byun

Jaewan Byun

Product Designer @Lycle_Company

Background
Background
Background

Is a design system only necessary for large companies with plenty of design resources?
While building the design system at Lycle Company, I realized that fast-moving startups actually need a system even more. I wanted to take a step back and lay out why I decided to build a design system, how I approached the process, and the challenges I ran into along the way.

Examples of UI fragmentation in previous designs

Why did I decide to build a design system?
Why did I decide to build a design system?
Why did I decide to build a design system?

When I joined Lycle Company, the team was growing fast and new designers were starting to join. But the way we worked was still very much up to each individual. Every designer had a different style in their files, and even the same UI had to be rebuilt from scratch each time.



Some buttons were rounded, some had no shadow, and some weren’t even Figma components. These small inconsistencies added up. They led to repeated feedback loops, constant revisions, and burnout on the design side. Handoff with engineers became more and more draining.



Most importantly, the user experience started to feel different on every page.

Experience gaps in our previous workflow

Goal
Goal
Goal

I had two goals I was determined to deliver on.

I had two goals I was determined to deliver on.

For me, a design system isn’t just a tool for organizing components.
It’s the foundation that helps the whole team work with the same standards, move faster with experiments, and cut down on unnecessary communication.

Process
Process
Process

1. Research and Understanding

1. Research and Understanding

1. Research and Understanding

  • The first thing I did was to understand what we were building.

  • I reviewed the entire existing UI and organized duplicated elements and frequently used patterns one by one.

  • I also looked into design systems from similar B2C SaaS products to check which standards we were missing.

  • The first thing I did was to understand what we were building.

  • I reviewed the entire existing UI and organized duplicated elements and frequently used patterns one by one.

  • I also looked into design systems from similar B2C SaaS products to check which standards we were missing.

  • The first thing I did was to understand what we were building.

  • I reviewed the entire existing UI and organized duplicated elements and frequently used patterns one by one.

  • I also looked into design systems from similar B2C SaaS products to check which standards we were missing.

2. Establish Design Principles

2. Establish Design Principles

2. Establish Design Principles

Before jumping into components, we defined the principles we wanted to follow.
For LYTEM, we set these three as our core principles.

Design Principles of LYTEM

3. Define Basic Necessities

3. Define Basic Necessities

3. Define Basic Necessities

I started by organizing the core style elements that are shared across all screens. This included typography, color tokens, icons, and the layout system. I saw this foundation as the backbone of the design system and the most critical piece for driving visual consistency.

I started by organizing the core style elements that are shared across all screens. This included typography, color tokens, icons, and the layout system. I saw this foundation as the backbone of the design system and the most critical piece for driving visual consistency.

I started by organizing the core style elements that are shared across all screens. This included typography, color tokens, icons, and the layout system. I saw this foundation as the backbone of the design system and the most critical piece for driving visual consistency.

Defined LYTEM’s foundational styles

4. Organize Components with Prioritization

4. Organize Components with Prioritization

4. Organize Components with Prioritization

We started with the most commonly used components like buttons, input fields, and modals.
Our approach was to build what we needed first, then expand gradually. What mattered most was making sure every component behaved predictably across different situations.

Organizing components

5. Component review and quality check

5. Component review and quality check

5. Component review and quality check

The goal of a design system isn’t to make things look tidy. It needs to actually work.
So I carefully checked that each component functioned properly with Auto Layout and Variants, that master and instance relationships stayed intact, and that any updates to style tokens applied consistently across the system.

Page-level components

6. Handoff and Continuous Iteration

6. Handoff and Continuous Iteration

6. Handoff and Continuous Iteration

  • Collaborated with the engineering team to ensure proper implementation in Storybook.

  • Improved components based on feedback from real product usage.

  • Documented the design system and shared it through Notion and the Figma library so the entire team could use it easily.

  • Collaborated with the engineering team to ensure proper implementation in Storybook.

  • Improved components based on feedback from real product usage.

  • Documented the design system and shared it through Notion and the Figma library so the entire team could use it easily.

  • Collaborated with the engineering team to ensure proper implementation in Storybook.

  • Improved components based on feedback from real product usage.

  • Documented the design system and shared it through Notion and the Figma library so the entire team could use it easily.

Documentation in Figma and Notion

LYTEM: Lycle’s Design System
LYTEM: Lycle’s Design System
LYTEM: Lycle’s Design System

Foundation

Input components

Display components

Feedback components

Navigation components

Lessons from building LYTEM

Lessons from building LYTEM

Lessons from building LYTEM

Building a design system at a startup isn’t about tidying things up.

It’s about reducing chaos, speeding up collaboration, and most importantly, creating a shared language that helps deliver better experiences to users.


Since launching LYTEM, the team has been able to move faster. Design and engineering now stay in sync more easily whenever we ship new features. Most noticeably, the overall brand experience has become far more consistent across the product. In fast-moving startups, a design system isn’t a luxury. It’s a tool for survival.

Building a design system at a startup isn’t about tidying things up.

It’s about reducing chaos, speeding up collaboration, and most importantly, creating a shared language that helps deliver better experiences to users.


Since launching LYTEM, the team has been able to move faster. Design and engineering now stay in sync more easily whenever we ship new features. Most noticeably, the overall brand experience has become far more consistent across the product. In fast-moving startups, a design system isn’t a luxury. It’s a tool for survival.

Building a design system at a startup isn’t about tidying things up.

It’s about reducing chaos, speeding up collaboration, and most importantly, creating a shared language that helps deliver better experiences to users.


Since launching LYTEM, the team has been able to move faster. Design and engineering now stay in sync more easily whenever we ship new features. Most noticeably, the overall brand experience has become far more consistent across the product. In fast-moving startups, a design system isn’t a luxury. It’s a tool for survival.

more to explore.

Show More

Show More

Show More

TD Easy Trade Refresh

TD Easy Trade Refresh

TD Easy Trade Refresh

Increasing E-commerce Conversion Rate

Increasing E-commerce Conversion Rate

Increasing E-commerce Conversion Rate