top of page

L′HERBOFLORE PLUS

​蕾舒翠PLUS 電商平台

2019-2020 · UI Designer · UI/UX · 用戶研究
蕾舒翠PLUS-icon.jpg
封面.jpg

​背景

霈方國際股份有限公司,在2002年成立,有18年專櫃旗艦店經驗,

台灣唯一IPO美容保養集團,旗下有4大自有品牌。

在2019年啟動「蕾舒翠PLUS」新零售電商計劃,並於2020年4月電商平台App正式上線。

​品牌定位

新社交電商平台

一站式服務電商

商業模式

社交新零售生態模式

結合線上購物及線下實體商店服務

打破平台經濟模式

將 人/貨/場的每個節點串連起活絡的生態圈

以「 美」創造新零售的動態循環

核心價值

美力・實踐

玩美・變現

平台目標

定位有別於一般購物電商通路,打造一站式服務,

並整合線上及線下使用者購物習慣。

 

  • 「蕾舒翠PLUS品牌」以「 美」為核心,讓消費者對品牌產生興趣、喜愛。
     

  • 「社交零售、社群經營」,使用者在平台上,搜尋商品優劣評價,獲得生活美學資訊、保養知識。
    自媒體時代,自我經營,照片、影片隨拍隨傳,一鍵分享,讓使用者產生黏著度。
     

  • 「電商購物」高品質產品,詳盡產品資訊、圖文呈現,簡易購物流程、多元支付方式,
    讓使用者進而產生購買。

     

  • 「我的介面」個人數據資料、完善的資訊網絡、公司事業經營完整介紹。

 

目標族群

25-45歲 女性

美學主義者、職場新鮮人、微網紅、保養達人、家庭小主婦

主要市場

台灣(App、Web形象官網)

中國大陸(App)

 

我的角色

從專案開案初期便加入公司,從無到有開始建構電商平台,參與電商平台商業模式架構定義、品牌建立。

 

我們的團隊包含

  • 產品團隊:一位UI Designer (我) / 產品經理

  • 交付團隊:交付經理 / iOS、Android和前端工程師

  • 合作團隊:廣告公司、設計公司、軟體開發公司

我的工作範圍包括

App介面設計、Web介面設計、iCON繪製、使用者體驗、介面優化、反饋、App素材製作、介面Reference

視覺提案......等相關工作。

 

 與PM、前後端工程師、外部廠商合作最密切。

  • 與PM討論專案需求及功能,Wireframe和UI Flow的規劃討論,介面Reference提案。

  • 經由我這裡分析Reference、使用者體驗,了解用戶的痛點,定義設計風格、色彩計劃、UI字級及按鈕規範,再進行設計Mockup。

  • 完成後提供我的UI Mockup、Guideline、色彩計劃、Zeplin、Prototype基礎過場給前後端工程師、iOS及Android工程師,中間過程中,會不斷的與工程師來回的溝通討論。

  • 開發完成後,驗收測試,審視介面設計、功能測試、意見反饋、介面及功能優化。

  • App及Web上線後,平台維護、使用者體驗反饋、介面及功能優化。

 

除了UI的工作項目外,發揮我的設計的專長及溝通整合的能力,與設計公司、廣告公司、軟體開發公司接洽聯繫,討論品牌商業模式、風格定義及建立,參與大小會議,不斷溝通討論,想法激盪,創造出完整的產品。

 
 

APP Mockup
介面設計

iPhone-XS_Launch Screen.jpg

Launch Screen

將品牌Slogan放在APP開啟頁,搭配品牌概念照,

強調品牌力及氛圍。

iPhone-XS-Max.jpg

台灣版App

iPhone-XS-Max_4.jpg

中國版App

首頁

 

台灣版App - 注重品牌形象、美感、營造品牌氛圍,讓使用者對此品牌產生好感及興趣,

                      進一步了解而購買。

中國版App - 保留中國市場多數的電商App Layout,注重簡約高貴、區塊分明的設計。

 

(註記:兩大市場的App,在首頁介面有不同排版及語系用語不同,因應地區做部分功能調整。)

 
iPhone-XS_首頁-1.jpg

首頁往下滑​,

推薦熱門商品,引導使用者點選、購買。​

iPhone-XS-Max_1.jpg

商城

  • 上方商品圖中,可查看多張商品照。

  • 往下滑有商品詳情,以大量圖片配合文字,讓使用者快速了解產品內容、資訊。

iPhone-XS-Max_商城.jpg
iPhone-XS-Max_2.jpg

購物車

  • 購物清單中,可刪減數量及加購推薦商品,加快結帳流程,避免使用者退出購物車。

  • ​結帳資訊以條列式區塊分類,讓使用者清楚的點選及確認商品內容、金額。

iPhone-XS-Max_3.jpg
iPhone-XS-Max_2.jpg
iPhone-XS_社區-1.jpg
iPhone-XS_社區-2.jpg

社區(社群)

​自媒體時代,讓商品使用者可以透過社區功能,發圖文、影片分享商品優劣、評論或是保養資訊分享。

iPhone-XS-Max_3.jpg

我的

  • 「我的」頁面中,有會員級別,可了解目前等級進度。

  • 已訂購商品可透過我的訂單,查詢目前出貨進度。

iPhone-XS-Max_我的訂單.jpg
蕾舒翠PLUS-App.jpg

形象官網
WEB Mockup

蕾舒翠PLUS-PC.jpg

設計目標

 

Web設計只針對台灣使用者,考量到台灣多數使用者,有使用電腦網購的習慣,因此在Web的設計上,更加強調品牌美感、簡約風格、氛圍。

 
1-1首頁1.1.jpg

首頁

 

  • 運用蕾舒翠PLUS品牌色,使用者一進入首頁,即可看到輪播Banner、視覺形象照、帶出強烈品牌力。

 

  • 在頁面中精選熱門商品,讓使用者可以快速購買或了解更多資訊。

1-3-1商品頁-7 copy.png

商城

 

商品頁中,提供詳細的商品資訊,加上商品詳情頁,讓用者更了解商品特性、成分、效果。

台灣-cream_all long copy.png
台灣-cream_all long copy.png
台灣-cream_all long copy.png

商品詳情頁

1-2-1品牌故事-1.jpg

關於我們

 

將企業及品牌形象具體化,用花卉、植物的抽象視覺,呈現「美」的概念。

1-2-1品牌故事-4_集團.jpg
1-4品味生活.jpg

生活品味

美學雜誌,將生活、保養、美學......等因素,圍繞著「美」的概念。

1-4品味生活 copy.png

Design Guideline

 
bottom of page