使用者介面/體驗設計
iOS/Android 應用程式
移動端
原型設計

2017

找咖啡 KAPI: 發現最適合自己的咖啡館

專案期間

10 個月

擔任角色

共同創辦人 & 產品設計師

成果產出

產品計畫與規格書& 完整使用者介面及體驗設計

產品背景

KAPI 是一款可以幫助人們用最簡單有效的方式找到滿足他們需求的咖啡館的 App。 在 KAPI 中,使用者可以利用客製化的地圖快速找出距離自己最近且符合需求的咖啡館。我們也提供了多功能的篩選功能來幫助使用者縮小搜尋結果。

台灣人很喜歡去咖啡館,但去咖啡館目的大多不同。 台灣有許多獨特的咖啡館,大家喜歡坐在咖啡館裡面閱讀、打發時間、用電腦工作,或是和朋友聊天等等。去咖啡館慢慢成為台灣的一種獨特文化,你可以隨時發現並走進一間特別的咖啡館慢慢享受裡面的氛圍。

但是要找到一間適合自己的的咖啡館並不是件容易的事。 通常當你需要找符合條件的咖啡館時會上網搜尋一些關鍵字,但是出現的大量搜尋結果可能會非常難以消化。因此我們看到了一些機會來幫助這些人更輕鬆有效的找到合適的咖啡館, 這就是我們 KAPI 找咖啡專案的開始。

在台灣有許多不同類型的咖啡館,你可以看到每個人在裡面進行著不同的活動。

設計流程

身為一個小團隊的成員(一開始團隊只有我和一個 Android 工程師),我們希望我們可以快速產出並產品上線前測試原型來得到使用者反饋。 我們根據自己的假設設計了產品的功能,並使用數據來引導設計改版。 我在流程中與工程師密切合作來確保我們的目標很明確,並且每個產品細節都會被考慮到。

使用者研究

在專案開始之前,我們利用問卷調查進行了小型的使用者研究來了解一般人在咖啡館時的行為,也採訪了一些人去了解他們在尋找咖啡館時的需求。 我們最後收到了 250 多人填寫問卷,以下是我們從問卷中發現的一些有趣的現象:

38%

在咖啡廳使用電腦

46%

一週去一次

82%

有無 Wifi 很重要

使用者洞察

無法很有效率地找到自己喜歡的的咖啡館

許多人在尋找適合自己需求的咖啡館時遭遇了很多困難。

許多人厭倦了在部落格上閱讀雜亂無章的咖啡館資訊,他們只想快速了解一些重要的訊息。

人物誌(Persona)

我整理了問卷調查結果並將這些細節轉化成三個人物誌, 它可以幫助整個團隊更了解我們到底要為誰設計,以及我們在產品開發上應該關注的功能是什麼。

Josh | 19 歲 | 大學生

積極樂觀
有好奇心的
友善的

Josh 是一個大學生,目前就讀企業管理系,他喜歡學習新知識,也曾經在不同的公司裡實習過。他希望未來成為跨領域人才, 他也常常去咖啡館做課後筆記或在周末參與線上課程。

Lucas | 25 歲 | 業務主管

有活力的
外向的
熱情的

Lucas 是一位充滿熱情和活力的業務主管,他目前在一家電商公司工作,他熱愛自己的也希望維持良好顧客關係,所以他經常和客戶一起約在咖啡廳談生意。

Emily | 29 歲| 自由接案設計師

有創意的
優雅的
冷靜的

Emily 是一位自由接案設計師,她對設計有燒不完的熱情和能量。 她相信自己可以從日常生活中得到許多靈感,因此她喜歡與人交談並觀察人與人之間的互動。 她同時也一名咖啡愛好者,所以她經常帶著筆電在不同的咖啡館工作。

問題與目標

Google 搜尋訊息量過大,很難在短時間篩選出重要訊息

當人們在 Google 上進行搜尋時常常因為搜索結果太多,會讓人感到不知所措。人們希望可以一目了然的找到最重要的訊息,然後再決定是否要花來了解咖啡館細節。

沒有很快速有效方法可以評估這個咖啡館是否適合自己

Google 上的搜尋結果像是部落格、用戶評論、照片等等通常不是統一一格式,可能很難在在短時間內消化吸收,而且評估咖啡館是否滿足目前需求也是件花時間的事情。

我們的目標

上線一個基本的 Android App,可以幫助人們快速搜尋和探索他們喜歡的咖啡館

我們的假設
01

讓使用者根據特定條件搜尋將,可以幫助他們根據自己的需求輕鬆找到合適的咖啡館。

02

能夠在地圖上瀏覽咖啡館,可以幫助使用者在他們想要去的地點附近探索更多有趣的咖啡館。

挑戰與限制

有限的資源

由於我們在專案開始時只有兩個人,因此我們需要確定任務的優先級以確保我們的產出成果是專注在最重要的部分。

API 限制

在專案一開始我們使用了開源 API,這代表我們很難去新增或改變現有的資料結構, 所以我們決定先專注於滿於使用者需求的功能,之後再創建我們自己的資料庫。

草圖與線框稿

