Sekaimen E-commerce Website
世界門是一間在台灣、日本、新加坡擁有據點的代標代購電商平台。我主要負責企業識別重新設計以及電商平台大改版，該專案的目標是透過更直覺的使用者體驗與介面留住及招攬客戶。
Visit Site 看看網站 →
執行期間
2021/05 - 2021/08
專案挑戰
01 | 錯估平台規模，導致時程緊繃
專案開始前，需先溝通報價，合約簽署再進入正式製作。這是我自由接案時期，第一次接手的大型專案，由我負責 UI/UX 設計流程與產出，從定義問題到交付最終設計成果給前端工程。但平台架構評估錯誤，時程安排太過緊迫，也因此得到滑鼠手，這部分是始料未及的。
02 | 未做市場研究，重複溝通釐清流程
開始製作後，未做市場研究及分析，在不了解代標代購的生態下，耗費過多時間與客戶開會討論。
03 | 時程安排失誤，版面多次調整
世界門除了服務台灣外，也服務香港、新加坡、馬來西亞與美國地區消費者，平台需多語言版本。雖然先從英文介面開始設計，但英文校正卻在開發時才進行，重新調整幾次版面，花費不少時間。
04 | 計畫趕不上變化，上線時間延宕
專案開始後，不論我方或客戶皆遭遇不同困難，也因此上線時間延宕至2024年才上線。
發現問題
01 | 功能層級太過分散、不夠明確
首次使用世界門網站，主要功能像是「代標」、「代購」位置不夠明確，大幅降低觸及。加上功能層級太過分散，訊息過多增加複雜度，未能整合成多個簡單步驟，使用者難以理解。根據UX法則的希克法：提供選擇越多，使用者需要做出決定的時間就越長。第一次使用世界門網站的確讓我不知所措，而這也是我認為需要改善體驗的地方。
02 | 流程不夠簡易、直觀
「初次使用難上手、使用操作複雜」，這是客戶集合初次使用以及長期使用者的意見。世界門網站操作方式與其他電商平台大相逕庭。除了上述提到，功能層級不夠明確外，當使用者終於找到代購網站時，點選按鈕卻出現另一個彈跳視窗加上新分頁，導致流程步驟被打斷，使用起來不夠直覺，且容易混淆。
03 | 缺乏一致性風格，視覺色彩混亂
世界門網站色彩豐富，卻過於雜亂，分辨不出主要與次要色，尤其在登入頁面，按鈕色系多達三種，導致使用者不確定如何選擇。美觀的設計會在人類大腦中產生積極的反應，並引導使用者相信這個設計可以達到更好的效果。當產品在美學上令人愉悅時，使用者更能容忍次要的可用性問題，增加使用者可靠性，減少學習成本，強化用戶對於產品的認同感與信心。
資訊架構重新整理
綜合以上問題，首要目標是將網站的資訊架構重新整理，並規劃流程，這就是最初評估錯誤的地方。彙整後才明白，世界門是一個我未接觸過的大型專案，功能層級非常多，其中又以會員中心複雜度最深。
線框稿繪製
經過資訊架構整理，心裡已做好準備，但實際執行卻打破我的想像。當初合約簽署提到線框稿完稿時程只需7個工作天，而這7個工作天硬生生繪製了100多個畫板。當完成時，可說是信心滿滿成就感十足，交付成品時卻被客戶打了幾記耳光。
線框稿是低擬真的網站藍圖，已可讓客戶明白整體架構及功能層級分配，才察覺原來會員中心的整體流程有誤。上一階段提到，會員中心最複雜，此時趕緊補上遺漏的市場研究與調查，加上幾天的會議討論，釐清各個功能與流程，才讓此階段順利落幕。
介面重新設計
正如開始所說，錯誤評估製作時程，整個介面設計只訂了14個工作天，周一至周日幾乎每天趕稿。雖然對於進行到介面設計超級興奮，但興奮後隨之而來的是沮喪與焦慮，還好保持著運動習慣，讓我有些許的多巴胺能夠維持正向心態繼續專案。
從察覺問題、市場研究、釐清流程、到最後介面改版，我們花費2個月時間溝通與調整，中間當然有需要克服的意見分歧、或是溝通障礙，但經歷這些達成共識後，反而更能夠在用戶端與商業端之間達到平衡點。
身為設計師，時常需要從用戶端思考，卻往往忽略數據分析與商業角度，雙贏局面實屬困難，使用者體驗設計亦是如此，不會有「完美」的設計，使用者百百種，不同角度切入就會有不同成果，如何保留產品的核心價值，又可以同時滿足用戶與企業，是我一直在努力的課題。接下來透過新舊版比較，來了解此次改版的重點吧！
舊版首頁：
問題 - 功能鍵不明確、層級不夠明顯、畫面太零碎、狀態不明顯、用色過於豐富，導致視覺分散無法集中。需逐步確認圖文才能夠開始進入下一步驟。
新版首頁：
優化 - 在開始製作以前，必須先確立品牌主要用色。品牌色彩非常重要，既可留下深刻印象；更能夠引發使用者的反應與情緒共鳴，例如講到麥當勞就會想到「黃色」。
世界門品牌色為「藍色」，品牌色彩心理學提到，藍色被最多企業採用，代表著「信賴、可靠、負責以及安全。」世界門企業核心理念也是如此，欲帶給消費者可以放心代標代購的平台，所以沿用原本的藍色系，將色彩加深加強對比度，讓使用者更容易閱讀。
舊版登入頁：
問題 - 按鈕顏色多達三種，功能層級分配不夠明顯，使用者容易混淆或不知所措。
新版登入頁：
優化 - 舊版按鈕目標不明確，而距離過於相近，用戶短時間內難以辨別。品牌色確立後，可以看到按鈕明確、層級分類。首先「登入、註冊」為同一層，分配在最上方，使用者視覺由上往下選擇；第二層為「資料輸入」與「第三方登入」服務，最後則為按鈕。將層級明確分類後，步驟清楚明瞭，使用者再根據自身習慣，自由挑選註冊及登入方式。
舊版公告頁：
問題 - 重要層級未分配、載入資料方式讓使用者無所適從，難以找到所需資訊。
新版公告頁：
優化 - 將「重要消息」釘選在最上層，並用紅色icon提醒使用者注意資訊；考量到色盲情況，重要訊息圖像形狀為「圓形」，使得在視覺上與眾不同；再將最新消息排列在後，採用方形呈現，最後為一般訊息，根據日期先後做排列。「載入更多」看似方便，但容易導致頁面過長，資訊過多；故新版採用「選擇頁數」方式，方便使用者做挑選。
舊版代購流程：
流程 - (1) 在首頁選擇欲代購網站 → (2) 新開分頁+彈跳視窗 → (3) 在彈跳視窗頁瀏覽商品 → (4) 複製商品頁網址 → (5) 回到新開分頁 → (6) 填入代購所需資訊 → (7) 再上傳商品圖片 → (8) 加入購物車 → (9) 系統導至會員中心 → (10) 送出訂單
問題 - 代購流程複雜，步驟多達10步；新增分頁加上彈跳視窗讓人疑惑；協助代購表格不明確，使用難以上手，需要花費時間研究。加上舊版部分代購網站未介接API，故整體流程更為雜亂。
新版代購流程：
流程 - (1) 在首頁選擇其他網站 → (2) 進入頁面選擇品牌 → (3) 點選後開啟新分頁 → (4) 新分頁瀏覽商品 → (5) 回到原頁面複製商品網址 → (6) 填入代購所需資訊 → (7) 送出訂單
優化 - 使用者會在心中建立屬於自己的規則，舉個例，在電商網站購物可能經歷15-30分鐘時間瀏覽商品、登入/註冊、填寫資料、商品加入購物車、信用卡刷卡等步驟，這些步驟越簡化越好。
確定購物後，勢必得經過按下購買按鈕（或加入購物車）、資料填寫、付款，最後才成功。這些步驟基本上缺一不可（貨到付款或其他付費方式等同付款動作）最後交易才算成功。代購也是如此，需要填寫商品資訊，請平台協助才能夠繼續進行。
既然「填寫資料」動作無法刪除，那就需將其他流程簡化。這邊選擇簡化的是後面的步驟，資料填寫完畢，按鈕直接送出訂單，畢竟經過填寫期間，使用者有時間可以思考甚至反悔。步驟減少後，購物時間縮短，使用者增加購買欲望與信心，讓代購這條路變得簡單與流暢，獲得世界門所提供的服務，這才是身為產品設計師以及企業所冀望的。
這是擔任UI/UX設計師第一次執行的大專案，幾個月下來非常刺激。唯一可惜的是，在使用者研究這個環節無法確切執行，僅能依靠客戶提供的數據做粗略的分析研究。這個專案，是少數結合用戶、數據、商業，三個角度去執行的設計。能夠經手此次改版計畫讓我非常感激，明白到「優化、迭代」只能透過不斷觀察、順應趨勢，發展出貼近使用者需求、更加友善、且同時滿足商業目標的產品。