【UI】Redesign：屈臣氏台灣iOS App之發想與過程紀錄
Hello，我是Lena，小小UI Designer，這次做了一個Redesign UI的挑戰，此篇將會紀錄我Redesign 屈臣氏台灣App的發想過程，歡迎不吝指教交流。
一、動機
屈臣氏為歷史悠久的港商，進入台灣市場也超過二十年，穩固藥妝市場地位。身為台灣屈臣氏常客，無論開架美妝還是日常用品都會到門市補貨，因為促銷活動關係，每週六已經成為我的屈臣氏日（我不是業配啦）。
屈臣氏台灣的會員制度：寵i卡，於門市申請後必須下載App以開通使用，除此外App也提供線上購物、門市取貨的服務。一打開App的首頁雖然美觀也不至於雜亂，但使用後才發現有許多不順暢、操作不夠直觀的問題存在，因此決定針對部分介面重新設計。
二、分析與評估
仔細使用屈臣氏台灣App後，整理出了幾個主要問題：
- 底部Tab Bar無實質切換頁面功能
根據iOS Human Interface Guidelines，Tab Bar應為能於各信息間切換的功能欄。而當前屈臣氏台灣App版本的Tab Bar點選後，新頁面下方無Tab Bar，須點選左方Menu回到購物首頁。
2. 左方Menu內容過於雜亂
左方Menu除了商品分類及其他功能外，還放置了與Tab Bar相同的功能選單，排列位置被商品分類切斷，想返回購物首頁或切換頁面時較耗時間。
如上圖紅框「分店查找」功能流程所示，因「分店查找」功能置於下方，若想返回首頁須滑至頂部。原先與「會員專區」皆置於同層級Tab Bar區域，於Menu裡卻分隔一段距離。
3. 部分功能外連網站，導致畫面擁擠凌亂
Menu裡的常見問題與試用分享功能外連至官網，導致手機介面裡產生了Mobile Web的介面，操作不易且畫面凌亂。
使用者反饋分析
根據App Store裡的用戶評論，分析出以下訊息：
App Store裡的評論共220則，查看版本更新得知網路商城服務從三年前開始上架，於是我取出近三年共132則的評論，1、2顆星佔了約六成。
再查看用戶留言除了閃退、速度慢等程序問題外，也提出「介面不順暢」、「購物流程不佳」、「使用介面動線差」等與介面流程相關的評論。
三、提出解決方案
針對上述提出的主要問題，擬出了以下解決方法：
整理了新的信息結構：
比對舊版與Redesign後的使用者介面：
- 改良後將購物首頁加入Tab Bar，並置於單手操作熱區位置，方便使用者點選。
- 將原先右下角的「返回頂部」與「瀏覽紀錄」隱藏，「返回頂部」設計成點選狀態欄即可回到頁面頂部；「瀏覽紀錄」則放置於左方Menu區。
- 將上方搜尋欄固定，用戶瀏覽到一半時，可隨時搜尋想要的商品（如右圖藍框處）。
- 將會員專區放入Tab Bar，解決原先須點選Menu才可返回購物首頁或跳至其他頁面的問題。
- 原先須點選「行動寵i卡」才能顯示Qrcode供店員掃描，新版將Qrcode直接置於會員專區首頁，減少使用步驟。（備註：一次僅可綁定一張寵i卡）
- 將「行動寵i卡」與「開通寵i卡」之功能合併為「我的寵i卡」，若以綁定則顯示詳細訊息，無綁定狀態則可輸入卡號開通與綁定。
- 將重要功能獨立：「交易查詢」分開顯示為「訂單查詢」與「門市紀錄」，並將「我的點數」置於主要處方便查看（備註：詳細之點數消息僅能透過App自行查詢，門市無提供）。
- 原版之「地圖顯示」版下方並無功能按鈕，需點入才能查看相關訊息並進行導航或聯絡門市。新版將其添加以減少使用步驟，並與「列表顯示」呈一致性，讓無論習慣看列表或看地圖的使用者皆能在一樣的步驟內獲得同樣的體驗。
- 將「訂閱」修改為愛心圖標，增加按鈕觸控空間。詳細資訊減少不必要文字並加入圖標提高可讀性。
原版因外連Web，出現Web版Tab Bar及重複的購物車、分店查找鈕，導致介面凌亂（如藍框處）。
因為為固定的問題列表，所以可將常見問題寫入App，解決原版問題並保持頁面整潔，網頁之回饋鈕則改為右上角圖標，使用者不用點回Menu即可直接向客服反饋。
1.原先購物車介面之「數量」鈕，須點選再進行添加或減少，新版將其改為更直觀的加減鈕，減少操作步驟。
2.因部分商品有配送限制，新版在商品旁添加「勾選」，若遇到不同配送方式的商品，可選擇部分進行結帳，無須刪除、反覆加入購物車。
因將主要功能顯示於Tab Bar，故將原本的Menu加以整理，刪除重複功能。
四、其他
屈臣氏於台灣藥妝有一席地位，App雖有持續更新卻遲遲無改善使用流程，也無針對用戶評論回應。進行競品分析時，發覺另一藥妝廠商在App方面較屈臣氏佳，雖有負評但流程較之順暢，希望屈臣氏有機會能改善並提高App的使用者體驗，增加用戶使用率。
這篇僅紀錄我就生活中使用到的App作改良及發想的過程，因經驗缺乏，可能有許多沒考量到的要點，還請大神路過鞭小力點，謝謝觀看。
