About Project
Liteshop 輕電商是型態靈活的電子商務服務平台，可以針對不同的商業規模需求，透過不同的功能來建置優化商品銷售頁面，如同原子設計的結構，從只有單一商品到品項繁多的商家網站都能完美支援建置。
這次的專案是時隔一年配合新功能與收費制度上線的 landing page 改版。
Role
UI/UX designer
Team
Front-end engineer
Sales, Stakeholders
Client
Stakeholders
Product Goal
-
增加產品收益
-
提升產品知名度
-
確立品牌形象、定位＆差異化
-
減少產品介紹的客服成本
Project Goal
-
協助增加產品註冊用戶數
-
讓產品更好地被了解
-
協助宣傳新上線功能
-
展示品牌形象＆產品特色
Requirements
-
招募新註冊用戶
-
透過視覺 & 介面設計協助打造品牌形象
-
產品服務介紹 & 特色說明
-
介紹主打新功能「行動官網」
-
介紹「分銷功能」嘗試觸及新用戶族群
-
產品資費方案介紹
User Interface
前期未開發規劃區塊
Layout description
-
主視覺形象刊頭（註冊行動呼籲）
-
輕電商主打星——行動官網（產品概念）
-
服務特色（雙層使用者、兩階段執行）
-
系統簡介（基本功能）
-
輕電商推薦——分銷管理（獨家功能）
-
金流新選擇——街口支付（合作曝光）
-
資費說明（公開費用、註冊行動呼籲）
-
品牌推薦（產品背書）
-
粉專連結 ＆ 註冊行動呼籲
01.登陸畫面
展示品牌和商品形象區塊。意圖在展示主視覺風格與行動引導。
以產品標語作為註冊行動呼籲主角，並透過登場人物引導後續視覺動線。
02.主打功能、平台特色介紹
行動官網功能介紹推廣。以商店介面和賣家商店商品連結做實際展示，讓使用者了解輕電商對各種規模商家的兼容性與靈活度。
透過開發回應用戶需求：
-
與多數電商平台不同，平台所訴求的用戶使用情境是部落格、粉絲專頁等平台的購物車鑲嵌串接或是單一產品直購頁面，而非以完整獨立賣場網站形式經營。
-
參考上線以來用戶的持續反饋，開發「行動官網」功能，讓賣家能以過去個別建立的單一商品為基礎，快速群集整合，建立品牌商店或限時銷售賣場。增加用戶對銷售形式的選擇並完善對不同銷售規模的支援。
03.服務特色、關於輕電商
電商服務平台眾多，在品牌知名度不特別高的狀況下除了透過廣告投放進行行銷宣傳外，找出並放大自己與眾不同的特點、制定鮮明的品牌印象、培養建立用戶的信任感，訂立明確的服務價值成為一大課題。
透過「形象影片」和點出「使用者訴求」二方式，讓品牌服務形象與對象等整體輪廓更加鮮明確實。
使用者輪廓再定義：
-
根據客服詢問經驗＆平台前後台所觸及的對象皆視為使用者概念，將使用者分為賣家與消費者兩者。
-
除了為一線實際用戶的賣家做營運電商流程上的優化，更進一步協助了解與打造符合消費需求的平台購物體驗。
-
幫助消費者釐清理解 Liteshop輕電商 是提供賣家做銷售營運活動的平台系統服務單位，而非販售產品內容之商家。以降低消費者來電客訴消費糾紛或查探訂單的情況。
04.系統介紹
平台功能簡介，並根據過往客服紀錄資料，將詢問度較高的一些項目納入說明。
05.分銷系統
獨家特色功能使用情境介紹。在這次前期研究時訂出了銷售目標用戶族群，透過簡單的賣家角色故事，分析使用對象與銷售情境，期待活絡現有用戶對該功能的使用＆開發吸引有分銷需求的用戶群。
09.合作露出
後續追加「街口支付」串接服務宣傳區塊。
06.資費說明
在改版前公司時常收到輕電商平台客製化需求，以及電商廣告設計案件。藉由這次改版整合了這些業務，將客戶需求依據資費拆分為「客製化需求」、「一般註冊」、「年約方案」三類說明項目。
07.品牌商家推薦
為增加平台的品牌＆角色敘事結構的可信度和說服力，在徵求用戶訪談的同時也募集產品使用心得。
透過現有實際用戶背書，以及分享他們應用平台服務的展示頁面成果作為範例，讓未註冊的用戶族群能更具體的想像和確認該產品是否符合自身之使用需求。並以無償在平台頁面上曝光商店連結作為回饋感謝。
08.註冊行動呼籲
做為首尾呼應的第三次 call to action，再次給予使用者形象面的事物作為延伸或再次加深產品名印象。
Visual
-
視覺風格重點：
簡潔明快，易讀性高的留白主
-
Guideline：
沿用過往版本的色彩計畫，挑選訂定主配色系
-
尺寸技術需求：
RWD 響應式網頁 / Bootstrap4 & Sass
illustration
角色設計視覺風格：
-
配色配合色彩計畫
-
以近年主流的美式風格，較鮮豔明快、曲線比例對比高的區塊上色方式呈現人物形象。
-
但盡量維持成人身形而非Ｑ版設計，用以訴諸與目標用戶族群之共鳴與產品專業性。
Strait & Solution
-
1. 專案中期發現插畫角色不夠亮眼突出，該怎麼修正強化？一、透過調整曲線比例、提高配色飽和度與對比性，增加角色的戲劇性張力。 二、優化情境描繪： 利用段落情境讓角色更融入其中，增加圖文契合度，以強化角色與登陸頁描述情境內容之間的連結。
-
2. 與團隊前端工程師 (/網頁設計師) 對於介面視覺有不同的看法 (配色上、圖面呈現上、執行技術上) ，是如何處理面對的？在未影響到策略層面的視覺設計以執行導向優先進行溝通妥協，透過大量調整與溝通經驗進行協商製造雙贏。 重點實例分享： 在「分銷功能」區塊對於呈現方式分為以故事敘述的文章段落，以及簡潔條列式的資訊圖表兩種。 前者期待透過賣家第一人稱敘事行口吻在使用旅程分享過程中點出分銷功能使用方法及其便捷性。 後者考量段落敘事文字過於冗長瑣碎而採用列點式的簡易資訊設計，減少版面文字量更加俐落明快，讓使用者能快速掌握單元信息重點。 在團隊堅持採用段落文章式排版呈現後，經過多次溝通，最後爭取到嘗試在插圖中加入簡單的圖表幫助使用者了解文句陳述情境。
-
3. 資費方案單元的分項說明和 CTA 按鈕經歷多次修改，最後是如何定案的？一、方案內容： 原以新舊制可用功能與費用作為主要說明內容，再加入年約收費制度說明顯得複雜無章。 後重新定義登陸頁面是配合全新收費方案改版上線，把視同年 9 月之後註冊之新制用戶為主要訴求對象。 故將表格改為針對未註冊新用戶之資費方案列表，舊用戶轉新用戶之相關說明統一由後台系統進行公告。 二、Call to action 按鈕： 原本三個分項都各自對應一個按鈕，但其中有兩個其實一樣都是註冊行為的召喚作用，在註冊流程中無法讓新用戶了解二者方案的差異。 在參考 CTA 倒三角的視覺設計原則後，決定以單一按鈕突顯聚焦、減少使用者對方案間的混淆，並在原按鈕處增加註解文字區塊，降低在視覺上的失衡。
-
4. 企業尚在探索品牌定位、建立差異化的過程，對專案執行有什麼樣的影響？在電商平台百家爭鳴的局勢中，需尋找出自己的獨特性與立足點。而當時的狀態確實造成一些執行推進上的困難。 將與視覺及介面設計有關的任務列出，和產品目標需求加以比對，調整決策出執行上線的順序權重： 角色設計： 第一階段＿賣家/消費者形象（已完成上線） 第二階段＿輕電商客服形象 產品介紹： 第一階段＿展現使用者相貌——分銷、服務特色單元（已完成上線） 第二階段＿形象動畫影片 (已完成分鏡腳本大綱) 降低產品介紹客服成本： 第一階段＿方案說明、系統介紹、各形態規模頁面範例（已完成上線） 第二階段＿FAQ頁面 (已完成設計) 、聊天機器人 （在任職間公司未正式進行第二階段項目排程，僅能以製作交付完整策劃文件以供日後接續執行之參考。）