<aside>

👋 Introduction

About Me

Hi! I’m the UI/UX Designer behind the Melon Space Design System. I specialize in creating thoughtful, scalable design systems that bring consistency, clarity, and smooth collaboration between design and development teams. With a strong focus on user experience, accessibility, and clean design language, I aim to make sustainable digital products not only functional—but delightful to use.

About the Melon Space Design System

The Melon Space Design System is a comprehensive and reusable design framework created to support all three Melon Space platforms: Store, Learning Hub, and Fashion. It helps teams work more efficiently by providing ready-to-use components, consistent style guidelines, and a shared language between design and development.

Our goal is to reduce design inconsistencies, speed up feature rollouts, and improve user experience—all while staying true to Melon Space’s eco-friendly, approachable, and human-centered brand identity.

</aside>

Project Overview

Melon Space is an online store specializing in eco-friendly and sustainable products. The product range includes reusable and biodegradable household items, eco-friendly personal care products, sustainable fashion and accessories, and educational content on sustainable living.

The brand consists of three key areas:

1. Melon Space Store – An e-commerce platform selling sustainable goods.
2. Melon Space Learning Hub – A content-rich website offering educational resources on sustainable living.
3. Melon Space Fashion – A fashion-focused platform featuring sustainable clothing and accessories.

Brainstorming Based on Project Overview

• Stakeholders provided two brand logo styles.
• The brand logo features three main colors: pink-red, yellow, and green.
• We chose green as the primary brand color because it reflects the natural experience sustainable product users expect.
• Pink-red and yellow were used as accent colors and renamed for clarity in design tokens:
  • Asparagus (Green)
  • Dandelion (Yellow)
  • Froly (Pink-Red)
• Neutral range: From #383d44 to #ffffff.

Information Architecture

• Started with IA planning for all three websites.
• Defined key pages and navigational flows.
• Documented potential components based on page structure.