#Ecommerce platform
Finding the best e-commerce platform for your business needs.
專案概覽
隨疫情衝擊，實體通路與傳統零售品牌加速投入電商行列，企業冀求透過電商產品打造一站式購物平台，不過我們也從中發現，來自不同產業的企業，對於架站服務也有顯著的差異，因此我們為架站服務奠定新的產品目標，提供用戶輕鬆架站並串聯企業資源，提供 Web 至 APP 跨裝置開店服務。
專案期間
6 個月
擔任角色
UX / UI designer
負責項目
優化平台界面，電商模組元件
User Journey
首次開店的用戶旅程
初步定義「首次接觸電商」的用戶， 他們在任務關鍵點所遇到的情境及困難是什麼， 拆解這些轉折點，並找出用戶痛點：
痛點洞察
透過用戶旅程分析、內部訪談後，我紀錄並搜集客戶於平台上的使用反饋，列出以下觀察：
(1) 缺乏專業人力資源
企業缺乏數位專才或工程團隊，需花更多成本規劃、經營網站。
(2) 模組功能不符合需求
後台提供的模組無法滿足實際需求，以行銷模組為例：無法彈性客製行銷活動。
(3) 元件介面體驗不佳
後台區塊元件設計不佳，導致前台易用性差。
專案目標
零電商經驗也能輕鬆架站
根據前期用戶分析，我們瞭解不同企業組織下，使用平台的用戶來自不同專業領域，有近 85% 的用戶是第一次使用架站服務，並期望在架站過程中能降低學習成本，輕鬆上手做出符合品牌形象的線上商店。 我們也從競品、市場趨勢知悉有更多的需求來自彈性、客製化功能模組，除了開發元件功能外，本次的專案目標分成以下三大區塊：
前台元件設計
更彈性的購物流程
提供多元行銷機制
01｜優化前台元件
瞭解用戶對產品前台的使用情況、未來期待，進一步規劃可開發的元件。
Collage 質化研究
拼貼法
將產品的現有框架以線條描繪在畫布上，並模擬當前平台所提供的後台元件及框架功能，受訪者透過實際演練，運用紙片拼湊或在空白紙片中填上需求，而後放置畫布中。透過此方法讓參與者將個人想法、需求、感受，投射在具體物件上，藉此挖掘用戶的動機與深層需求，並瞭解不同產業及不同用戶屬性對於產品的實際需求。
觀察用戶黏貼在框架中的需求及期待
不同頁面造就不同元件需求，例：在首頁上用戶放置滿版輪播元件 Carousel 來呈現主視覺
觀察結果
功能導向型元件、瀏覽性元件，需優化其介面與操作體驗，而版型、視覺互動型元件則是目前所缺乏需納入開發及測試的項目，少數產業則期待在結帳流程有更多客製化功能。
競品分析及屏幕分辨率
我們進一步分析各大電商平台，並調查裝置市占率，將平台框架及元件比例重構，調整為更受市場所用之架構，並將跨裝置瀏覽體驗導入此次設計當中，根據 Statcounter 2018 至 2020 間全球屏幕分辨率統計，廣受用戶使用的裝置尺寸為：
NO.1－360*640
NO.2－1366*768
NO.3－1920*1080
定義元件架構與規格
元件組織了網站操作流程及瀏覽體驗，我們需確保設計元件的過程中，能考量數個元件組合在一起時所產生的層次及結構是否符合邏輯，而當他們被拆開置入於不同頁面框架或排序位置時，也能保有整體的合理性。透過這樣的高彈性原則，當用戶將數個元件逐步組合為品牌所需風格或佈局時，能輕鬆打造品牌商店體驗。
架站變得容易、更具客製化
初步開發元件後，我們將元件及新功能放在測試平台，使團隊中不同角色的人員測試這些元件，透過反饋瞭解到：「優化後的元件使前台體驗更順暢」、「可以架設出期望的版面」、「能夠更彈性的使用元件」等。
02｜設計網站模板
將各個不同屬性的元件組合為「區塊」或「頁」，用戶可快速選用組合好的模板來佈置網站。
用 Template 挖掘新點子
面臨設計卡關、毫無頭緒時，使用者可使用「網站模板 Template」快速建立商店版型與架構，若需要細部客製商店風格，也能透過後台編輯器改變元件樣式，而上架商品則可透過後台導入，快速建立商品規格資料。
Template 網站模板
根據現有產業類型，設計不同版型及風格樣式，引導用戶構思整體網站資訊架構。
03｜商店風格
設計不同風格圖標，客戶可於編輯器自訂 Typography 系統、色彩計畫，定義商店核心樣式。
商店圖標設計
根據圖標用研，設計認知適性高的圖形，並提供用戶套用不同風格圖標，企業可自訂圖標色彩，或上傳自製圖標檔案。
Typography 系統
我們提供自定義字型，用戶可通過不同字型樣式，打造專屬風格。
動態介面語彙
根據商店整體風格，設計輕量動態效果，這形成方向感及場景連貫性，引導用戶認知當前操作狀態，減緩使用者焦慮，客戶也能依據品牌需求、目標，自訂或上傳動態圖標，細化介面體驗或運用動態介面來提升情感設計。
04｜規劃購物車模組
定義元件規格並彙整購物車模組內的所有元件功能、架構。
元件組織與架構
用戶於後台設計購物車頁面時，需針對「確認購物明細」、「選擇物金流」、「填寫購物資料」、「行銷活動」等區塊進行版面規劃，除了滿足基本下單功能外，大多數用戶更聚焦於設計出無障礙下單體驗，並希望透過行銷活動增加購物慾。我將搜集來的用戶需求，整理出購物車組件，並針對每個元件進行規劃，我們的產品目標是：「用戶架站時，能透過這些元件打造直觀、個人化購物體驗」。
檢核元件邏輯
當數個購物元件組合在一起，形成「區塊」或「頁面」時，其產生的層次及結構需符合購物邏輯，而當元件被單獨或拆開使用時，也能保有整體的合理性。
客製購物流程
此為預設購物車版型，將購物流程分成三個步驟，從確認購物明細到訂單送出，我們注重直觀、易於操作的下單體驗，客戶可在後台編輯器自訂購物流程、物金流規則，也可新增並放入行銷模組，例如：優惠卷、加價購商品等，在流程上，品牌可以根據企業規模、經營策略，自訂所需流程。
客製購物車內容
購物車由多個區塊模組所組成，如下圖呈現，每個區塊擁有不同功能及目的，例：編號 2 ~ 6 各為不同屬性之行銷模組。
自訂模組規格
以下圖為例，客戶可根據商品性質自訂商品資訊項目、尺寸或數量控制項之介面，或自訂「總計」區塊需呈現的項目，另外我們在此區塊讓系統判定該訂單有無符合活動條件。
設置多元行銷活動
我們提供多種行銷模組，例：運用「首購禮模組」刺激用戶註冊人數，設計「滿額禮、加購商品」等行銷活動，使滯銷品透過促銷方案大幅增加銷售率。
05｜規劃物金流模組
定義元件規格並彙整結帳模組內的所有元件功能、架構。
個人化結帳體驗
我們提供多元支付方式、物流方案，因此在設計元件時，需著重考量元件的擴充性，當用戶於後台新增多項支付方式時，確保元件保持良好操作體驗，而結帳模組也由多個不同區塊所組成，分別為：物流、金流、訂購及收件資訊、訂單發票、金額明細等內容組成。
自訂物流方式
提供用戶設置多種物流、取貨方案，且設置常用收件人資訊，減少資料反覆填寫。
自訂金流方式
多種付款、結帳方式，顧客可管理常用消費行為，加速結帳流程。
06｜一站式跨裝置開店
考量並規劃不同元件在多種裝置中的易用性。
移動端體驗為核心
根據後台數據顯示，有 80% 的用戶從移動端進入網站，其中又以 APP 佔比最多， 大多數用戶使用移動端設備作為他們網購的首要選項。
移動端設計呈現
從 APP 到 Web ，確保一致的設計語彙、直觀的操作流程，使消費者沈浸於無障礙購物體驗。
專案成果
解決企業於電商通路的經營難題與困境，沒有電商經驗也能輕鬆開店，不僅商店風格與介面樣式，用戶也能彈性客製購物流程、活動促銷規則。
