一個專屬於職人咖啡
探索者的天地
讓客戶可以探索好咖啡店並使用虛擬貨幣：Caffè Coin 來支付咖啡費用，就是CC的存在價值 。
開始吧！
咖啡店觀察
需求單位告訴我們，他想要打造一個專職人咖啡推廣以及虛擬貨幣支付服務的App。他很明確的要求要有地圖能顯示所有合作店家，並具有購買和使用咖啡幣的功能。 於是我與產品團隊開始思考該如何呈現這個產品，首先，我親自前往一些咖啡店，進行觀察與靈感搜集。
“我只想喝杯咖啡，有什麼故事？”
為了了解更多顧客在咖啡店消費的經驗，我去了一些咖啡店（許多是未來可能的合作店家），以秘密客的身份與店員交談，並與願意分享經驗的顧客聊天。從他們選擇的咖啡到他們使用的付款方式，我都盡力搜集各種心得與體驗。除了虛擬幣提供的折扣是能吸引顧客使用App的行銷重點，我也需要從中釐清哪些吸引力，會促使客戶使用這個App。我發現顧客時常基於對咖啡品質追求、氣氛享受，甚至是有個性塑造上的需要等各種原因，選擇這些較高價位的咖啡，於是我們開始分析這些渴望喝好咖啡的客戶樣貌。
喝咖啡的路
由於對我們的客戶外觀有了更清晰的了解，我們開始設計用戶旅程，同時進行競品分析與商模分析，更清楚地了解我們的App在不同階段能提供給客戶的機會。
用戶旅程
設計
產品樣貌逐漸清晰
系統地圖
確定了我們服務的雛形後，我與產品經理一起整理App所需的各項功能與導向，建構前台顧客端的系統地圖，查看所有細節並繼續往下設計Wireframe和 UI 元件。
主流程重點架構
Wireframe
顏色代碼和系統
咖啡的感覺
雖然品牌log採用較為明亮的黃色系統，但我決定為App量身定制一個更柔和、更耐看的溫暖顏色，讓人們更直覺想到咖啡。通過一些嘗試，我訂定了三種主要顏色並設計了其餘的輔助顏色系統。
按鈕、輸入和文字
受到預算的限制，我選用了符合我設計期望的系統常備黑體字，按鈕和元件也套用了UI顏色系統，設計出一系列具備一致性和統一美感的UI元件。
細節的點綴
圖標和icon
用於地圖上與頁面各處的icon也同樣套用了系統色，並以各種小創意呼應icon的對應需求。
任務完成
徽章設計
針對App裡有設計的一些任務環節，我也參照了上方UI訂定的風格，著手設計了一系列用於任務頁和會員等級的徽章標示。
開發者交流
詳細的 UI 流程
交付開發的過程中，倘若某部分用戶流程有更多細節需要處理，比如動作或樣式稍微比較複雜，我會製作一些開發文件，幫助開發人員理解和記住一些複雜的細節。
設計/開發工具
Adobe illustrator, Photoshop, After Effect, Sketch, Zeplin
開發成果展示
地圖和商店
店家資訊和搜索功能
Caffè Coin儲值和使用
最新資訊與行銷頁
包括橫幅banner和所有的KV設計。
任務活動
帳號頁與消費紀錄
票券系統設計
