專案

關於

PLAY

En

En

Spiritz Explorer app hero image showing label scanning, search, whisky detail, and CMS dashboard across iPhone and MacBook mockups

Background

烈酒探索家

台灣首款烈酒助理 App，掃描即辨識，記錄一步完成。

Summary

UI Design
UX Design
Brand Identity
Graphic Design
B2B2C

0-1 烈酒產品 App，獨立負責前後台 UI/UX、品牌識別與研究測試。
上線後主動接後台審核、建立審核 SOP、及設計投廣素材，以數據驅動持續迭代。


成果：
累積 10,000 以上註冊會員、查酒時間縮短 65%+、App 評分提升 25%+、轉換率穩定 30%+。


*此 Case Study 聚焦在掃描及筆記兩個核心功能

Team

1 Designer・1 Project Manager・2 Engineers

Device

iOS/Android/PWA

Timeline

2023 - 2024

Impact & Achievements

1
以流程減少查酒時間 65%+

觀察查酒流程平均耗時 3 分鐘以上，設計掃描路徑並結構化資訊層級，測試後縮短至 20 秒至 1 分鐘內

2
App 評分提升 25%+

從數據和評論雙重確認辨識率偏低，優化拍攝引導並建立審核 SOP

3
轉換率長期維持 30%+

測試多組廣告素材組合，GA 觀察 onboarding 轉換率，優化年齡驗證與輸入框提示，降低跳出率，轉換率最高達 40%+

4
1300+ 筆用戶主動回報資料

設計一鍵回報機制降低回報門檻， 並主動介入後台建立審核 SOP，推動達成酒款數量指標

Problem & Strategy

Problem
烈酒中文資訊分散、難以查找，令人難以整理吸收。
酒標外語障礙，90%+ 酒標是外文

台灣威士忌市場 90% 是進口，造成外語障礙

品飲紀錄成本高

複雜資訊及高學習成本，讓紀錄門檻居高不下

烈酒資訊分散及複雜

各平台資訊架構不一，酒廠、產地、風味輪等複雜資訊難以快速消化

Design Strategy
針對以上三個問題，圍繞辨識、紀錄、資訊三個方向。

每個設計決策都要同時服務用戶與商業目標。我用三個問題思考：滿足用戶需求嗎？產品獲益嗎？假設能被驗證嗎？
視覺優先的標籤識別：規劃辨識流程，移除查酒第一道阻礙

對應：酒標外語障礙

輕量化輸入及模組化：拆解紀錄流程，兼顧快速與深度

對應：品飲紀錄成本高

一站式統一資訊：定義資訊架構，讓用戶也能快速消化烈酒資訊

對應：烈酒資訊分散及複雜

Design Process

我主導從研究到交付的完整設計週期。 每個階段的優先項目由我判斷與定義， 並在 Deliver 後持續介入數據觀測與迭代。

1. Discover

  • 競品研究

  • 烈酒產業及品飲研究

  • 痛點 Mapping

  • 烈酒專家訪談

2. Define

  • 資訊架構

  • 產品完整流程規劃

  • 使用者旅程

  • Design System

3. Develop

  • Wireframes

  • 互動原型

  • Test case 測試

  • 元件規範

4. Deliver

  • UI Design

  • 觀測內部、客戶、後台數據 + App 評論回饋，迭代優化

Research

我從兩個問題出發：
用戶真正需要的最小資訊是什麼、競品在哪個環節流失用戶。
並圍繞這兩個問題，
定義功能範疇、規劃資訊架構、釐清品飲紀錄層級。

研究資源有限下，評估後決定不做問卷，MVP 階段需要的是快速驗證假設，未來有資源可以做更多測試。

我決定研究方向的定義與方法，專家訪談由我設計問題並現場主持：

競品調研 → 拆解功能流程、資訊架構及找流失環節

專家訪談 → 定義品飲資訊層級，如風味資訊

品飲資訊與流程研究 → 釐清用戶最小需求

Insight
1
辨識準確度不足，導致用戶不信任

競品負面評論集中在辨識不準，低準確度幾乎是必經過程，也是流失第一關

Action