完成信息體系結構後,我開始研究紙質線框,使我可以直觀地看到每個組件和可視元素在頁面上的放置方式。 這也使我有機會思考信息層次結構,從而可以更結構化的方式呈現內容和功能。我們與團隊進行了很多討論,我對線框進行了迭代,以使其更加簡潔並符合每個人的期望。完成資訊架構之後,我開始製作線框稿讓團隊可以直觀的看到每個元件和視覺元素在頁面上如何呈現,這也讓我有機會思考資訊層級關係,並以更結構化的方式呈現內容和功能。我們與團隊做了很多討論並改善現在有的線框稿,讓整體更佳簡潔並符合團隊的期望。

資訊架構

在開始視覺設計和頁面排版之前,我先梳理清楚什麼是合理的訊息架構,讓使用者可以在我們的產品中快速找到自己想去的頁面。

最小可行產品 The MVP

在確定了我們希望在 MVP 上線功能之後,我開始進行視覺設計與調整交互細節。 這個 MVP 版本非常簡單,我們只花了大約兩週的時間就完成, 我們希望用這個 MVP來觀察使用者如何和我們的產品互動,並收集更多反饋以幫助我們的下一次改版。這次發布的的核心功能包含在地圖上瀏覽咖啡館、用關鍵字搜尋、條件篩選、查看離自己最近的咖啡館以及切換所在城市。

發布MVP幾個月後,我們了解到...

「離我最近」按鈕

70% 點擊/工作階段

有超過 70%的用戶至少點擊一次“離我最近”按鈕,這表示使用者可能可能想找到他們所在地附近的咖啡館,或者他們想在移動的過程中找到附近咖啡館。 這些數據是基於 739 次的點擊事件。

二次造訪使用者

2.6 次/天

每個用戶平均每天打開該應用2.6次,並且每日活動用戶逐漸增長,這還不錯,但是肯定還有很多需要改進的地方。 如何提高用戶參與度將是我們的下一個大目標。

停留時間

4 分鐘/平均每次

這個 MVP 產品只有提供咖啡館的基本資訊,使者用不太能在這個 App 上做太多互動,當使用者找到了自己喜歡的咖啡館,他們就可能關閉App 。 因此我們需要思考怎麼樣可以提供更多使用者價值,並且讓他們在我們的產品中停留更長的時間。

設計迭代

根據獲得的數據和使用者反饋,我們第二版做了以下改進:
更強的篩選功能

我們開發了篩選功能,讓使用者可以通過篩選條件來更有效地找到適合的咖啡館。 我們還提供了預設條件,用戶可以直接使用預設條件找出符合條件的結果。

新的列表模式,滿足你的各種瀏覽需求

除了地圖模式之外,我們也新增了列表模式,讓使用者可以根據需求切換不同的瀏覽模式,我們也優化了使用者介面,提高了整體內容的可讀性和畫面整潔。

你的咖啡社群

我們關注的另一個要點是社群的建立,我們希望使用者們不僅是可以利用 KAPI 找到咖啡館的資訊,也希望可以彼此互相交流心得讓所有熱愛咖啡館的人能夠受益。使用者現在可以對他們到訪過過的咖啡館留言、上傳照片,甚至新增他們發現新開的咖啡館。

設計系統

一致性高且可重複使用的元件

我相信一個好的產品不僅只是提完整的功能,而且還可以提供給使用者一個良好的體驗,為了確保我們的使用者在整個產品中有一致的體驗,我定義了一個基本的設計系統來提高設計上的一致性。通過打造這個系統,可以幫助我深入思考每個設計元件是有必要的嗎? 我們應該如何正確的使用它? 元件互動邏輯在流程中合理嗎? 資訊架構是否足夠清晰? 這個設計系統雖簡單但也讓我和工程師之間的溝通更加順暢。

MVP

Live demo

這次發布的的核心功能包含在地圖上瀏覽咖啡館、用關鍵字搜尋、條件篩選、查看離自己最近的咖啡館以及切換所在城市。

改版後

高保真原型

改版後將提供更強大的刪選器、列表模式、新增與咖啡社群相關的功能,以及更加完整的介面及更好的使用者體驗。

首次開啟 APP 流程

我們也增加了首次開啟 App 的介紹流程,我們會最一開始讓使用者知道他可以在這個 App 裡面做些什麼事情,幫助他們更快速的開始使用產品。

頁面展示

學習與反思

透過執行這個從零到一的專案,我在過程中也了解了三件最重要的事情:

1. 永遠都要先考慮使用者價值: 我們帶給給使用者的產品功能和體驗應該是對他們有意義的,但這需要深度理解使用者的真正需求。

2. 即便是 MVP 也不應該犧牲使用體驗: 我們想要更快地上線產品,但不代表我們必須要犧牲使用體驗來提高速度,使用者可以等待下一個版本中的新功能,但是他們不會勉強自己用不好用的產品。

3. 解決的真正問題: 我們在做產品時可能會有許多想法和假設,但我們應該細心地去驗證驗它,以便找到正確的解決方案來解決真正的問題。

我們也不斷優化和重新設計整個 App 讓整體的功能和體驗更好。

下一個專案

不只是本地化:  打造專屬日本使用者的職缺搜尋體驗

回到首頁

頂端

Background

User Research

Problem

Hypothesis

MVP

Principle

Deliverables

Outcome

Takeaway