Project Overview

<aside> Melon Space is a digital ecosystem that includes three platforms: Melon Store, Melon Learning Hub, and Melon Fashion. This design system helps all platforms stay visually consistent and easy to use. It provides shared styles, components, and guidelines for both designers and developers. The main goal is to create a smooth and eco-friendly user experience while saving time and keeping the brand clear across all products.

</aside>

Process

• Research - Explore user needs, brand values, and design best practices.
• Build Foundations - Create core styles such as color, typography, spacing, and elevation.
• Create Components Library - Build a library of reusable UI elements to keep designs consistent and efficient.
• Documentation - Create easy guidelines to support consistent use of the design system.

Building Wireframe

Firstly, We built wireframes for the Melon Space platforms—Store, Learning Hub, and Fashion—to explore user needs, define key design patterns, and create a solid foundation for the overall experience.

Pilot Scoring

After completing product development, We did pilot scoring to check which parts could be reused, like components and tokens. This helped us build a shared library for the next products.

Design System Roadmap

Our roadmap guides the step-by-step growth of the Melon Space Design System to ensure consistency and scalability.

View Details → FigJam

we began the synthesis phase by carefully analyzing each component’s anatomy, types, sizes, and styles. This process helped us organize components effectively and maintain consistency throughout the system.