This project focuses on building a scalable design system from scratch to unify the product and support long-term growth.

DESIGN SYSTEM

COMPONENT LIBRARY

B2B SAAS

Role:

UI Designer

Team:

Project Manager,

UI Designers, and Front-end Developers

Client:

Timeline:

6 - 8 weeks

As SCMable expanded, the product experience risked becoming fragmented. Without a shared component system, screens could become inconsistent, harder to maintain, and slower to build. The challenge was to create a scalable UI foundation that balanced operational complexity with clarity, while supporting future growth across multiple product areas.

The system was designed to achieve four key outcomes:

Improve accessibility and readability by achieving WCAG's contrast ratio

Reduce cognitive load through consistent interaction patterns

Enable reusable, scalable components to improve team efficiency

Establish a unified visual language aligned with Korean product aesthetics

Before defining the UI system, I worked with my team to explore Korean design aesthetics and digital product trends.

We created a visual research board to analyze:

• Color usage in Korean tech products

• Typography styles and hierarchy

• Layout density and spacing

• Visual tone (minimal, modern, high-tech)

During our research, we came across a perspective that helped frame our thinking:

"Globalization has changed the lifestyle of South Korea gradually, always followed by the design revolution, because designers must follow the prevailing theme in society and try to use their creative products or their designs to influence lifestyles."

This insight highlighted that design in Korea is not static. It evolves with cultural and societal shifts. The design is expected to feel current, forward-looking, and aligned with modern user expectations.

An isometric illustration style was introduced to help visualize complex supply chain workflows. This allowed multi-step processes and layered data relationships to feel more approachable and easier to understand.

The color palette was designed to communicate clarity, trust, and efficiency in a data-heavy environment.

All colors were tested to meet high accessibility standards, ensuring strong contrast and readability across dashboards, tables, and forms.

Noto Sans was chosen as the primary typography for SCMable since the typeface conveys professionalism and trustworthiness, reinforcing the platform's identity as a reliable and efficient supply chain solution. Its clean and modern design ensures optimal legibility across various screen sizes and resolutions, which is crucial for a platform with extensive data visualization and real-time updates. Its multilingual support also aligned with SCMable's international user base.

I developed a reusable component library that could scale across the platform, including:

• Buttons and action states

• Inputs, dropdowns, and form controls

• Navigation patterns

• Tables and data modules

• Cards and content containers

Each component was built with consistent spacing, hierarchy, and behavior rules to create a predictable experience across workflows.

The landing page features a dynamic gif illustration that showcases SCMable streamlining the supply chain process for seamless efficiency. SCMable offers various optimization algorithms quickly and accurately tailored to the client's business needs. I/O data can be uploaded and downloaded as Excel files. They can also be visualized using various formats such as charts or grids to help verify the values ​​of the data. Based on bidding information presented by vendors, SCMable offers optimal insights for demand forecasting and risk-mitigation.

The final system created a stronger foundation for product growth by improving consistency, usability, and development efficiency. Teams could design and ship faster using shared patterns, while users benefited from a more intuitive and trustworthy experience.

This project reinforced that great enterprise design is not only about aesthetics. It is about reducing friction in complex workflows. By creating scalable systems instead of isolated screens, I was able to design for both immediate usability and long-term product evolution.