Works
About
B-Sides

withgoods Design Library

withgoods Design Library

Led the creation of withgoods' first design library, reducing UI design time by 60% and enabling seamless collaboration between designers and developers on Korea's leading creator merchandise platform.

Role

UX/UI Designer, Project Lead

Collaboration

1 Content Designer, 2 Developers

Timeline

Jun 2022 - Feb 2023

Platform

Responsive Web

Outcome

60% faster design process 40% faster launch timeline

Context

Fast-growing sustainable creator platform needed design consistency at scale

withgoods is a South Korean merchandise platform serving 50,000+ MAU who upload artwork and generate sustainable products automatically. As the social enterprise rapidly expanded from B2C to B2B markets, inconsistent UI patterns were slowing development cycles. I led the initiative to create the company's first design system to address this challenge.

Fast-growing sustainable creator platform needed design consistency at scale

withgoods is a South Korean merchandise platform serving 50,000+ MAU who upload artwork and generate sustainable products automatically. As the social enterprise rapidly expanded from B2C to B2B markets, inconsistent UI patterns were slowing development cycles. I led the initiative to create the company's first design system to address this challenge.

Fast-growing sustainable creator platform needed design consistency at scale

withgoods is a South Korean merchandise platform serving 50,000+ MAU who upload artwork and generate sustainable products automatically. As the social enterprise rapidly expanded from B2C to B2B markets, inconsistent UI patterns were slowing development cycles. I led the initiative to create the company's first design system to address this challenge.

Challenge

Multiple concurrent demands creating design bottlenecks

The platform faced three simultaneous challenges: rapid user testing cycles requiring frequent redesigns, new UI designs needed for added features, and rebranding efforts to meet evolving business goals. Without standardized components, each initiative required building interfaces from scratch, creating significant inefficiencies.

Multiple concurrent demands creating design bottlenecks

The platform faced three simultaneous challenges: rapid user testing cycles requiring frequent redesigns, new UI designs needed for added features, and rebranding efforts to meet evolving business goals. Without standardized components, each initiative required building interfaces from scratch, creating significant inefficiencies.

Multiple concurrent demands creating design bottlenecks

The platform faced three simultaneous challenges: rapid user testing cycles requiring frequent redesigns, new UI designs needed for added features, and rebranding efforts to meet evolving business goals. Without standardized components, each initiative required building interfaces from scratch, creating significant inefficiencies.

Solution

Systematic approach from analysis to code implementation

I built withgoods' first design system through a comprehensive 4-step process: starting with component auditing and prioritization, then building production-ready components with CSS/JavaScript markup, and continuously iterating based on team feedback. This systematic approach ensured both design consistency and seamless developer handoff.

Systematic approach from analysis to code implementation

I built withgoods' first design system through a comprehensive 4-step process: starting with component auditing and prioritization, then building production-ready components with CSS/JavaScript markup, and continuously iterating based on team feedback. This systematic approach ensured both design consistency and seamless developer handoff.

Systematic approach from analysis to code implementation

I built withgoods' first design system through a comprehensive 4-step process: starting with component auditing and prioritization, then building production-ready components with CSS/JavaScript markup, and continuously iterating based on team feedback. This systematic approach ensured both design consistency and seamless developer handoff.

1

Creating a sitemap &

identifying components

Created a full product overview to identify the components currently in use.

2

Creating components 

based on priority

Started with primary components, prioritizing those used most frequently.

3

Building components with code markup

Built production-ready components with CSS/JavaScript to ensure seamless developer handoff.

4

Adding, revising, iterating

Continuously added, refined, and adjusted components based on evolving needs.

Growing design consistency from foundation to full ecosystem

Following Atomic Design principles, I structured the library from foundational elements to complex components. Starting with typography, colors, and grid systems as atoms, I built increasingly complex molecules and organisms that ensure consistency across all interfaces. Each component was designed for reusability and documented to support seamless developer collaboration.

Growing design consistency from foundation to full ecosystem

Following Atomic Design principles, I structured the library from foundational elements to complex components. Starting with typography, colors, and grid systems as atoms, I built increasingly complex molecules and organisms that ensure consistency across all interfaces. Each component was designed for reusability and documented to support seamless developer collaboration.

Growing design consistency from foundation to full ecosystem

Following Atomic Design principles, I structured the library from foundational elements to complex components. Starting with typography, colors, and grid systems as atoms, I built increasingly complex molecules and organisms that ensure consistency across all interfaces. Each component was designed for reusability and documented to support seamless developer collaboration.

Grid System

Content was segmented into desktop and mobile views based on screen resolution. The layout followed a 4-point grid system, using spacing units in multiples of 4 or 8.

Typography

The primary typeface is Pretendard, based on Noto Sans KR and Inter. It supports four weights—400, 500, 600, and 700—and is used consistently across all components.

Colors

Apply colors according to context and hierarchy. The palette is divided into grayscale fundamentals, brand accents, informative tones, and error states.

