Interactive Event Map
Role:
Lead Product Designer
Timeframe:
2026/09–2026/10
Platform:
Mobile Web · Desktop Web · APP
OVERVIEW
讓逛市集不再迷路，用 AI 加速產品開發
OUTCOMES｜上線後 21 天
不重複訪客
設計館關注次數
設計館瀏覽次數
01
PROBLEM & OPPORTUNITY
從紙本地圖的限制，看見線上與線下的體驗斷點
面對超過 500 個品牌、15 個展區的大型市集，參觀者的需求不只是找到攤位，更包含展前探索品牌、規劃逛展行程，以及展後延續與品牌的互動。
然而，既有紙本地圖與活動頁面以靜態資訊為主，難以串連這些使用情境，形成線上與線下體驗斷點。
Pain Point 01
找不到想逛的品牌
超過 500 個品牌分散於 15 個展區，紙本地圖缺少即時搜尋與篩選能力，參觀者難以快速找到目標攤位。
Pain Point 02
無法提前規劃逛展
既有活動資訊以活動介紹為主，缺少以品牌為核心的探索與收藏體驗，使用者無法輕鬆建立自己的逛展清單。
Pain Point 03
線下互動難以延伸
參觀者即使在市集接觸到喜歡的品牌，活動結束後仍缺乏方便的線上入口，延續品牌探索與關注關係。
💡 產品策略
將靜態的活動資訊轉化為可搜尋、可收藏、可定位的數位探索體驗，串連參觀者從品牌探索到實際逛展的完整旅程。
02
Strategy
我們不希望數位地圖只是紙本地圖的線上版本，而是從參觀者完整的逛展旅程出發，重新思考每個階段最需要解決的問題。
在開發時程有限的情況下，我們與跨部門團隊共同決定 MVP 的優先順序，兼顧使用者需求與商業目標，聚焦品牌探索、收藏與分享、攤位定位，以及串連 Pinkoi 線上設計館等核心功能，讓一次性的市集活動延伸為持續的品牌互動。
01
02
03
💡 核心產品策略
這樣的設計讓品牌清單負責「探索與選擇」，地圖負責「定位與行動」，支援展前、展中與展後不同的使用情境。
03
AI-ASSISTED PROTOTYPING
面對緊湊的開發時程，我運用 AI 快速建立高擬真 HTML 互動原型，整合活動視覺、品牌探索與地圖操作，讓團隊在正式開發前，就能直接體驗接近實際產品的使用流程。
01 · DESIGN CONCEPT
快速實現設計構想
運用 AI 將活動視覺與核心流程快速轉化為高擬真 HTML 原型，縮短製作時間，呈現接近正式產品的互動體驗。
02 · TEAM ALIGNMENT
共同驗證與迭代設計
讓 PM 與工程師直接操作原型，共同討論互動細節與技術可行性，並即時調整設計方向。
03 · DEVELOPMENT
銜接設計與正式開發
以高擬真原型作為工程實作參考，降低理解落差，提升設計交付與開發協作效率。
Explore the Interactive Prototype(link)
04
PRODUCT EXPERIENCE
01 · BRAND DISCOVERY
以品牌清單作為主要探索入口，整合類別、來源地與品牌特色等篩選條件，讓參觀者能依照個人興趣探索品牌，而不必逐一查看展區與攤位。
透過品牌資訊、收藏與分享功能，讓有興趣的品牌更容易被保存與再次找到。
02 · SMART NAVIGATION
整合品牌搜尋與互動地圖，讓參觀者能透過品牌名稱或攤位編號快速找到目標，並直接查看對應的展區與攤位位置。
搭配展區切換、地圖縮放與攤位定位，減少在品牌資訊與地圖之間反覆查找的負擔。
03 · VISUAL WAYFINDING
從攤位編號到品牌辨識，讓找攤位更直覺
在正式開發前，我運用高擬真原型與負責市集的跨部門同事進行訪談，從他們的現場經驗中發現：大量攤位編號難以協助參觀者快速辨識品牌位置。
因此，我進一步設計了 Logo 地圖模式，讓參觀者能透過熟悉的品牌 Logo 或 IP 角色作為視覺線索，更直覺地找到目標攤位。
上線後觀察
05
IMPACT
&
TAKEAWAYS
從實體市集延伸至線上互動，讓產品創造持續價值
PRODUCT IMPACT｜上線後 21 天
不重複訪客
設計館關注次數
設計館瀏覽次數
市集地圖不只協助參觀者探索品牌與定位攤位，更串連 Pinkoi 線上設計館，讓實體活動中的品牌接觸延伸為商品瀏覽與品牌關注。
01
02
03
這次不只完成單次活動的互動地圖，也建立了可重複使用的介面架構。未來舉辦不同主題的市集時，可依照活動的品牌設計系統調整色彩與視覺風格，延續既有的功能與互動流程，無須從零開始重新設計。
