新零售 App 的改版
背景介紹
此專案客戶為全世界知名量販店之一，在台灣掛名為外商公司，但其在台本地發展已近三十年，因此擁有和本土業者無異的背景和影響力。截至今年為止，在全台各地已擁有上百家分店，主要分為兩種不同型態，一是大型量販店，二是小型便利店，兩者皆持續新增中，近期更與台農合作，推出新型態分店。
目前在台灣的整體零售市場，由於消費者的科技使用率逐漸增高，因此數位零售需求也快速增大中，為了因應此市場變化，客戶提出將線上和線下零售體驗完整融合的需求，此案被切分為兩大階段，第一階段先將舊有之兩款App合併且做改版優化，第二階段則是上線電商原生化的再版。
為何要Redesign?
如同上述所說，台灣的消費者和市場都正快速朝著數位方向前進，小至一家飲料店，大至量販店或百貨公司，紛紛推出自己的App，以提升公司的整體數位性，並藉此增加消費者的黏著度及忠誠度。此客戶本就有兩款上架多年的App，一是為線上顧客的電商購物用（網頁導向型App），另一款則為服務線下顧客的行銷專用，首次改版最重要的目標即是將兩者合併，藉此整併線上及線下服務，另一重點為新增符合時下新零售的功能，像是錢包和掃碼購等。另外，在UI的部分，舊版的介面設計是以單純的資訊導向為主，首頁也是將十大功能並排陳列，無法達到線上行銷的需求，這些都被列為此次改版的重點之一。
・舊版兩款 App，左為行銷，右為電商
專案角色和流程
UX (部分功能）：釐清需求，確認邏輯，產出flow，主要負責規劃全新的錢包流程，並參與整體App的互動設計，優化整體使用者體驗，改善舊有App的使用痛點
UI (全案)：以客戶的公司設計規範為底，制定新版App的設計系統，利用UI設計提高使用者的滿意度及對品牌的忠誠度，並在改版之際帶給使用者全新的視覺體驗
・錢包功能 flow 手稿
設計洞察及核心原則
經過競品分析和需求訪談等過程，我們和客戶確立了這個專案的設計原則，這些原則一直在專案執行時被反覆提到，目的就是為了讓我們在思考新功能或是面臨抉擇時可以有個決策標的。
1. 新零售的一體性：對於零售市場來說，前幾年是電商年代，現在則是走到了新零售年代，就像阿里對新零售的定義：「以消費者體驗為中心的數據驅動的泛零售形態」，要做到完整的「泛」零售，需要考量到多層面的商業邏輯和系統架構，由於此客戶在線下部分已經非常發展得非常完善，像是店鋪服務和物流等，但在線上零售部分，還有許多可以發展的空間，因此，我們首要任務就是提升線上的服務規模和品質，並將它們以使用者和數據為中心，繞出一個更完整的圓形。由於第一階段是以線下服務的整併為主，因此在新版的首頁設計上我們凸顯了會員服務和錢包功能，到第二階段加入了線上購物功能，我們也沒有因此捨棄原本的線下服務，而是透過排版，重新調整了諸多功能在首頁上的比重，希望藉此在同一畫面上，顧客可以更快速又便利的使用線上和線下服務。
・新版首頁功能分佈（紅色為線上服務；綠色為線下服務）
2. 資訊的實用性：經客戶調查，此產品「大部分」的使用者，是介於30～50的已婚婦女，在專案初期，客戶就提到希望我們可以在設計時優先考量這些使用者的使用習慣，相較於年輕一輩追求快速新穎的特質，這些使用者更在乎穩定性和實用性，像是提示的大小、折扣的詳細說明或是系統的失敗率等。以促銷目錄頁面為例，舊版的頁面僅提供目錄檢視的功能，但在新版，我們在目錄的每一頁下方提列了該頁商品，藉此同時滿足想要逐頁瀏覽目錄的使用者和想要快速得知優惠商品的使用者。
・促銷目錄切換頁面時，下方商品隨之切換
3. 操作的直觀性：因為這次改版，會將整個介面翻新，對很多既有的使用者來說，可能會需要經歷一段適應期，同樣的，在新功能的部分，考量到使用者對於3C產品的適應性，我們會傾向把操作互動設計得更直覺，讓使用者不需要經過太多思考就可以完成操作。
遇到的挑戰
1. 系統的限制：設計及開發過程中，遇到許多已運行多年的舊系統，但客戶並沒有打算為了這個新專案更新舊的系統，因此轉變為新的App要去配合舊系統的狀況時常發生，但就設計的立場來說，為了建立好的使用者體驗，我們仍希望在限制框架中，透過一些引導和提示，讓使用者間接的或是直接的略過某些問題。以會員功能為例，此客戶的會員制度由於時間差的關係，線上及線下的會員分別被存於兩套系統，但一般使用者在無特別告知的情況下 ，無法意識到此兩種會員的差異性，而由於系統的限制，現階段仍無法將兩者合併，因此我們提議透過優化會員登入及註冊流程，提高兩者的整合率，用一連串不中斷的流程，讓新使用者方便的快速註冊兩個帳號。
・會員頁面由左至右分別為登入前、綁卡前及綁卡後
2. 整合多個資料來源：此客戶本身擁有許多合作的外部廠商，部分功能會需要同時對接兩個以上的系統資料，因此架構上需多加考量此方面問題。以錢包功能為例，客戶同時與錢包儲值廠商及銀行業者合作，但像是在交易紀錄畫面，有兩個系統資料來源，卻需要在畫面上一起呈現，因此在設計實作上，我們需經過一連串完整的彙整，最終將資料合理的並存在畫面上，目標都是讓使用者可以清楚瀏覽所有資訊，並且不會感到違和或是使用不便性。
・錢包功能實際有兩家廠商資料組成
UI重點
本次改版，視覺上的改變非常大，由於客戶的企業色為藍紅兩色，視覺上若是給予兩色相同的比重容易在視覺上製造混亂感，因此在設計提案時期，我們便提出兩色分別作為主色，共兩版的視覺提案，最終由於紅色和競爭對手太過相近，因此採取了藍色作為主色的視覺，紅色則以裝飾方式出現在畫面中。另外，由於客戶的企業藍色，從顏色角度來看，稍嫌深沈，我們也因此和客戶溝通是否可稍微拉高彩度和明度，另一方面，在色彩心理學中，藍色是一讓人感到舒服和平靜的色彩，我們向客戶提出了透過大圓角和可愛插畫做為輔助的想法，這幾個新的視覺設計重點，目的都是為了藉著設計讓產品趨向並符合客戶本身的企業理念：溫馨待客。另外，客戶也有提到，舊版的App純粹是一資訊型App，因此稍嫌缺乏一些和使用者之間的互動性和趣味性，鑑於此，我們在這次新版App，特別加入一些動畫設計的元素。
