會員制購物網站設計

專案介紹

專門為美髮沙龍店家提供產品及課程教學的公司,以往的工作流程皆為電話接單、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 可以開啟選單,導致無法進行網站主要的功能,影響使用意願。

分析:因為客群主要為髮廊業主,平時接觸科技產品機會較少,也因為工作繁忙,花時間猜測、找尋網頁元件使用方法的意願較低,故不夠直觀的操作方式對他們較不友善。

問題二、商品篩選器排版與操作方式不良

消費者普遍認為此篩選器不好用,而不願意用,導致找不到想要的商品。

分析:

  1. 由於垂直排列的關係,要尋找需要的商品TAG相當不易, 尤其是手機版,因為選單高度太高,擠壓到下方的商品列表, 讓消費者無法第一眼就看到商品,而是迷失在一堆文字中。
  2. 選單的手風琴效果雖然可以用於縮放各主題,但視覺的效果曖昧不明,不易發現其功能,也就不會使用。
  3. 選單的篩選按鈕(橘色框線處)位於選單最下方,但不點擊便無法送出選項,使用者可能因為點選上面的選項後沒有反應,誤認為選單壞掉了。
第二步:市場類似網站研究

綜合以上的問題點,網站急須針對選單進行改版,否則將影響使用者體驗。我參考了數間已經上線的大型購物網站,發現幾乎都做了「手機版」網站,以針對行動裝置的操作來優化,並且在選單方面有相當細緻、多層次的設計。

※此專案礙於種種考量,不便另行開發一個手機版網站,故最後仍使用RWD方法調整選單。

做為參考對象的購物網站有東森購物、Lative線上購物網。他們的共通點為:

  1. 網站核心功能的選單長駐在畫面最下方(fixed),不需點擊任何東西就可以使用。
  2. 商品選單在收合的狀態只占一行高度,點擊展開後,會開啟至少占畫面2/3以上的空間,明顯區分選單和圓面的空間距離(或直接遮蔽),讓使用者可以專注䱷當下的操作。

於是,我汲取以上共通點後,針對整體商品特性,做調整再重新設計選單。

  • 將核心功能選單展現在畫面最上方,並在商品介紹頁加上了 search bar,方便使用者隨時搜尋商品。
  • 在商品頁時,畫面最下方顯示三個篩選主題:「品牌」、「用途」、「功能」,並且可以逐一開啟全螢幕選單,進行多選後按確認鈕送出。
  • 送出後,有開啟篩選選項的主題字將會變成綠色,提醒使用者目前的商品是有套用篩選條件的。

同時,因應mobile選單的變化,desktop version的選單也同步做了調整。原本位於左側的選單提取到了頁面的最上面,並改為下拉選單,與手機版一樣,可以針對各個主題分別點選篩選選項。點擊或跳轉其他主題時,選單將維持展開的狀態。利用destop version 視野寬敞的特性,讓使用者多工處理所有的選擇動作,並讓視線保持在水平線上移動,減少捲動滾輪的次數。

我學到了什麼

這是我首次規劃、設計購物平台的經驗,在整個過程中我學到了以下兩點:

  1. 聆聽客戶的需求是基本功,但關鍵是運用程式結構的知識給予建議,提出可以讓網站變得更好的做法,並且說明「這樣設計如何讓產品變得更好用」讓客戶能理解、接受,是對規劃者的考驗。
  2. 設計一個營運端和消費者端都滿意的平台並不容易,尤其在B2B產品的初期需求訪談時期,很容易忽略C端的心聲,導致做出來的東西推廣遇到阻礙。在這個專案中,我了解到手機使用者可能會碰到的問題是什麼,操作手機的用戶有哪些常見的習慣或負面體驗,並能運用在往後的產品設計過程中。