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