Uncles Two
Coffee Shop Mobile Application
UI/UX Case Study
12.2019
咖啡，已成為人們生活不可或缺的要素。台灣咖啡廳的數量更是高達上萬間。我與Uncles Two的老闆合作，採取色彩鮮豔及互動性高的客製化設計，希望協助他們宣傳，並帶出這間咖啡廳獨有的風格。
My Role
創意發想、設計研究、訪談調查、UI/UX設計
Wireframe、旅客流程、原型製作
Duration
3 週 / 12月 2019
Process
01
02
03
04
05
Research
Define
Design
Deliever
Prototype
現況調查
使用者訪談
需求洞見
產品目標
功能界定
流程規劃
架構線框
網站地圖
設計風格
介面設計
動態模擬
Environment
Uncles Two 有三個主要的區域：拍照區、座位區及會議區。 整體的氛圍均呈現明亮與放鬆的，且店內也擺設非常多的墨西哥風格的裝飾品。因此，有許多客人為此光顧及拍照打卡。
店內環境
Color / Style
對應於店內風格，以墨西哥的裝飾擺設為其明顯，尤其是很鮮明的仙人掌、面具、畫作等.......都可以強烈感受到老闆對於店 內風格的定義很明確。因此，結合墨西哥風格與Uncle Two咖啡廳的定位，我將橘色、黃色及棕色作為App的主色調，使顧 客使用此App就可以明確感受到店內風格。
Logo
老闆親手繪製
情緒版
Interview
設計前我也訪談店內顧客及老闆的想法作為參考。以顧客的角度，菜單是個關鍵，好喝的咖啡、餐飲及甜點等，能確實吸引顧客上門。聯絡資訊，若需訂位或外送服務，便於聯繫老闆。以老闆的角度，他希望能展示更多的店內訊息，吸引顧客光顧。
菜單
照片吸引顧客
聯絡
方式
即時聯繫店家
吸引力
快速抓住
顧客目光
店家
資訊
藉由app
達到宣傳效果
設計因子
Research
定義App的架構與功能之前，我先瞭解市面上關於咖啡廳相關的App，由於資訊量不足，我以網路較知名的咖啡廳Starbucks作為參考：(1)如何點餐；(2)菜單資訊；(3)網路付費方式及管道；(4)基本聯絡資訊；(5)最新消息。
以上功能架構確實是建立App的設計因子，但因為Uncle Two並沒有信用卡或線上付款的機器，因此線上支付功能將不採納。我也有詢問為何老闆不希望採購機器，他認為「空間與裝飾是我的重點，我希望可以邀請客人來店內享用並享受，而非帶一杯咖啡就走了。」
-
點餐系統
-
菜單
-
線上支付系統
-
聯絡資訊-營業時間、聯絡方式及地理位置
-
最新消息與相關訊息
Define
對應於設計風格及需求，進行設計的定義。設計風格以橘、黃、咖啡色作為主色調；設計需求以店家簡介、餐點資訊及聯絡方式作為主要服務內容；然而，我希望帶出店家及老闆具獨特、有想法的風格，因此設計上將有搭配互動的風格，期望能藉此吸引顧客來店用餐。
Function
Uncles Two 主要有三項功能：店家簡介、菜單及聯絡方式，希望提供給用戶的是透過手機 App 就可以感受到店內的氛圍，包含甜點、飲品的照片及價格，最後聯絡資訊主要是 方便用戶可聯絡到老闆，以下功能介紹:
店家簡介
1. 店家資訊
2. 店家環境
甜點簡介
1. 照片呈現
2. 甜點價格
飲品簡介
1. 照片呈現
2. 飲品價格
聯絡方式
1. 聯絡資訊
2. 座位預定
Sitemap
架構上依循著四種服務的制定內容：紅色為Uncles Two的四種服務；橘色為服務的基本流程；黃色代表預定的功能；綠色則是完成座位預定；藍色為首頁。
架構圖
Wireframe
針對Sitemap的制定，將所有的功能繪製出Wireframe，以下為Wireframe的繪製。
設計線搞
UI Elements
色彩
設計風格上，以Uncles Two的室內設計色彩：橘色、黃色、咖啡色為主。紅色與綠色作為強調色；黑、白與咖啡色為文字色。
文字
Uncles Two採用兩種字體：Skia與SF Pro Display。Skia字體為主字體，強調活潑與互動的感覺，；SF Pro Display則是用來作為日期挑選、資料篩選等用途，讓使用者不要困難的觀看。
元件
此App有許多客製化的地方，因此有許多元件是另外設計的、尺寸也標示出來；然而，些許元件，如導覽列、主選單、日期挑選等則是採用IOS Design規範為主。
Deliver
首頁
首頁中間設定一個圓形的按鈕，點選後，將會旋轉並出現簡易的小動畫，並跑出所有的功能包含：簡介、甜點、飲品及聯絡方式，使用者可依據自己的喜好點選想要觀看的內容。
啟動前
啟動後
店家簡介
Uncles Two 的環境具有豐富的色彩特色與些許墨西哥的元素點綴， 我希望將這些元素展現給用戶感受，進而吸引用戶前來拜訪。
商品簡介
這裡主要顯示 Uncles Two 招牌的飲品及甜點，使用互動式的轉換方式來呈現，下方呈現其飲品及甜點之價格。此 App 僅顯示飲品及甜點價格原因是目前僅一位老闆，他不希望以外帶的方式來經營，因此透過照片的方式呈現，希望顧客能真正到店享用好吃的飲品及甜點。
飲品簡介
甜品簡介
聯絡方式
Uncles Two 的聯絡方式則是放在最後一頁，僅需要按下下方三個按鈕即可連結到該功能。
電話資訊
聯絡電話於此處，按此按鈕即可致電給老闆。
此按鈕可連結至 Uncles Two 的官方粉絲團。
訂位資訊
此按鈕可連結至訂位頁面，即可訂位。
訂位資訊
主要是訂位的資訊，最上方將顯示店面最簡易的平面圖，綠色的點是希望點選的位置， 若位置上有人則會呈現紅色，無法點選。下方會需要填寫的定位者資訊包含：姓名、人數及時間，最後預定完成後，將預留 10 分鐘保留位。
訂位頁面
人數選擇
日期選擇
完成預訂
設計風格
Prototype
本次設計期望強調客製化設計，較多互動性功能、滾動頁面等表現手法帶入其中，進而符合Uncles Two獨特風格的設計。
困難
由於Uncles Two是我第一個實際練習的作品，對於Adobe XD的工具操作並未成熟，因此在設計上花費許多時間在調整跟熟悉工具；(2)花費許多時間與老闆跟顧客溝通，由於兩者間並未站在同一個角度理解此App的設計，因此我在功能上的篩選花費較長時間去溝通及調整。
解決
對應於工具上的不熟悉，我嘗試去挑戰Adobe 的Daily 100來找尋我需要的功能，若較為困難的互動式流程，我主要上網觀看教學影片學習，並運用在我的作品當中；功能制定上，最後取決於老闆的建議，以宣傳為主，並非朝向消費平台的方式設計，因為老闆目前唯一人經營，較難兼顧店面及網路市場，因此希望Uncles Two的平台來達到宣傳效果即可，讓消費者能以到店消費為主。
結語
Uncles Two是我學習UI/UX設計的第一個作品，對於咖啡產業的熱愛，因此，我與Uncles Two的老闆討論產品設計的開發，從前期研究、設計流程的開發、工具的使用、使用流程的順暢性等，皆由自己跟老闆一同討論，雖然是第一項作品，但我希望能透過不同的表現手法進行設計，展現此App的獨特性。