專案介紹
專門為美髮沙龍店家提供產品及課程教學的公司，以往的工作流程皆為電話接單、key單、人工受理課程報名，因為業務量大增而尋求自動化系統流程。
目標客群
美髮沙龍的經營者，青壯年以上的年齡層，多為35-55甚至更高。大多具備美髮業從業16-25年的經驗。對數位軟體不熟悉者居多。
我所擔任的角色
- 與兩名PHP工程師搭配執行專案，與客戶、工程師三方溝通並確認使用流程後，進行會員制購物系統的規劃、UI介面設計。
- 介面設計完成後進行RWD規劃、切版、版面bug修復。
產品目標
開發這個產品的目的是什麼？
與客戶進行訪談後，確認以下兩大要點：
- 深刻的品牌印象不只是供應商的角色，其定位是美髮沙龍的導師與益友，能提供專業的服務與知識，讓老闆們在經營的各方面都有所成長。此外，主打的自有品牌特色為天然、生機，堅持無農藥、無化肥的有機自然農法來提供原料。
- 自動化的訂購流程希望藉由購物系統簡化工作流程，讓前台下訂單、後台處理訂單連貫地被自動完成，並串接後台進銷存系統，進一步控管倉儲庫存數據。
小結
- 不以低價取勝，而以塑造專業品質為導向的形象設計。
- 易於操作的介面，便於不熟悉數位軟體的美髮業者使用。
- 連貫且合理的銷售訂單管理系統。（後台管理介面不在本次陳述的規劃/設計範圍）
我的設計流程
User Journey
嘗試定義出使用者操作系統的順序以及目的：
由於是封閉式的購物系統，只開放給認識的美髮業者，所以消費者必須被動由店家邀請成為會員。加入後，可以同時使用線上購物和報名課程功能。
Functional Map
在了解整體系統需求並梳理主要流程後，我們利用心智圖畫出網站的功能地圖，列出三大主軸，幫助客戶及開發團隊確認整體架構。
商品特性分析與溝通
在初期的需求文件中，客戶希望他們的商品能被分類如下：
但經過更深入的討論後發現，原本的分類同時具有「用途」和「品牌」兩種性質，而商品其實不會只符合其中一種（例：一罐洗髮精可能會是雲提的品牌，並且含有保養用途）。若真的進行此分類法，會導致商品歸類時困難，一個分類裡能包含的商品數也很少。
所以，我們把商品的分類法由「分類」改為「標籤」，如此一來，一種商品就可以用很多種方式被找到。
Flow Chart
在開始設計介面之前，我們利用流程圖將所有步驟和可能會發生的情況都列出來，例如登入時若忘記密碼，系統將如何協助使用者找回密碼，其中的驗證機制又是什麼；這個過程也讓規劃的盲點得以浮現出來，可以在進入畫面階段前，再次確認整體的功能全貌，並即時修正不合理的流程。
列舉其一：課程報名流程
針對報名人數上限和回饋金折抵的規則，做了判斷機制並列出所有可能的狀況。
列舉其二：會員註冊流程
會員是透過LINE@來加入的，故設計user id 綁定的方式，讓使用者往後可以用手機自動登入系統，不需每次都輸入帳號密碼。
Mockups
確認整體的流程後，開始繪製mockups，需要較複雜流程的功能，會先準備wireframe與工程師和客戶三方共同討論，待流程和欄位調整、確認後，才會畫成mockup。
首頁、企業介紹、品牌故事
購物車與結帳功能
列出已加入購物車的所有商品，在此處可以再次調整規格與數量，調整後小計金額會自動更新。當然，也可以刪除單筆項目。
在規劃時，先以wireframe形式畫出來提供給客戶確認欄位和流程。
與客戶討論後，依照其所希望的排版方式，將側邊的步驟提示圈圈移到最上方，並且微調顯示的資訊。
課程報名功能
課程報名的流程和操作介面，與購物車結帳相當類似，使用了相同的表單元件和排列方式，如此一來可以降低使用者操作的學習成本。
會員專區
依照客戶訪談以及User Journey的設定，我規劃並設計了可以快速獲取重要資訊的Dashboard。
網頁元件設計規範 (Style Guideline)
在網頁設計版型與風格確認後，為了在延伸其他功能頁面時能維持視覺的一致，便制定了色彩、字型、按鈕…等元件的使用規範，以及在協作工具zeplin上建立素材庫，以便團隊其他成員隨時查看、取用。
插圖設計
在空畫面 (empty page) 所出現的插圖，採用圓潤的風格。
網站改版
網站進入測試階段後，因頻繁接收到消費者端的反饋（抱怨），經多方考量後進行改版。
第一步：發現與釐清問題
問題一、上方導覽列在手機瀏覽時時不易被找到
使用手機操作網頁時，幾乎所有的消費者不曉得點擊 burger navigation 可以開啟選單，導致無法進行網站主要的功能，影響使用意願。
分析：因為客群主要為髮廊業主，平時接觸科技產品機會較少，也因為工作繁忙，花時間猜測、找尋網頁元件使用方法的意願較低，故不夠直觀的操作方式對他們較不友善。
問題二、商品篩選器排版與操作方式不良
消費者普遍認為此篩選器不好用，而不願意用，導致找不到想要的商品。
分析：
- 由於垂直排列的關係，要尋找需要的商品TAG相當不易， 尤其是手機版，因為選單高度太高，擠壓到下方的商品列表， 讓消費者無法第一眼就看到商品，而是迷失在一堆文字中。
- 選單的手風琴效果雖然可以用於縮放各主題，但視覺的效果曖昧不明，不易發現其功能，也就不會使用。
- 選單的篩選按鈕（橘色框線處）位於選單最下方，但不點擊便無法送出選項，使用者可能因為點選上面的選項後沒有反應，誤認為選單壞掉了。
第二步：市場類似網站研究
綜合以上的問題點，網站急須針對選單進行改版，否則將影響使用者體驗。我參考了數間已經上線的大型購物網站，發現幾乎都做了「手機版」網站，以針對行動裝置的操作來優化，並且在選單方面有相當細緻、多層次的設計。
※此專案礙於種種考量，不便另行開發一個手機版網站，故最後仍使用RWD方法調整選單。
做為參考對象的購物網站有東森購物、Lative線上購物網。他們的共通點為：
- 網站核心功能的選單長駐在畫面最下方（fixed），不需點擊任何東西就可以使用。
- 商品選單在收合的狀態只占一行高度，點擊展開後，會開啟至少占畫面2/3以上的空間，明顯區分選單和圓面的空間距離（或直接遮蔽），讓使用者可以專注䱷當下的操作。
於是，我汲取以上共通點後，針對整體商品特性，做調整再重新設計選單。
- 將核心功能選單展現在畫面最上方，並在商品介紹頁加上了 search bar，方便使用者隨時搜尋商品。
- 在商品頁時，畫面最下方顯示三個篩選主題：「品牌」、「用途」、「功能」，並且可以逐一開啟全螢幕選單，進行多選後按確認鈕送出。
- 送出後，有開啟篩選選項的主題字將會變成綠色，提醒使用者目前的商品是有套用篩選條件的。
同時，因應mobile選單的變化，desktop version的選單也同步做了調整。原本位於左側的選單提取到了頁面的最上面，並改為下拉選單，與手機版一樣，可以針對各個主題分別點選篩選選項。點擊或跳轉其他主題時，選單將維持展開的狀態。利用destop version 視野寬敞的特性，讓使用者多工處理所有的選擇動作，並讓視線保持在水平線上移動，減少捲動滾輪的次數。
我學到了什麼
這是我首次規劃、設計購物平台的經驗，在整個過程中我學到了以下兩點：
- 聆聽客戶的需求是基本功，但關鍵是運用程式結構的知識給予建議，提出可以讓網站變得更好的做法，並且說明「這樣設計如何讓產品變得更好用」讓客戶能理解、接受，是對規劃者的考驗。
- 設計一個營運端和消費者端都滿意的平台並不容易，尤其在B2B產品的初期需求訪談時期，很容易忽略C端的心聲，導致做出來的東西推廣遇到阻礙。在這個專案中，我了解到手機使用者可能會碰到的問題是什麼，操作手機的用戶有哪些常見的習慣或負面體驗，並能運用在往後的產品設計過程中。