透過拍攝引導降低雜訊，以回報機制將失敗體驗轉化為參與優化的機會。

2
高認知門檻，阻礙品飲紀錄

語言障礙與資訊過載，常讓紀錄半途而廢。比起走完整流程，人更怕一次完成的壓力

Action

拆解流程為小步驟，深度填寫讓用戶自然選擇

3
跨國外文資訊的獲取與轉化困境

語言障礙讓人增加決策。用戶需要的是過濾好，有參考價值的中文資訊

Action

優先佈局具決策價值的資訊層級

User Persona

基於研究洞察，定義出以下用戶輪廓：

  • Aged 30-55

  • 「入門者」及「經驗者」，程度與積極性各異

動機

  • 想快速找到下一支要喝的酒

  • 想記錄並回顧品飲體驗

  • 想參考別人喝過的酒再做決定

痛點

  • 找不到想查的酒，乾脆放棄

  • 品飲紀錄起頭難，耗時容易放棄

  • 難以判斷資訊真實性，不確定該信誰

需求

  • 快速方便找到酒的背景與評價

  • 低門檻開始記錄，想深入可以繼續

  • 有參考依據的資訊幫助決策

他們查的酒分三種情境：自己喝過的、別人喝過的、還沒跟過的，

功能與流程圍繞這三種情境規劃。

User Journey - 查酒

一般線上查酒旅程，平均超過 3 分鐘

拼字困難、容易出錯

網路搜尋酒標

高阻礙

需要登入、年齡認證、有廣告

找到酒相關資訊

高摩擦

外文、資訊複雜及架構不一，難以閱讀

閱讀非結構化資訊

語言障礙

無統一評分，靠推薦或品牌感下決定

無法判斷，憑感覺決策

目標未達成

規劃查酒旅程，縮短時間至 1 min 內

拍照即可，無需輸入文字

掃描酒標

零打字

掃描即辨識，即時找到

辨識並確定酒款

即時找到

系統化中文資訊，無語言門檻

閱讀評分、風味、資訊

無語言門檻

系統化評分與風味，有據可查

自信決策或找下一瓶

目標達成

Challenge 1

提高辨識準確度

痛點

#1

數據及回饋反映辨識準確性偏低

後台數據及 App 評論雙重確認：辨識準確性僅 60–80%，找不到酒直接流失，或變成沈睡用戶。解法不是要求工程師提高準確率，而是找設計能控制的變數。

「辨識是產品入口，找不到酒等於用戶直接流失。技術上無法百分百準確，策略不是追求準確，而是追求命中。」
設計策略及決策

#1

優化拍攝引導，從源頭降低辨識雜訊

辨識模型的輸入品質決定輸出準確度。我判斷圖片雜訊是最可控的變數，因此優化拍攝引導，讓提示明確聚焦在酒標範圍。

工程師負責模型測試與驗證，我在上線後持續回到後台觀察用戶實際拍攝的照片，確認雜訊大幅減少後，才判斷介入有效。

設計思路

發現問題
找出可控變因
規劃設計方案
後台驗證成效

Action: 下方強化引導，制定清晰文案

Before

Whisky label scanning screen showing Glenfiddich 21 aligned in the viewfinder with step indicator and align-and-shoot prompt

After

Redesigned whisky label scanning screen with step indicator and bottom tip bar, showing Glenfiddich 21 aligned in the camera viewfinder
拍攝引導設計探索與決策

  • 假設多層引導能有效降低拍攝雜訊

  • 照片雜訊最少，命中率最高

取景框、步驟及底部提示

最後決策

  • 假設文字說明足以引導用戶對焦

  • 用戶容易忽略文字，雜訊控制效果有限

取景框＋文字提示

未選

  • 假設底部固定提示不干擾取景

  • 位置固定讓用戶容易忽略

取景框＋底部提示

未選

#2

辨識結果由單一改為多個相似結果

同款烈酒有版本之分，結果無法百分百確定。改為呈現多個相似結果並以相似性排序，以第一或第二筆就命中為目標，測試不同辨識模型，最大化命中率。

Action: 以相似性排序，並優化資訊層級

