返回作品列表

活動網站設計 / 營運工具設計 · 2026

文南循環市集|Wennan ReMarket

把第一次社區二手拍賣活動整理成居民可理解、主辦單位可維護的數位體驗。

角色

UI 設計、資訊架構、前端實作、AI 協作流程

成果

將公開活動資訊與內部營運資料分流,讓居民快速查詢重點,也讓主辦單位追蹤攤位、財務、RSVP 與留言流程。

工具與技術

HTML · CSS · JavaScript · GSAP · Netlify Functions · Resend · Python · Codex

Wennan ReMarket Website and Operations Dashboard Preview

專案定位

不只是活動頁,而是一套地方活動資訊系統

此專案協助文南里籌備第一次社區二手拍賣市集。公開網站負責介紹活動與回答居民常見問題,內部 Dashboard 則協助主辦單位掌握籌備狀態。

角色與範圍

負責 IA、UI、前端實作與 AI 協作交付

我負責整理活動資訊、設計公開網站體驗、實作靜態網站與互動、串接聯絡流程,並使用 Codex 加速專案規劃、內容迭代、圖片方向、QA 與資料工具整理。

問題背景

第一次活動需要清楚資訊,但不能外露未整理好的營運資料

居民需要快速確認時間、地點、入場方式、雨天備案與聯絡管道;主辦單位也需要追蹤攤位、財務、RSVP 與風險,但這些內容不適合混進公開網站。

設計目標

讓活動資訊可信、簡單,而且容易維護

設計目標是在第一眼建立活動記憶,同時讓細節容易掃讀。網站使用單頁品牌舞台、四個 modal 分類、清楚卡片與克制動效,讓循環概念成立,但不干擾活動資訊。

關鍵設計決策

將公開理解與內部決策分開設計

  • 公開導覽收斂為關於、活動資訊、公告與聯絡我們四類,避免提前曝光攤位名單或營運細節。
  • 使用 modal 式漸進揭露,讓居民停留在活動品牌舞台中,同時查閱更深層的活動資訊。
  • 將攤位進度、財務、RSVP、風險提醒與資料來源整理到內部 Dashboard,並由籌備資料生成。

主要畫面展示

以快速理解活動為核心的公開網站

公開網站畫面展示如何把品牌印象、活動資訊、公告與聯絡流程拆成居民容易進入的資訊入口。

文南循環市集首頁,包含活動標誌、日期、地點與市集背景照片。
首頁:以單屏品牌舞台讓活動名稱、日期與地點在第一眼成立。
活動資訊 modal,呈現時間、流程、攤位說明、入場須知與現場地圖。
活動資訊:將時間、流程、攤位規則、入場與交通依居民查詢任務分組。
公告 modal,包含攤位結果公告、現場提醒、天候備案與 FAQ。
公告:以公告與 FAQ 降低活動前主辦單位重複回覆成本。

營運工具案例

為籌備判斷建立內部 Dashboard

Dashboard 不放進公開部署範圍,而是整理攤位進度、財務、RSVP 狀態與風險提醒,讓主辦單位快速判斷接下來要處理什麼。

  • 將公開建立信任的內容與私有營運狀態、來源資料分開。
  • 使用 KPI 卡片、進度環、長條圖與行動提醒,讓籌備狀態可快速掃讀。
內部營運 Dashboard,呈現攤位進度、財務狀態、RSVP 完成率與優先行動提醒。
Dashboard:上半部聚焦彙總狀態與行動提醒,不曝光原始來賓名單。

AI 協作流程

用 Codex 加速流程,但保留設計判斷

Codex 協助專案規劃、文案迭代、實作檢查、素材方向與資料工具整理;真正的設計決策仍圍繞受眾任務、資訊邊界、公共信任感與可維護性。

  • 把 AI 作為協作者,用來整理方案、找出一致性落差,並加速重複性的實作工作。
  • 作品集敘事聚焦設計主導權,而不是把專案描述成 AI 自動生成。
聯絡 modal,包含主辦單位資訊與留言表單。
聯絡流程:公開網站將不確定問題導向可追蹤的留言表單路徑。
成果與驗證

驗證重點放在公開網站是否能快速說明活動、內部營運資料是否分流,以及主辦單位是否保有可維護的籌備流程。

4 個分類
公開網站資訊架構
24 個攤位
活動規劃容量
1 個 Dashboard
內部營運視圖

反思與下一步

下一版應補上活動後資料與維護流程

目前版本支援活動前溝通與籌備。活動結束後,下一步可補上到場估算、主辦單位回饋、常見問題整理,以及未來社區活動可重用的內容維護清單。

  • 比對活動前假設與實際到場、攤位動線、詢問類型之間的差距。
  • 將網站與 Dashboard 整理成未來里內活動可重用的模板。