返回作品列表

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

文南循環市集|Wennan ReMarket

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

角色

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

成果

把居民需要看的公開資訊,和主辦單位自己要管理的資料分開,讓網站更好懂,也讓籌備流程比較好追蹤。

工具與技術

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

Wennan ReMarket Website and Operations Dashboard Preview

專案定位

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

這是文南里第一次舉辦社區二手拍賣市集。公開網站負責讓居民快速看懂活動資訊,內部 Dashboard 則留給主辦單位追蹤籌備進度。

角色與範圍

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

我負責整理活動資訊、設計公開網站、實作互動與聯絡表單,也另外做了內部 Dashboard。過程中我用 Codex 協助規劃、檢查文案、整理資料與加速實作。

問題背景

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

居民只需要快速找到時間、地點、入場方式、雨天備案與聯絡方式。主辦單位還需要管理攤位、財務、來賓回覆與風險,但這些資料不適合放在公開網站。

設計目標

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

我的目標是讓首頁有活動記憶點,但細節不要難找。網站用一個主視覺畫面、四個資訊分類、清楚的卡片和克制的動效,讓居民能快速找到需要的內容。

資訊洞察

居民與主辦單位需要不同深度的資訊

我發現這個活動其實有兩種資訊需求:居民想知道活動怎麼參加,主辦單位想知道籌備還缺什麼。所以重點不是一直加頁面,而是先分清楚哪些資訊該公開,哪些應該留在內部。

困難與取捨

在營運資訊持續變動時維持公開網站聚焦

比較麻煩的是,籌備資料一直在變,但公開網站不能一直跟著大改。我把居民看的網站和主辦單位看的 Dashboard 分開,讓公開資訊保持穩定,內部資料則可以持續更新。

關鍵設計決策

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

  • 公開網站只保留關於、活動資訊、公告與聯絡我們四類,避免居民被過多籌備細節干擾。
  • 用 modal 展開細節,讓使用者不用離開首頁,也能查看更完整的活動資訊。
  • 把攤位進度、財務、RSVP、風險提醒與資料來源放到內部 Dashboard,留給主辦單位管理。

主要畫面展示

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

這些畫面呈現居民進站後會看到的幾個重點:活動名稱、時間地點、注意事項與聯絡方式。

文南循環市集首頁,包含活動標誌、日期、地點與市集背景照片。
首頁:讓活動名稱、日期與地點在第一眼就能被看到。
活動資訊 modal,呈現時間、流程、攤位說明、入場須知與現場地圖。
活動資訊:把時間、流程、攤位規則、入場與交通整理在同一個入口。
公告 modal,包含攤位結果公告、現場提醒、天候備案與 FAQ。
公告:把常見問題先整理好,減少主辦單位重複回覆。

營運工具案例

為籌備判斷建立內部 Dashboard

Dashboard 不放在公開網站裡,而是整理攤位進度、財務、RSVP 與風險提醒,讓主辦單位快速知道接下來要處理什麼。

  • 把居民需要看的活動資訊,和內部才需要看的營運資料分開。
  • 用卡片、進度圖和提醒事項,讓籌備狀態一眼就能看懂。
內部營運 Dashboard,呈現攤位進度、財務狀態、RSVP 完成率與優先行動提醒。
Dashboard:上方先顯示整體狀態與待辦提醒,不直接曝光原始名單。

AI 協作流程

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

Codex 協助我整理規劃、修改文案、檢查實作和處理資料工具。不過網站要放什麼、哪些資料不公開、怎麼讓居民看懂,仍然是我自己做設計判斷。

  • 把 AI 當成協作工具,用來整理選項、找出不一致的地方,並加速重複性工作。
  • 作品集敘事仍聚焦在我的設計判斷,而不是把專案說成 AI 自動生成。
聯絡 modal,包含主辦單位資訊與留言表單。
聯絡流程:把居民不確定的問題導到表單,方便後續追蹤。
成果與檢查

我主要檢查三件事:居民是否能快速看懂活動、內部營運資料是否沒有外露,以及主辦單位是否能持續維護籌備資料。

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

反思與下一步

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

目前版本主要支援活動前的溝通與籌備。活動結束後,下一步可以整理到場人數估算、主辦單位回饋、常見問題,以及未來活動可重用的更新清單。

  • 比對活動前的假設,和實際到場、攤位動線、居民詢問內容之間的差距。
  • 把網站與 Dashboard 整理成未來社區活動可以重用的模板。