Before

Original whisky label scanning screen with oval viewfinder and minimal UI, showing Glenfiddich 21 bottle centered in frame

After

Whisky label scanning screen showing Glenfiddich 21 aligned in the viewfinder with step indicator and align-and-shoot prompt
即時辨識 Prototype
Hand holding an iPhone with a blank black screen against a white background
Hand holding an iPhone with a blank black screen against a white background
Whisky label recognition prototype showing camera viewfinder aligned to a Glenfiddich 21 bottle with scanning tips at the bottom

成效

提高準確度至 90%+
減少負面評論
50%+ 會員使用辨識

Challenge 2

提高酒款數量

痛點

#1

品牌授權週期長，設計如何讓酒款持續上架？

等授權不是設計能控制的，思考如何讓用戶以最低門檻協助補齊資料，後台再統一處理。

#2

用戶反映酒款數量少、審核速度慢

兩者都在壓縮用戶查到酒的機率， 任何一個環節卡住，用戶就直接流失。

「酒款數量是產品的核心指標之一，直接影響用戶查找酒的體驗與平台的參考價值。」
設計策略及決策

#1

一鍵回報找不到的酒

原策略是讓用戶以最小資訊單位回報，經實測用戶積極性有限，改為用戶不需填任何資訊，一鍵進行回報辨識找不到酒，後台統一補齊。三個回報入口中，資源優先投入辨識路徑。

原因：阻礙最少，且能收集最完整的照片資料。上線後文字回報比例極低，佐證了這個判斷。

設計思路

設計思路

用戶積極性有限
用戶無需填任何東西
辨識路徑優先
驗證假設

辨識回報流程

辨識回報流程

掃描酒標並辨識
回報找不到
後台收到回報並處理
詢問是否提供為封面照片

Action: 馬上回報，不讓使用者思考太多

回報無需填資訊

Whisky app report confirmation dialog over Uncle Nearest 1856 recognition result, asking user to confirm before submitting a report

收到後，後台處理

Redesigned whisky label scanning screen with step indicator and bottom tip bar, showing Glenfiddich 21 aligned in the camera viewfinder
回報設計探索與決策

  • 假設降低填寫門檻能提高回報量

  • 回報量提高，由後台統一補齊資訊

無需填寫任何資料

最後決策

  • 假設用戶願意補充資訊

  • 大部分用戶不填寫酒名及其他資訊

進入表單，選填資訊

未選

#2

規劃後台流程及功能

後台當時沒有專責人員審核。這不在設計師的職責範圍內，但不介入會影響用戶體驗與商業指標。

我主動審核並整理成 SOP 後交接客戶端。

Action: 營運端介入，建立審核 SOP

Action: 營運端介入，建立審核 SOP

回報持續累積
缺乏標準化
主動審核資料，同步整理 SOP
回報被處理

後台審核流程簡介

後台審核流程簡介

收到回報資訊
快速查出酒是否已建檔
填寫資訊
增加素材以利辨識
發佈並通知回報者
AI 工具協助

制定 AI Prompt，提高酒背景資訊的整理速度，及外文翻譯成本，降低營運成本

成效

1300+ 筆回報，推動達成酒款數量指標

Challenge 3

兼顧快速與專業度的筆記功能

痛點

#1

從何起手，紀錄耗時麻煩

烈酒資訊複雜，沒有引導的情況下大多數人不知道從哪裡開始，寫到一半就放棄。

「有價值的筆記愈多對平台愈好，但強迫填寫會降低意願，完全自由又讓使用者不知從何起手。設計目標是：讓輕度使用者快速完成，重度使用者自然深入。」
設計策略及決策

#1

資訊架構以最有價值資訊為先，由淺至深

參考國內外品飲大師流程（如 Charles MacLean、林一峰），並觀察社團深度品飲紀錄，定義出整體評分、次要評分、風味三個核心維度。

初版只有整體評分。深入了解品飲流程後，我提案加入香氣、風味及尾韻，以開發成本低為由說服團隊，在不增加工的情況下提升紀錄的專業參考價值。

#1

以最有價值資訊為先，由淺至深

