2021.05.27

CABE APP UIUX 專案作品

  • UIUX
  • APP
  • 練習作品

CABE(咖比)是用來快速尋找咖啡廳的工具軟體,從訪談、研究、原型、設計等等,以開發專案方式設計使用者介面與體驗,解決用戶在尋找咖啡廳時遇到的痛點。

我的咖啡廳由我定義,
讓 ”CABE” 成為你的城市咖啡館。

我的咖啡廳由我定義,讓 ”CABE” 成為你的城市咖啡館。

「咖比 CABE」 取自台語「咖啡」,以較台灣親民方式建立品牌形象,「要來一杯咖比嗎?」希望能傳達隨時都能來一杯咖啡的形象,呼應快速尋找咖啡廳的功能。從產品開發到設計執行的過程,共同解決用戶需求,隨著「咖比」的腳步一起在城市中做一名獨一無二的咖啡文化推廣大使。

產品設計流程

在現代社會中,咖啡廳的定位越來越多元化,每個人對於咖啡廳的需求不盡相同,在目前咖啡廳四處林立的生活中,想要找到適合的咖啡廳,也變成一種現代需求。我藉由以下設計流程,開始進行需求訪談與咖啡廳文化的研究探討,希望從使用者角度開發一個咖啡廳的工具產品。

  • 產品概念、創意發想
    Prototype Concept, Creative Concept
  • 競品分析
    Competitive Product Analysis
  • 問卷調查與用戶研究
    Questionnaire and User Research
  • 需求訪談與設計觀點
    Problem Interview and P.O.V
  • 品牌策略、產品分析
    Brand Strategy, Product Analysis
  • 使用者流程、線框稿
    User flow, Wireframe
  • 原型設計與原型測試
    Prototype and Test
  • 高擬真設計
    High Fidelity Prototype Design
使用者訪談紀錄

我藉由問卷調查與限時動態篩選目標客群,並製作訪綱和 Persona 記錄訪談結果,用戶對咖啡廳的動機(一個禮拜前往兩次以上之用戶),大部分以「讀書」、「甜點」兩大需求為主,次為「咖啡」、「聚會」等等,但外帶咖啡則會更注重「咖啡」與「價格」等因素。

設計觀點分析

經過訪談使用者後,我統計了用戶在意的咖啡廳的因素,如「久坐時間」、「充電座有無」、「安靜程度」、「裝潢」、「咖啡與甜點」、「老闆個性」、「價格」等等因素。
在尋找咖啡廳上,用戶普遍的痛點則是:「網路上搜尋需要很多跳轉」、「網路上的資訊不完整,找不到想要的咖啡廳」、「充電座多寡、環境吵雜等等在網路上是看不到的」等等。

產品介面設計

登入畫面為咖啡廳店門口,進入後主畫面為可客製化的咖啡廳,使用產品的時間越長便會解鎖更多配件,每個「咖比客」(泛指使用咖比產品的人」都可以經營、分享自己的咖啡廳封面風格。

依照痛點設計六大需求作為篩選功能,解決資訊不足的痛點,並依人氣排序四大評分的結果,快速尋找符合需求的咖啡廳!

▲ 登入畫面|主畫面

▲ Icon Kit設計與色彩計畫

▲ 咖啡廳卡片式探索|咖啡廳篩選彈窗|地圖篩選功能

▲ 個人動態;帳號串連畫面;好友與粉絲畫面

將重要資訊設計在卡片中,可以快速瀏覽查看內容,依照訪談設計六大指標:可預訂、可久坐、較多插座、有Wifi、獨立店家、有場地租借,用以快速過濾資訊。

個人收藏功能加入客製化名片,可以讓用戶以咖啡交朋友,配合扁平插畫風格自定義畫面樣式與風格,更搭上商家聯名活動推出新擺件以提升產品週期,讓產品使用者更能專注在咖啡文化的推廣。

▲ 咖啡廳資訊元件與評論系統元件(Compomemts)

▲ 個人相簿與咖比客名片

▲ 上為客製風格化咖啡廳示意畫面,下為初始樣式

▲ 名片與客製畫面的樣式解鎖系統,並可連動商家

發想創意、開發、分析並設計執行產品專案是一件令人開心的過程,咖比產品的背景是一個現代社會許多人都常遇到的痛點,在規劃的過程讓我學習到了很多,期待產品專案的未來展望,是一個能夠真實地解決我們需求的合作啟發,讓我們再繼續下一杯咖比吧!