# Customer Portal Overhaul — Concept Report

- Status: Design reference only (not application runtime)
- Scope fence: `docs/design-references/customer-overhaul/` only
- Language: Traditional Chinese Hong Kong (`zh-Hant-HK`)
- Creative thesis: **「營期在抵達前已經開始」** — Your camp journey begins before arrival

---

## Phase 1 — Why the current design is only a subtle variation

### What exists today

Two customer presentations already exist:

1. **Editorial** — ivory canvas, serif editorial headings, large 4:5 camp cards, two-column sticky summary wizard, three-zone brand header.
2. **Service-track（營務軌道）** — warm sand-linen canvas, compact brand bar, **persistent five-stage horizontal service track**, stage panel + row lists, guided chips, expandable quote strip, centered payment station.

Service-track improved wayfinding versus Editorial, but it remains a **service-desk product** with a different paint job:

| Structural pattern | Editorial | Service-track | Why both fail a hard redesign gate |
|---|---|---|---|
| Shell | Centered brand header | Compact brand bar + top track | Still app-chrome + secondary chrome, not destination-first |
| Progress | Wizard stepper only | Global 5-stage track every page | Same “pipeline of stages” mental model |
| Home | Booking card grid | Stage panel + list rows | Both are status lists, not trip planning |
| Availability | Multi-field form + cards | Guided Q&A + camp option cards | Still form-then-cards; photos remain option media |
| Booking | Two-column sticky summary | One-step + quote strip | Both form workspaces with summary dock |
| Detail | Card grid | Milestone spine | Timeline still administrative |
| Canvas | Ivory | Sand-beige | Warm neutral civic canvas family |
| Components | Nested white cards | Single-layer white panels | Same rounded surface vocabulary |
| Motion | Light fade | Stagger fade + track pulse | Subtle, not journey-scale |

### Grayscale structural comparison (mandatory gate)

If both designs are desaturated:

- Both read as **narrow-to-medium centered columns of white panels** under a **horizontal chrome strip**.
- Both use **badge + heading + paragraph + button** blocks.
- Both treat photography as **media inside cards**, not as page architecture.
- Both navigate via **text link rows**, not spatial destination/zone wayfinding.

**Verdict:** Service-track is a strong UX refinement of Editorial, not a different product. A redesign must discard the patterns below entirely—not recolor them.

### Patterns that must be discarded

1. **Global horizontal five-stage service track** on every screen  
2. **Sand / ivory / beige dominant canvas**  
3. **Max-width ~880px centered form stack** as the default composition  
4. **Stage-panel + row-list** as the home pattern  
5. **Card-grid / option-card** as the only results language  
6. **Kicker + serif H1 + subtitle** page heading formula repeated everywhere  
7. **Sticky summary-as-card** or quote strip as the only booking context  
8. **Small square thumbs** for campsites on list screens  
9. **Pipeline / portal** navigation mental model (service stages)  
10. **Decorative multi-hue hairline under brand bar** as primary identity cue  

---

## Phase 2 — Three radical concepts

Scoring (1–5 each): Distinctiveness · Usability · PLK credibility · Holiday energy · Accessibility · Feasibility. Max 30.

### Concept A — `行前旅程` (Journey Before Arrival) ★ selected

| Dimension | Direction |
|---|---|
| **Thesis** | Booking is trip preparation. The UI is a pre-arrival itinerary workspace: destination first, then route markers for what to complete before camp day. |
| **Composition** | Full-bleed panoramic destination headers; asymmetric **vertical journey rail** (desktop) + main stage; day-by-day itinerary panels; equipment-tag fact rows. Not a card marketplace. |
| **Navigation** | Destination-led shell: compact brand chip, journey rail phases (`選營 → 組裝行程 → 確認費用 → 行前準備 → 入營`), mobile bottom dock. No global horizontal stepper. |
| **Palette** | Sky mist `#E8F4FC`, clean white, active green `#0D9F4F`, clear sky `#2B9BD6`, sunrise `#F2B91F`, coral/vermilion `#E5473A`, dark neutral `#15202B`. No beige canvas. |
| **Typography** | Expressive destination display (system serif TC); highly legible HK sans UI ≥14px; prices/dates/capacity oversized tabular hierarchy. |
| **Photography** | Structural: edge-to-edge heroes, immersive result scenes, booking context photo walls. Light only—no dark subject-obscuring overlays. |
| **Motion** | Cinematic photo entrances, staggered destination reveals, route-marker transitions, expanding itinerary, success transformation (no confetti). 180–600ms; `prefers-reduced-motion`. |

| Distinct. | Usability | PLK | Energy | A11y | Feas. | **Total** |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| 5 | 5 | 5 | 5 | 5 | 4 | **29** |

**Risks:** Photo crop quality; vertical rail on short viewports. **Mitigation:** reserved aspect ratios; compact mobile route ribbon.

### Concept B — `營區地圖` (Campsite Zone Map)