參考國內外品飲大師流程（如 Charles MacLean、林一峰），並觀察社團深度品飲紀錄，定義出整體評分、次要評分、風味三個核心維度。

初版只有整體評分。深入了解品飲流程後，我提案加入香氣、風味及尾韻，以開發成本低為由說服團隊，在不增加工的情況下提升紀錄的專業參考價值。

#2

分層式評分選項

一鍵送出為預設，完成主評分後自動展開次要維度，分段式降低填寫壓力。

設計思路：假設預設展開，用戶操作成本夠低不會造成壓力 → 95%+ 填了次要評分 → 驗證假設成立。

#3

系統化風味

綜合風味輪、顧問與使用者意見，以專業及在地化角度，建立系統化風味標籤，加入 Auto-complete 讓用戶快速找到對應風味。

Action: 以重要性排序資訊，加入次要評分

Before

Early version of whisky tasting note form showing star rating, flavor tags, text notes, photo upload, and advanced info section

After

Whisky rating detail form with 5-star overall score, aroma, flavor and finish sub-ratings, flavor tags, text notes, photo upload, and pairing details section
設計探索與決策 – 次要評分

  • 假設用戶願意填寫，星星操作成本夠低不造成壓力

  • 更多維度資料提升筆記參考價值，符合品飲流程，方便之後深度回憶。

預設展開

最後決策

  • 假設只有進階用戶會主動展開填寫

  • 但會讓大多數用戶錯過次要評分，資料維度不足，降低平台參考價值。

預設收合

未選

  • 假設完成主評分後再引導填寫壓力較低

  • 但流程被打斷，用戶容易選擇跳過， 填寫率預測低於預設展開。

拆分步驟

未選

快速評分

Hand holding an iPhone with a blank black screen against a white background
Hand holding an iPhone with a blank black screen against a white background
Whisky app rating screen with empty five-star selector and a fun fact tooltip showing the platform average score is 3.5

系統化筆記

Annotated diagram of Spiritz Explorer rating detail screen showing six components: overall score, sub-ratings, flavor tags, notes, photos, and advanced details

成效

4000+ 筆記紀錄
1 分鐘完成掃描到評分
95%+ 使用者填寫次要評分
Spiritz Explorer app design system overview showing achievement badges, icon set, logo, color palette, app screenshots, and spirits category cards

Takeaways &
What if continue

此專案參與到 0-1 的產品週期，從設計、研究、到營運介入，每個決策都直接影響商業指標。

#1

降低門檻不只是減少欄位，而是減少每一步的決策成本

預設展開次要評分時，我判斷星星的操作成本夠低，不會造成填寫壓力。上線後 95%+ 用戶都填了，驗證了這個判斷，門檻的高低不在於欄位多少，而在於每一步是否讓用戶感到猶豫。

#2

設計師的邊界是自己定的

在四人團隊裡，我主動接手後台審核、建立 SOP、參與行銷與營運。這些不在設計師的 JD 裡，但讓我拿到第一手資料，做出更準確的設計判斷。資源限制可以不是限制，是提早接觸全局的機會。

#3

每個設計決策都有三個問題

滿足用戶需求嗎？產品獲益嗎？假設能被驗證嗎？
這三個問題在這個專案裡反覆出現——辨識引導解決了使用者需求，也讓準確率提升到 90%+；後台審核不在 JD 裡，但直接影響了酒款數量指標。

What if continue

✨

Design to AI to code

5/3 updated
Design System 已建立，可嘗試讓 AI 更新 Code，將組件直接輸出為可用程式碼，加速多平台開發。

對烈酒探索家而言，iOS/Android/PWA 三端的設計一致性是持續維護成本高的痛點，預期 AI to Code 能直接降低這個成本。

#AI

⭐

區隔出專業評分

引入專家與 KOL 認證機制，區分專業評論與一般評分，確保用戶能找到具參考價值的資訊。

#獲客 #留存 #潛在營收

⭐

個人推薦系統

專屬個人的推薦系統、排行榜、季節送禮等，優化找酒的體驗，提升回訪及獲取新會員。

#活躍 #留存

Appendix

