Hwahae - design system

SEON-
MYEONG
KIM

Hwahae Design System

Hwahae has been operating for 10 years, during which many services have come and gone, resulting in an accumulation of design and development code legacy. As of 2023, with the start of international business, there arose a need for expansion in design and code. To address the accumulated legacy and reduce future design and code debt, we decided to implement a design system.

화해는 10년 동안 운영된 사이트로, 그동안 많은 서비스가 생기고 사라지며 디자인과 개발 코드의 레거시가 쌓여왔습니다. 2023년을 기준으로 해외 사업을 시작하면서 디자인과 코드 확장이 필요해졌기 때문에, 그동안의 레거시를 정리하고 미래의 디자인과 코드 부채를 줄이기 위해 디자인 시스템을 도입하게 되었습니다.

UX 100% ・ UI 100%

Dec. 2022 - Sep. 2023

Figma ・ Protopie

iOS ・ Android ・ Web

Plan

Objective
Apply data obtained from legacy analysis to actual projects according to the OKR schedule. This allows makers to focus on product quality and better methodologies.

Preparation
Ensure all designers and developers adhere to the same philosophy when creating products. To achieve this, enforce the use of consistent language and tone across the team.

Implementation
Each team applies a certain percentage of the design system with every project release. During this process, pay attention to verifying that the animations in the prototypes match the actual development to avoid compromising usability.

Verification Method
Measure adoption rate in development and Figma as a quantitative method. Additionally, gather qualitative feedback from the makers to ensure the design system is working effectively and make improvements as needed.

목표
레거시 분석을 통해 얻은 데이터를 바탕으로 OKR 일정에 맞춰 실제 프로젝트에 적용합니다. 이를 통해 메이커들이 제품의 퀄리티와 더 나은 방법론에 집중할 수 있도록 합니다.

사전준비
모든 디자이너와 개발자가 동일한 철학을 가지고 제품을 제작하도록 유도합니다. 이를 위해 같은 톤의 언어를 사용하도록 관철시키는 작업이 필요합니다

실제 적용
각 팀은 프로젝트를 릴리즈할 때마다 일정 비율로 디자인 시스템을 적용합니다. 이 과정에서 사용성을 해치지 않도록 애니메이션 테스트를 통해 프로토타입과 실제 개발이 매칭되는지 검증에 유의합니다.

검증 방법
개발과 피그마에서 adoption rate를 측정하는 정량적 방법과 실제 메이커들의 정성적 후기를 통해 디자인 시스템이 잘 작용하고 있는지 검증하고 개선합니다.

HDS Structure

Using Foundation, I create atomic-level components that cannot be further divided. These components serve as the building blocks for constructing templates through combinations.

Foundation을 사용하여 더이상 쪼갤 수 없는 Atomic단위의 Component를 만듭니다.
Component의 조합으로 Template을 구성 할 수 있습니다.

Hierarchy

Starting with the creation of a design system, we establish writing principles, UI guidelines, and the rationale behind the design direction, clarifying the desired user experience and image of the product, ensuring that all makers are aligned with the core philosophy and values.

디자인 시스템 제작을 시작점으로 하여 writing 원칙, UI 원칙을 수립하고, 디자인 시스템의 방향성 설정 및 제품 경험에서 기대하는 느낌과 이미지를 명확히 하여, 모든 메이커가 일관된 철학과 핵심 가치를 공유하고 실현할 수 있도록 합니다.

Brand Essense

Using Foundation, I create atomic-level components that cannot be further divided. These components serve as the building blocks for constructing templates through combinations.

Product Visual Design

Using Foundation, I create atomic-level components that cannot be further divided. These components serve as the building blocks for constructing templates through combinations.

+61 467336405

Index Next →

SEON- MYEONG KIM

SEON-
MYEONG
KIM