withgoods is a creator-focused merchandise platform by Zero Space Inc., allowing artists to easily upload their artwork and generate products automatically. This enables them to run their own art shops and launch small businesses. As the UI/UX designer, I led user research, redesigned key screens, and visualized new feature updates.
Overview
The company’s fast-paced feature releases required frequent user testing and consistent UI improvements. However, the absence of standardized components made it difficult to apply new designs efficiently. Recognizing the long-term value of design guidelines, I advocated for their introduction and took full ownership of building and expanding the design library while continuing other design work.
Apporach
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
Designing additional components & markup the codes
Designed secondary components and applied CSS/JavaScript markup to speed up implementation.
4
Adding, revising, iterating
Continuously added, refined, and adjusted components based on evolving needs.
Principle
To create the design guidelines, I conducted extensive research on various companies’ design systems. Through this process, I became familiar with Atomic Design principles and applied them to structure components effectively.
Following these principles, I built the design library by defining, synthesizing, and organizing components from atomic-level units to full templates.
Atoms
Molecules
Organisms
Templates
Design Library
The main goal of the design library was to ensure consistency and efficiency. I avoided unnecessary complexity to keep elements development-friendly and easy to implement. Each component was built for reuse, compatible with various layouts, and documented clearly to support 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.
Outcome
Creating this design library led to several positive outcomes. Most notably, it reduced the average UI design time for new features by over 60%—from about 5–7 days to just 2 days—by enabling reuse of pre-built components.
It also improved communication across the team. Explaining designs to developers became faster and clearer, saving time and reducing friction. In addition, non-designers familiar with Figma—such as product managers—were able to reuse components independently, encouraging smoother cross-functional collaboration.
Reflection
Working as a solo designer, I had to make foundational decisions independently, often navigating unfamiliar areas without a predefined system. While time and workload constraints limited how far I could scale the library, the process deepened my understanding of system thinking, documentation, and scalable design practices.
Looking back, I now see areas where I could have done better—particularly in accessibility and structural clarity. These reflections have shaped how I design today, with greater focus on inclusivity, collaboration, and long-term usability.
This experience laid the foundation for my next design system work. With a clearer understanding of tokens, structure, and cross-platform consistency, I was able to build more robust and scalable systems in later projects.
