top of page

Liteshop 輕電商 Landing page ver.3

2018.08 - 2018.09

Banner1-0.png

About Project

Liteshop 輕電商是型態靈活的電子商務服務平台,可以針對不同的商業規模需求,透過不同的功能來建置優化商品銷售頁面,如同原子設計的結構,從只有單一商品到品項繁多的商家網站都能完美支援建置。

 

這次的專案是時隔一年配合新功能與收費制度上線的 landing page 改版。

1. About Project

Role

UI/UX designer

Team

Front-end engineer

Sales​, Stakeholders

Client

Stakeholders

Product Goal

  • 增加產品收益

  • ​提升產品知名度

  • 確立品牌形象​、定位&差異化

  • ​減少產品介紹的客服成本

Project Goal

  • 協助增加產品註冊用戶數

  • 讓產品更好地被了解

  • ​協助宣傳新上線功能

  • 展示品牌形象&產品特色

Requirements

  • 招募新註冊用戶

  • ​透過視覺 & 介面設計協助打造品牌形象

  • 產品服務介紹 & 特色說明

  • 介紹主打新功能「行動官網」

  • 介紹「分銷功能」嘗試觸及新用戶族群

  • 產品資費方案介紹

Mockup-mobile.png
Mockup-pad.png
2. User Interface

User Interface

web-before.jpg

​前期未開發規劃區塊

Layout description

  1. 主視覺形象刊頭(註冊行動呼籲)

  2. 輕電商主打星——行動官網(產品概念)

  3. 服務特色(雙層使用者、兩階段執行)

  4. 系統簡介(基本功能)

  5. 輕電商推薦——分銷管理(獨家功能)

  6. 金流新選擇——街口支付(合作曝光)

  7. 資費說明(公開費用、註冊行動呼籲)

  8. 品牌推薦(產品背書)

  9. 粉專連結 & 註冊行動呼籲

01.登陸畫面

展示品牌和商品形象區塊。意圖在展示主視覺風格與行動引導。

以產品標語作為註冊行動呼籲主角,並透過登場人物引導後續視覺動線。

02.主打功能、平台特色介紹

行動官網功能介紹推廣。以商店介面和賣家商店商品連結做實際展示,讓使用者了解輕電商對各種規模商家的兼容性與靈活度。

透過開發回應用戶需求:

  • 與多數電商平台不同,平台所訴求的用戶使用情境是部落格、粉絲專頁等平台的購物車鑲嵌串接或是單一產品直購頁面,而非以完整獨立賣場網站形式經營。

  • 參考上線以來用戶的持續反饋,開發「行動官網」功能,讓賣家能以過去個別建立的單一商品為基礎,快速群集整合,建立品牌商店或限時銷售賣場。增加用戶對銷售形式的選擇並完善對不同銷售規模的支援。

03.服務特色、關於輕電商

電商服務平台眾多,在品牌知名度不特別高的狀況下除了透過廣告投放進行行銷宣傳外,找出並放大自己與眾不同的特點、制定鮮明的品牌印象、培養建立用戶的信任感,訂立明確的服務價值成為一大課題。

透過「形象影片」和點出「使用者訴求」二方式,讓品牌服務形象與對象等整體輪廓更加鮮明確實。

使用者輪廓再定義:

  • 根據客服詢問經驗&平台前後台所觸及的對象皆視為使用者概念,將使用者分為賣家與消費者兩者。

  • 除了為一線實際用戶的賣家做營運電商流程上的優化,更進一步協助了解與打造符合消費需求的平台購物體驗。

  • 幫助消費者釐清理解 Liteshop輕電商 是提供賣家做銷售營運活動的平台系統服務單位,而非販售產品內容之商家。以降低消費者來電客訴消費糾紛或查探訂單的情況。

04.系統介紹

平台功能簡介,並根據過往客服紀錄資料,將詢問度較高的一些項目納入說明。

05.分銷系統

獨家特色功能使用情境介紹。在這次前期研究時訂出了銷售目標用戶族群,透過簡單的賣家角色故事,分析使用對象與銷售情境,期待活絡現有用戶對該功能的使用&開發吸引有分銷需求的用戶群。

09.合作露出

後續追加「街口支付」串接服務宣傳區塊。

06.資費說明

在改版前公司時常收到輕電商平台客製化需求,以及電商廣告設計案件。藉由這次改版整合了這些業務,將客戶需求依據資費拆分為「客製化需求」、「一般註冊」、「年約方案」三類說明項目。

07.品牌商家推薦

為增加平台的品牌&角色敘事結構的可信度和說服力,在徵求用戶訪談的同時也募集產品使用心得。

透過現有實際用戶背書,以及分享他們應用平台服務的展示頁面成果作為範例,讓未註冊的用戶族群能更具體的想像和確認該產品是否符合自身之使用需求。並以無償在平台頁面上曝光商店連結作為回饋感謝。

08.註冊行動呼籲

做為首尾呼應的第三次 call to action,再次給予使用者形象面的事物作為延伸或再次加深產品名印象。

3. Visual

Visual

guideline.jpg
  • 視覺風格重點:
    簡潔明快,易讀性高的留白主
     

  • Guideline:
    沿用過往版本的色彩計畫,挑選訂定主配色系
     

  • 尺寸技術需求:
    RWD 響應式網頁 / Bootstrap4 & Sass

illustration

角色設計視覺風格:

  • 配色配合色彩計畫

  • 以近年主流的美式風格,較鮮豔明快、曲線比例對比高的區塊上色方式呈現人物形象。

  • 但盡量維持成人身形而非Q版設計,用以訴諸與目標用戶族群之共鳴與產品專業性。

Mockup-mac.png
4. Strait & Solution

Strait & Solution

常見問題

bottom of page