UX writing

文案由我先行撰寫，與 PM 確認後定稿，流程清晰、修改極少。
核心判斷基準是使用者當下情境：烈酒場景下使用者可能正在飲酒，任務型文案須精準快速傳達，不讓使用者停下來思考。設計與文案之間的取捨，由我主導判斷。
另外，投入額外資源撰寫烈酒內容時，以 AI 定下 Prompt 來整理內容，以應對大量內容產出。

1. 任務型文案以簡潔清晰為主，讓使用者不猶豫直接完成動作
2. 以使用者在產品情境中的狀態思考，烈酒場景優先快速傳達
3. 空間允許時，完整表達優先於強制精簡
4. 提示狀態採親切、鼓勵語氣，符合產品調性

文案決策範例 酒款介紹區塊的標題，候選方案包含「關於」「介紹」「酒故事」「背景」等等，最終選用「關於這支酒」。

考量：「關於」「介紹」無受詞，語意不完整；「酒故事」「背景」過於模糊。排版空間允許完整表達，「這支酒」符合台灣口語習慣，親切自然。

內容策略

文案品質

AD 素材測試與優化

測試多組廣告素材，從曝光、點擊、安裝、CPI 四個維度分析視覺組合與訊求的關係。發現廣告訴求與點擊後流程的相關性直接影響轉換，作為後續素材設計方向。

制定策略：單一訴求、主題聚焦、簡單元素、CTA 訊息明確
以產品亮點切入，文案以 TA 出發。

Insight：
1. 體驗產品的文案，安裝數最好，判斷 App 流程連結較強
2. 亮與暗版之間沒有顯著差異
3. 比起強調下載送禮，功能簡單描述＋直接下載文案，效果更好

成效：CPI 降低 25%+

此外我使用倒數文案的效果也較優，緊迫感能催化 Action。

找出最佳素材組合

洞察訴求與轉換流程的關聯

廣告素材範例：以策略、原則快速建立素材

酒商合作活動頁建立及優化

針對酒商合作活動頁，目標是提升使用者領取優惠券的轉換率。分析用戶停留區塊與點擊路徑後，優化頁面資訊層級與 CTA 位置，降低領取行為的操作阻礙。

Insight：
雖然改版後成效變好，但這次 OMO 有硬傷：兌換地點與優惠是否有感造成影響甚大，
但還是驗證了整合的模式可行，從線上到線下兌換流程順暢。

兌換率提升 70-80%+

點擊領取人數增加 10%+

Absolut Vodka product detail page in a spirits app showing 3.2 star rating, aroma, flavor scores, and NTD 550 price

Spirits product detail

Spirits app explore page showing liquor categories including Whisky, Brandy, Gin, Rum, Vodka, and Tequila with item counts

Flavor explore page

Spirits app AI chatbot sommelier screen with category prompt cards for flavor, budget, and food pairing recommendations

AI chatbot with prompt cards

Other functions

以下為其他參與功能，詳細設計思路歡迎詢問。

獲客

・優惠劵功能
・引導評分功能
・Ad 素材設計
・心理測驗
・酒商合作活動 x 2
・EDM 內容設計
・分享機制

啟用

・辨識功能
・後台審核功能
・使用者回報功能
・AI Chat 機器人找酒功能
・筆記功能
・進階搜尋功能

留存

・主題探索功能
・個人成就功能
・快速記錄優化
・評分優化
・社群交流功能
・願望清單功能

收益

・廣告欄位

其他

・Logo 設計
・管理後台功能

Table

Table

Hands holding an iPhone displaying the Spiritz Explorer app splash screen with gold background and Chinese logo

Table

Table

有想法? 聯絡我

{

tjamesblog@gmail.com

}

→ Linkedin

→ Instagram

James Makone

有想法? 聯絡我

{
tjamesblog@gmail.com
}

→ Linkedin

→ Instagram

James Makone

有想法? 聯絡我

{

tjamesblog@gmail.com

}

→ Linkedin

→ Instagram

James Makone

有想法? 聯絡我

{

tjamesblog@gmail.com

}

→ Linkedin

→ Instagram

James Makone