Client Website Collection

Role

End-to-End Design & Engineering

Team

Solo

Timeline

2024–2025

Platform

Websites

00 / TL;DR

PROJECT
SUMMARY

Problem

Diverse clients (Medical, Space, Gov) needed to translate abstract services into concrete, trustworthy web narratives.

My Role

Solo Design & Development (Next.js, Tailwind).

Impact

Launched 4 responsive sites; established reusable component patterns; bridged design-engineering gap.

01 / OVERVIEW

THE
CONTEXT

Designed and developed 4 websites from concept to deployment. Focused on translating abstract services (coordination, philosophy, programs, curation) into concrete web narratives users can trust.

  • Seoul Mein: Turned an abstract "medical tourism concierge" service into a step-by-step booking funnel for overseas visitors.
  • Mi & Luq: Translated a spatial design studio's abstract philosophy into a tangible digital brand experience.
  • Buan Workation: Designed an information architecture that communicates both program logistics and the atmosphere of a forest workation.
  • HYPE ON: Structured diverse local travel content into a curated catalog, making discovery easy for global travelers.

02 / CHALLENGE

PROBLEM &
CONSTRAINTS

Three core challenges emerged across all projects:

1. Making Intangible Services Tangible

Had to visualize coordination processes (Seoul Mein), abstract philosophies (Mi & Luq), and regional experiences (Buan, HYPE ON) into trustworthy information.

2. Industry Specificity vs Common Patterns

Required balancing diverse industry needs (Medical, Design, Gov, Travel) with maintainable, reusable web patterns (Hero, Process, FAQ, Inquiry).

3. Global vs Local Audiences

Designed messaging hierarchies differently for Global travelers (Seoul Mein, HYPE ON) versus Local/Regional identity (Buan, Mi & Luq).

Three Core Challenges

1
Making intangible services tangible
Trust signals
Language solutions
Journey visualization
2
Balancing specificity with common patterns
Hero value prop
Process intro
FAQ/guidance
3
Serving global and local audiences
Language priority
Message hierarchy
Info architecture

03 / PROCESS

KEY
DECISIONS

Applied a consistent workflow, adjusting depth by service:

  • 1. Requirements & Brand

    Defined business model and tone before structure (e.g., Seoul Mein: "Coordination service, not a hospital").

  • 2. Information Architecture (IA)

    Established common patterns (Value Prop, Process, FAQ) with differentiation (Seoul Mein: Trust/Process, HYPE ON: Catalog).

  • 3. Visual & Component Design

    Designed reusable components (Cards, Lists, Tabs) for productivity. Used "Image-first" layouts for experiential sites.

  • 4. Development & Launch

    Built responsive, accessible sites with Next.js/Tailwind. Component-based architecture ensures future scalability.

Consistent Workflow

1
Requirements & Brand

Business model, audience, core messages

2
Wireframing & IA

Common patterns + service differentiation

3
Visual & Components

Reusable component library

4
Development & Launch

Responsive layout + accessibility

04 / OUTCOME

IMPACT &
RESULTS

Successfully delivered 4 websites across distinct industries.

  • Seoul Mein: Trust-centered landing page for complex coordination, converting to WhatsApp.
  • Mi & Luq: Branding site combining abstract philosophy with studio history.
  • Buan Workation: Structured program info around "Sea & Forest" with application guide.
  • HYPE ON: Web catalog for easy exploration of curated local content.

Growth: Leveraging AI for coding allowed me to gain extensive knowledge in web development. I learned to bridge the gap between design and engineering, understanding how to build scalable and responsive web applications.

Next Project

SUBUP Workspace

View Case Study