在這次的練習中，我花費約3週，訪談與觀察 Starbucks App 會員，並針對訪談創造的 Persona , Empathy Map 提出 3 大解決方向進行 Redesign。
使用者調查
這次我一共訪問了 3 位使用者，皆為 Starbucks 星禮程 App 金星會員，根據訪談結果建立了一位 Persona －29 歲上班族王小姐，以及 User Journey Map 。
從 User Journey Map 與各個 Channels 的接觸點（touch points），我們可以看出使用者主要在以下幾個階段會使用 Starbucks App：
- 取得新品資訊與優惠資訊（推播或查看）
- QR Code 結帳
- 查看結帳結果/查看點數結果
針對以上接觸點進一步觀察使用者操作流程，發現以下三點問題：
- 新品資訊與優惠查找不易
新品資訊、優惠資訊分佈在行銷訊息、會員優惠等區塊，且以文字標題收合，平常不一定會點開來看，因此大部分使用者還是透過社群網站獲取相關消息。
我看到朋友分享在 Line 的買一送一圖片就會想買，但之前有出現過假圖風波，覺得蠻恐怖的，現在都會儘量在 Facebook 粉絲專頁先確認過。
2. 支付操作不易
QR Code 結帳畫面需要開啟三層才找到，儘管 App 搖晃即可開啟畫面的功能，但 2 位受訪者表示並不知道此功能，另 1 位則因為搖晃手機很難為情而寧願從畫面開啟。
排隊點餐時搖手機很怪，不想被看到，所以我都會先開好畫面給店員掃。
3. 會員相關功能除了支付以外，很少透過App平台完成
會員優惠資訊在金星會員資訊頁面，因目前除了首頁以外並沒有規劃一個「會員」專屬頁面，受訪者表示平常並不會特別點開「首頁」查看會員資訊，通常是透過社群網站或是門市店員提醒才會得知。
平常工作很忙不會特別去查會員有什麼優惠耶，頂多看集點活動（ 35 星換中杯飲料），我都在點餐時問店員，或是看店裡告示牌。
UX 策略
目前 Starbucks 有的網路通路就是 App 、會員官網、社群通路（ Facebook, Instagram ）其中 App 與會員官網內容較為接近，但 App 的定位更接近「星禮程會員互動平台」，故 App 應與社群網站的即時互動效果搭配，以創造出星禮程會員欣欣向榮的共榮圈（ Eco-System ）。因此，根據 User Journey Map 中定義的使用流程，我們將這次的優化功能分成 3 個方向：
1. 創造消費動機：新品 / 優惠資訊流程改善
2. 加強消費體驗：支付流程改善
3. 建立消費連結：會員資訊架構改善
App 設計
以下分幾點探討 Redesign 的重點：
資訊架構：
原本的 App 首頁主要呈現星禮程資訊，並提供行銷活動與門市資訊頁面超連結於下方，其他頁面則收合在左上角頁面。
新版資訊架構保持原本 App 內容，但將功能分為五大重點於下方功能列表：星心情（首頁）、隨行卡、星門市、星商品、星禮程，讓 App 得以聚焦在訊息獲取、到店消費、星禮程累積三大塊，資訊架構呈現如下。
首頁設計：創造消費動機－新品/優惠資訊流程改善
舊版首頁分析：
台灣
的 Starbucks App 可以明顯看出 Starbucks 商標與金星累積等級，並將行銷活動與門市查詢作為快捷鍵放在下面，其他的功能則收合在左上。
從此畫面也不難看出 App 的定位是 1. 會員等級與優惠 2. 行銷活動 3. 門市查詢
但根據使用者行為調研，使用者使用 App 目的主要是「支付」，查詢行銷活動、門市、會員等級反而是次要，而現有的 App 首頁則缺乏相關引導訊息。
日本
上方 Title 欄使用情感導向的問候，這是我第一次看到這樣的設計，覺得也蠻符合星巴克品牌生活化的印象。下方 Banner 的 eTickets , What's New 按鈕則是扁平化處理，且與上方 Title 底色色調一致，讓整體視覺更協調，但在第一次操作時容易讓人誤以為此 Banner 內容是文字、而非按鈕。
有趣的是日本的 App 將支付按鈕放在右下（因為我沒有綁定卡片，因此截圖字樣是 Get a Card），並作為浮動設計（首頁往下滑時按鈕依然會在右下同一個位置），有效引導使用者支付，也呼應了使用者使用 App 的主要目的「支付」。
新版首頁：
採用了日本版 Title 情感導向的問候（註：我自己蠻喜歡，也很想知道測試後使用者的反應）在畫面上區分成三大塊，會員、支付與新聞。
會員部分提供累點資訊、藉此提供消費累積點數的意願，強化消費動機。
支付部分，在畫面上呈現帳戶餘額，讓使用者能針對餘額選擇餐點或儲值，並提供快捷鍵按鈕，點擊後即會進入「隨行卡支付 QR Code」頁面。
新聞部分，以往收合且無縮圖的新聞內容讓人缺乏瀏覽的動機，在畫面上放上縮圖一來希望增加瀏覽動機，二來也是希望與官網、社群網站的行銷活動更一致。
支付按鈕的目的是提供快捷精確的支付流程，原先日本版的浮動按鈕設計會影響頁面滑動的操作，非常容易誤觸，因此新版採用固定位置且扁平化的設計。經過易用性測試之後，也證實了這樣能夠提升使用者的互動體驗。
隨行卡：加強消費體驗－支付流程改善
舊版支付流程分析：
如上圖，舊版 QR Code 頁面，若不使用搖動觸發的功能開啟 QR Code 支付畫面，從左圖到右圖，共要在 3 個不同畫面、 點擊 3 個不同位置才能開啟，非常不直覺。
而在開啟 QR Code 頁面後，我觀察到兩種掃描 QR Code 的操作方式：
- 由店員代為操作拿使用者的手機去掃描，店員按下完成付款，結束
- 店員請使用者將 QR Code 畫面放在掃描端，店員告知支付狀態，使用者按下完成付款，結束。
新版支付流程：
新版支付流程調整了以下兩點：
- 使用者最多只要 2 個步驟即可開啟 QR Code 支付頁面
- 使用者可在畫面上得知消費結果與金額，自主按下右上角按鈕離開
讓使用者在畫面上查閱消費結果與金額，最大的好處是讓整個交易流程充分賦權給使用者進行。對於日後想要發展「自助式」的服務，或是店員剛好忙著準備餐點時，這樣的賦權可以加速結帳流程。
因此原本的流程變為：店員請使用者將 QR Code 畫面放在掃描端，使用者看到支付狀態，使用者按下完成付款，結束。
星禮程：建立消費連結－會員資訊架構改善
舊版支付流程分析：
舊版會員相關資訊由首頁進入，裡面的資訊除了會員資訊以外，也夾雜著隨行卡相關的資訊與動作，造成從屬關係不清，我們發現有些使用者並不知道會員可綁定多張隨行卡以上，而多張隨行卡金額與點數是可以累積在同一個會員帳號下的。
隨行卡應該就是會員證功能了吧！只是現在都做成 App 了！
且優惠訊息上，首頁可以看到「免費中杯飲料」資訊，但使用者需要進入會員頁面後，在沒有任何資訊提醒、輔助下，點擊「星禮程回饋」才能看到該兌換券。（圖左到圖右即為使用者在兌換免費中杯飲料的畫面流程）
星禮程相關優惠之前常常忘記使用，需要店員提醒我才會使用。
新版支付流程：
在新版的設計中，我們主要針對以下問題作改善：
- 將星禮程與隨行卡功能分開，讓使用者明白這是「會員」App，而隨行卡是作為累積星禮程的支付方式。
- 將通知訊息數量在頁面與 Menu Bar 顯示，更明確的引導使用者前往查看會員訊息與兌換會員優惠。
- 點開兌換資訊後，點擊「兌換優惠」按鈕直接開啟 QR Code 掃描功能，使用者不用透過店員提醒再手動開啟 QR Code 頁面，讓整個流程更順暢。
易用性測試
之後，我使用 Sketch 內建 Prototype 工具與三位受訪者進行易用性測試，得到的反饋整理如下：
正面的反饋
一打開 App 就可以看到自己的餘額、點數跟新品資訊很棒！畫面很乾淨，喜歡被說早安的感覺。
要在下方找到相對應功能變得很清楚，尤其下方有通知數量這樣比較不容易忘記，而且也知道去哪裡查！
一打開App 就有按鈕可以直接支付，這樣直接多了。
原始功能優化
兌換優惠後突然被導頁到支付畫面，雖然很方便，但希望在操作時可以提醒我一下，不然有點錯愕。
原畫面會把可兌換的優惠說明放在首頁，這部分我比較喜歡原本的設計，在下方Menu 有紅字提醒還是有可能會漏看。
原本金星會員會有的金色星星小動畫，讓人很有尊榮感。改版後雖然資訊變清楚了，但質感似乎不如以往。
新需求
單店門市資訊希望可以按照我所在的位子排序，這樣就不會看到不相關的門市資訊了（像是新北市土城的門市離我好遠，而且平常根本不會過去那裡）。
希望App可以根據消費記錄推薦我商品，或是把我常常消費的商品放在收藏區。
希望商品部分可以有個筆記區，讓我把店員調的口味記下來，或是店員可以在他們那裡幫我 Key in！
結論
在進行完易用性測試後，除了對設計的功能改善有進一步的了解外，更認知到使用者對會員 App 還有以下的期待：
- 希望可以根據消費記錄或所在地點進行更精準的推薦
- 針對店內客製化的服務，希望能在 App 找到有相對應的功能
- 金星會員的畫面須強調高貴、尊榮的感受
透過了這次 Starbucks 會員 App 使用者訪談，我們先定義出會員的使用流程，再從流程中找出與 App 的接觸點，從中逐一觀察使用者所在意的各種面向，最後再根據這個與商品策略，重新定義會員資訊架構後，我們得以往創造消費動機、強化消費體驗並且建立消費連結這個主軸更加邁進。
