Blocto_Design System – ELDESIGNER

Core｜Team Play

Background

Collaborated with the design team to establish a Design System, defining UI components, typography, color, and reusable elements for consistent and scalable design.

Goal

Refined the Design System.

My Role

Product Designer, refined the Design System by planning UI components and establishing design guidelines.

Duration

2 years (2022-2024)

Tools

Figma

📍Problem Statement & Research

Pain Points

Inconsistent design across pages—buttons, typography, and colors lacked uniformity, leading to user confusion. Additionally, development efficiency suffered as designers and developers repeatedly modified duplicate components.

Research

Through designer and developer interviews, we identified the lack of standardized guidelines as the key pain point. A UI audit further revealed multiple inconsistencies in existing elements.

Insight

A standardized Design System with reusable components and clear guidelines was essential to ensure consistency, improve efficiency, and scale design effectively.

📍Design Process

Component Library

Built a scalable component library in Figma, including buttons, inputs, and cards with defined states (primary, secondary, disabled).
Established core colors, typography scales, and modular components (e.g., buttons with 5 sizes, 3 styles).

Design Guidelines

Documented rules for spacing, typography, colors, and interactions to ensure consistency across platforms.

Prototyping & Testing

Collaborated with developers for pixel-perfect implementation and conducted multiple iterations of testing to optimize web and mobile performance.

📍Page Showcase

📍Outcomes & Observations

Design Outcomes

Developed standardized UI components and guidelines to ensure cross-platform consistency and reduce communication costs in design.

Future Improvements

Introduce automation tools to simplify component updates.

Impact / Value

Unified UI reduced inconsistencies, shortened design time, and accelerated team collaboration and product iteration.

📍Learnings & Reflections

・By working closely with the development team, we ensured the feasibility and smooth implementation of the system.
・One key challenge was underestimating the effort required to maintain documentation. This oversight led to additional time being spent on updates during later stages.
・To address this in future projects, I plan to adopt automation tools (such as Figma plugins) to streamline component updates and reduce manual workload.