找咖啡 KAPI：發現最適合自己的咖啡館
2017 年我和一位工程師從零開始做的找咖啡館 App：從問卷研究、MVP 上線，到看數據改版的完整過程。
這篇原本是放在我舊作品集上的設計案例，記錄 2017 年我和夥伴從零開始做的找咖啡館 App。搬到 blog 時整理了排版，內容維持當時寫下的樣子。
專案概覽
- 時間： 2017 年
- 專案期間： 10 個月
- 角色： 共同創辦人、產品設計師
- 產出： 產品計畫與規格書、完整的使用者介面和體驗設計
- 平台： iOS／Android App
產品背景
KAPI 是一款幫人用最簡單有效的方式，找到符合自己需求的咖啡館的 App。在 KAPI 裡，使用者可以用客製化的地圖，快速找出離自己最近、又符合需求的咖啡館，也可以用多種篩選條件縮小搜尋結果。
台灣人很喜歡去咖啡館，但每個人去的目的都不太一樣。台灣有很多獨特的咖啡館，大家喜歡坐在裡面看書、打發時間、用電腦工作，或是和朋友聊天。去咖啡館慢慢變成台灣一種獨特的文化，你隨時可以發現一間特別的咖啡館，走進去慢慢享受裡面的氛圍。
但要找到一間適合自己的咖啡館並不容易。通常我們會上網搜尋關鍵字，但跳出來的大量結果很難消化。我們看到一個機會，可以幫這些人更輕鬆、有效率地找到合適的咖啡館，這就是 KAPI 找咖啡的開始。
台灣有很多不同類型的咖啡館，每個人在裡面做著不同的事。
設計流程
我們是一個小團隊（一開始只有我和一位 Android 工程師），所以希望能快速做出東西，在上線前測試原型、拿到使用者回饋。我們根據自己的假設設計產品功能，再用數據引導改版。過程中我和工程師密切合作，確保目標明確，每個產品細節都有考慮到。
整個流程大致是這樣：
- 定義問題
- 使用者研究（收集資料）
- 發想解決方案
- 介面流程規劃（MVP 上線）
- 數據分析
- 製作原型和易用性測試（發布新版本）
- 改版迭代
使用者研究
專案開始前，我們用問卷做了小型的使用者研究，了解一般人在咖啡館裡的行為，也訪談了幾個人，了解他們找咖啡館時的需求。最後收到 250 多份問卷，以下是幾個有趣的發現：
- 38% 的人在咖啡館用電腦
- 46% 的人一週去一次咖啡館
- 82% 的人覺得有沒有 Wi-Fi 很重要
使用者洞察：
- 沒辦法有效率地找到自己喜歡的咖啡館： 很多人在找符合需求的咖啡館時遇到不少困難。
- 很多人厭倦了在部落格上讀雜亂的咖啡館資訊，只想快速知道幾個重要的訊息。
人物誌（Persona）
我整理問卷結果，把這些細節轉成三個人物誌，幫整個團隊更清楚我們到底在為誰設計，以及產品開發上應該關注哪些功能。
Josh｜19 歲｜大學生（積極樂觀、有好奇心、友善）
Josh 是企業管理系的大學生，喜歡學新知識，也在不同公司實習過。他希望未來成為跨領域人才，常常去咖啡館整理課後筆記，或在週末上線上課程。
Lucas｜25 歲｜業務主管（有活力、外向、熱情）
Lucas 是一位充滿熱情和活力的業務主管，在一家電商公司工作。他熱愛自己的工作，也很重視和客戶的關係，所以常約客戶在咖啡館談生意。
Emily｜29 歲｜自由接案設計師（有創意、優雅、冷靜）
Emily 是一位自由接案設計師，對設計有用不完的熱情和能量。她相信靈感來自日常生活，所以喜歡跟人聊天、觀察人與人之間的互動。她也是咖啡愛好者，常帶著筆電到不同的咖啡館工作。
問題與目標
Google 搜尋的資訊太多，很難在短時間內找出重點
在 Google 上搜尋時，結果常常多到讓人不知所措。大家希望一眼就看到最重要的資訊，再決定要不要花時間了解這間咖啡館的細節。
沒有快速有效的方法，判斷這間咖啡館適不適合自己
Google 上的搜尋結果，像是部落格、使用者評論、照片，格式都不統一，很難在短時間內消化，要判斷一間咖啡館能不能滿足當下的需求也很花時間。
我們的目標： 上線一個基本的 Android App，幫大家快速搜尋和探索喜歡的咖啡館。
我們的假設：
- 讓使用者用特定條件搜尋，可以幫他們依照自己的需求，輕鬆找到合適的咖啡館。
- 能在地圖上瀏覽咖啡館，可以幫使用者在想去的地點附近，發現更多有趣的咖啡館。
挑戰與限制：
- 資源有限： 專案開始時只有兩個人，所以要排好任務的優先順序，確保產出專注在最重要的部分。
- API 限制： 一開始我們用的是開源 API，很難新增或改變現有的資料結構。所以我們決定先專注在滿足使用者需求的功能，之後再建立自己的資料庫。
草圖與線框稿
完成資訊架構之後，我開始畫線框稿，讓團隊可以直觀地看到每個元件和視覺元素在頁面上怎麼呈現，這也讓我有機會思考資訊層級，用更有結構的方式呈現內容和功能。我們和團隊討論了很多次，一直改善線框稿，讓整體更簡潔，也符合大家的期望。
資訊架構
開始做視覺設計和排版之前，我先整理出合理的資訊架構，讓使用者可以在產品裡快速找到想去的頁面。
最小可行產品（MVP）
確定 MVP 要上線的功能之後，我開始做視覺設計、調整互動細節。這個 MVP 非常簡單，大約兩週就完成了。我們想用它觀察使用者怎麼和產品互動，收集更多回饋，幫助下一次改版。這次上線的核心功能有：在地圖上瀏覽咖啡館、用關鍵字搜尋、條件篩選、查看離自己最近的咖啡館，以及切換城市。
MVP 上線幾個月後，我們學到……
- 「離我最近」按鈕：70% 的工作階段至少點了一次。 超過 70% 的使用者至少點過一次「離我最近」，代表大家可能想找所在地附近的咖啡館，或是在移動途中找咖啡館。這個數據來自 739 次點擊事件。
- 回訪：每人每天平均開 2.6 次。 每位使用者平均每天打開 App 2.6 次，每日活躍使用者也慢慢成長。還不錯，但一定還有很多可以改進的地方，提升使用者參與度會是我們的下一個大目標。
- 停留時間：平均每次 4 分鐘。 MVP 只提供咖啡館的基本資訊，使用者在 App 裡能做的互動不多，找到喜歡的咖啡館後可能就關掉了。所以我們要思考怎麼提供更多價值，讓使用者在產品裡停留更久。
設計迭代
根據數據和使用者回饋，第二版做了這些改進：
更強的篩選功能
我們做了更完整的篩選功能，讓使用者用篩選條件更有效率地找到適合的咖啡館。也提供了預設條件，可以直接套用，找出符合的結果。
新的列表模式，滿足不同的瀏覽需求
除了地圖模式，我們也加了列表模式，讓使用者依需求切換瀏覽方式。同時優化了介面，讓整體內容更好讀、畫面更乾淨。
你的咖啡社群
另一個重點是建立社群。我們希望使用者不只用 KAPI 找咖啡館資訊，也能彼此交流心得，讓所有喜歡咖啡館的人都受益。使用者現在可以在去過的咖啡館留言、上傳照片，甚至新增自己發現的新咖啡館。
設計系統
一致、可重複使用的元件
我相信好產品不只是功能完整，還要給使用者好的體驗。為了讓整個產品的體驗一致，我定義了一套基本的設計系統。建立這套系統也讓我深入思考：每個元件都有必要嗎？應該怎麼正確使用？元件的互動邏輯在流程裡合理嗎？資訊架構夠清楚嗎？這套設計系統雖然簡單，但也讓我和工程師的溝通順暢很多。
改版後的高保真原型
改版後有更強的篩選器、列表模式、咖啡社群相關的功能，介面也更完整，使用體驗更好。
首次開啟 App 的介紹流程
我們也加了首次開啟 App 的介紹流程，一開始就讓使用者知道可以在 App 裡做哪些事，幫他們更快上手。
頁面展示
學習與反思
做這個從零到一的專案，我學到三件最重要的事：
- 永遠先考慮使用者價值： 我們帶給使用者的功能和體驗，應該對他們有意義，而這需要深入理解使用者真正的需求。
- 即便是 MVP，也不應該犧牲使用體驗： 我們想更快上線，但不代表要犧牲體驗來換速度。使用者可以等待下一個版本的新功能，但他們不會勉強自己用不好用的產品。
- 解決真正的問題： 做產品時可能會有很多想法和假設，但要細心驗證，才能找到正確的方案，解決真正的問題。
我們也持續優化、重新設計整個 App，讓功能和體驗更好。