| Dimension | Direction |
|---|---|
| **Thesis** | The portal is a living campsite map: zones, capacity heat, plot-like room selection. |
| **Composition** | Map-first canvas with zone polygons, list as secondary. |
| **Navigation** | Zone legend + map layers; booking as “claim plot.” |
| **Palette** | Lawn green field, trail brown paths, marker yellow—risk of looking like a GIS tool. |
| **Photography** | Map overlays on photos; can fight readability. |
| **Motion** | Pan/zoom risk for a11y and CLS. |

| Distinct. | Usability | PLK | Energy | A11y | Feas. | **Total** |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| 5 | 3 | 3 | 4 | 2 | 2 | **19** |

**Reject for production mock pack:** Map interaction + a11y cost too high for static functional parity.

### Concept C — `裝備清單` (Kit List Desk)

| Dimension | Direction |
|---|---|
| **Thesis** | Everything is a preparation checklist with equipment tags and stamped documents. |
| **Composition** | Vertical packing-list columns; ticket stubs for bookings. |
| **Navigation** | Checklist progress only; weak destination discovery. |
| **Palette** | Paper white + stamp red + string green—can feel stationery-admin. |
| **Photography** | Secondary to list chrome. |
| **Motion** | Check-off ticks; low holiday energy. |

| Distinct. | Usability | PLK | Energy | A11y | Feas. | **Total** |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| 4 | 4 | 5 | 2 | 4 | 4 | **23** |

**Reject:** Strong for documents/group forms; weak for availability joy and outdoor holiday mood.

### Reskin rejections

- Recoloring service-track green→sky while keeping the 5-stage track  
- Swapping sand for blue-grey and keeping card grids  
- “Travel OTA” clone with ratings/discounts/urgency  

None pass the grayscale product-identity gate.

---

## Phase 3 — Selection & structural differences

### Selected: `行前旅程`

It maximizes holiday anticipation **and** PLK credibility without maps or gimmicks, covers all eight screens with one system, and remains implementable as static HTML with full field density.

### Structural differences vs service-track (before color)

| Concern | Service-track | 行前旅程 |
|---|---|---|
| Progress chrome | Full-width horizontal 5-stage track | Vertical journey rail + page-local route ribbon |
| Page width | ~880 centered | Full-bleed photo + fluid main (rail + stage) |
| Home | Next-action panel + list rows | Destination hero of next camp + itinerary stack by lifecycle |
| Availability | Guided chips + option cards | Immersive destination scenes with capacity meters & filter tray |
| Booking | One-step form + quote strip | Reservation workspace with sticky itinerary spine |
| Group | Same shell as individual | Organization dossier with branch banner (distinct structure) |
| Payment | Centered station card | Payment desk with photo context strip + method ledger |
| Detail | Milestone list | Day-by-day trip panels + prep workspace |
| Documents | Flat rows | Travel-document folders (required / pending / accepted / historical) |
| Profile | Single form column | Service desk: identity wall + contact preferences + org associations |
| Mobile | Compact track + sticky CTA | Bottom dock + floating primary; no crowded horizontal stepper |

### Screen-by-screen specification summary

1. **Dashboard** — Next camp immersive hero; primary action floating in hero; sections: 進行中 / 即將入營 / 已完成 / 已取消 as itinerary stacks (not tables).  
2. **Availability** — Richest visual: filter tray (party, dates, camp, headcount); full-width result scenes; capacity comparison bar; full/limited/unavailable without sales pressure.  
3. **Individual booking** — Guided reservation workspace: campsite context photo, step chapters as route markers, participants, accommodation, add-ons, charges, validation moments.  
4. **Group application** — Organization workflow: identity, contact, participant breakdown, eligibility, category, discount status, documents, date-dependent payment branch banner.  
5. **Mock payment** — Explicit simulation desk; amount; deposit/full; methods; failure/retry; celebratory success (calm transform).  
6. **Booking detail** — Trip itinerary + prep: status, milestones as days, imagery, stay, participants, accommodation, charges, payment, documents, next actions.  
7. **Document centre** — Travel-document model: required, pending, accepted, generated, historical.  
8. **Profile** — Personal details, contact preferences, organization associations, account/SRMS status.

### Component inventory

`BrandChip` · `JourneyRail` · `RouteRibbon` · `MobileDock` · `PhotoHero` · `ItineraryStack` · `TripPanel` · `DestinationScene` · `CapacityMeter` · `FilterTray` · `EquipmentTag` · `ChargeLedger` · `QuoteSpine` · `BranchBanner` · `PaymentDesk` · `DocFolder` · `StatusSeal` · `PrimaryFab` · `FormChapter` · `ValidationBoard`

### Functional parity (non-negotiable)

Same routes, seeded IDs, validation outcomes, payment simulation boundary, RBAC/session assumptions, and failure/retry paths as existing customer portal. Staff/finance/admin/mobile untouched. Official PLK logo unchanged. No remote fonts or external images.

---

## Approval note

This pack is a **design reference** under `docs/design-references/customer-overhaul/`. It does not modify application code, source docs, or the project board.