Icons

Use 24px as the base size, scaling in 4px increments as needed. The library combines Carbon icons from IBM with custom-made icons for specific features.

Menu

A sidebar element used for navigation. It helps users switch pages or display different content based on selection.

Tabs

Used for local navigation between subsections.

Buttons

Buttons allow users to take action. Icons support usability, and styles vary based on hierarchy and use case.

Snackbar

Briefly displays important information related to user actions, typically in the top-right corner.

Tag

Used to display brief additional information or highlight statuses.

Tooltips

Provides contextual information, appearing on hover or click.

Header

Locates at the top as a navigation element on a webpage, allowing users to navigate between pages.

Items

Built from multiple Molecules, these components function as Organisms with specific purposes.

Result

Faster design process and smoother team collaboration

Creating this design library led to several positive outcomes across design efficiency and product development velocity. The systematic approach transformed both individual designer productivity and overall team collaboration, establishing a scalable foundation for withgoods' continued growth.

60% Faster Design Process

The design library reduced UI design time from 5-7 days to 2 days per feature through reusable components. The system provided consistency and efficiency, allowing designers to focus on user problems rather than recreating interface elements.

40% Faster Launch Timeline

Streamlined workflow reduced feature launch timelines with faster handoff processes. Product managers could rapidly design features using the component system in Figma. This eliminated design bottlenecks and accelerated delivery across the platform.

Faster design process and smoother team collaboration

Creating this design library led to several positive outcomes across design efficiency and product development velocity. The systematic approach transformed both individual designer productivity and overall team collaboration, establishing a scalable foundation for withgoods' continued growth.

60% Faster Design Process

The design library reduced UI design time from 5-7 days to 2 days per feature through reusable components. The system provided consistency and efficiency, allowing designers to focus on user problems rather than recreating interface elements.

40% Faster Launch Timeline

Streamlined workflow reduced feature launch timelines with faster handoff processes. Product managers could rapidly design features using the component system in Figma. This eliminated design bottlenecks and accelerated delivery across the platform.

Faster design process and smoother team collaboration

Creating this design library led to several positive outcomes across design efficiency and product development velocity. The systematic approach transformed both individual designer productivity and overall team collaboration, establishing a scalable foundation for withgoods' continued growth.

60% Faster Design Process

The design library reduced UI design time from 5-7 days to 2 days per feature through reusable components. The system provided consistency and efficiency, allowing designers to focus on user problems rather than recreating interface elements.

40% Faster Launch Timeline

Streamlined workflow reduced feature launch timelines with faster handoff processes. Product managers could rapidly design features using the component system in Figma. This eliminated design bottlenecks and accelerated delivery across the platform.

Reflection

Lessons in Cross-Platform Consistency and Collaborative Design Systems

This foundational project fundamentally shifted my approach from isolated design execution to systematic design thinking at organizational scale. The experience of building design infrastructure independently provided invaluable insights into scalable design practices, emphasizing the critical importance of accessibility considerations and cross-platform consistency from the system's inception. Moving forward, I would prioritize earlier stakeholder education on design system benefits and implement more robust usage analytics to measure component adoption rates, ensuring sustained system evolution and organizational design maturity.

Lessons in Cross-Platform Consistency and Collaborative Design Systems

This foundational project fundamentally shifted my approach from isolated design execution to systematic design thinking at organizational scale. The experience of building design infrastructure independently provided invaluable insights into scalable design practices, emphasizing the critical importance of accessibility considerations and cross-platform consistency from the system's inception. Moving forward, I would prioritize earlier stakeholder education on design system benefits and implement more robust usage analytics to measure component adoption rates, ensuring sustained system evolution and organizational design maturity.

Lessons in Cross-Platform Consistency and Collaborative Design Systems

This foundational project fundamentally shifted my approach from isolated design execution to systematic design thinking at organizational scale. The experience of building design infrastructure independently provided invaluable insights into scalable design practices, emphasizing the critical importance of accessibility considerations and cross-platform consistency from the system's inception. Moving forward, I would prioritize earlier stakeholder education on design system benefits and implement more robust usage analytics to measure component adoption rates, ensuring sustained system evolution and organizational design maturity.

Previous Project

Veggie Hunter

Previous Project

Veggie Hunter

Previous Project

Veggie Hunter

Next Project

Accessibility Design Handoff Kit

Next Project

Accessibility Design Handoff Kit

Previous Project

Accessibility Design Handoff Kit
Email
soyeon.design@gmail.com
Resume ↗
LinkedIn ↗

@ 2025 Soyeon Kim.

Email
soyeon.design@gmail.com
Resume ↗
LinkedIn ↗

@ 2025 Soyeon Kim.

Email
soyeon.design@gmail.com
Resume ↗
LinkedIn ↗

@ 2025 Soyeon Kim.

Context

Challenge

Solution

Result

Reflection

Context

Challenge

Solution

Result

Reflection

Index