L′HERBOFLORE PLUS
蕾舒翠PLUS 電商平台
2019-2020 · UI Designer · UI/UX · 用戶研究
背景
霈方國際股份有限公司,在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
介面設計
Launch Screen
將品牌Slogan放在APP開啟頁,搭配品牌概念照,
強調品牌力及氛圍。
台灣版App
中國版App
首頁
台灣版App - 注重品牌形象、美感、營造品牌氛圍,讓使用者對此品牌產生好感及興趣,
進一步了解而購買。
中國版App - 保留中國市場多數的電商App Layout,注重簡約高貴、區塊分明的設計。
(註記:兩大市場的App,在首頁介面有不同排版及語系用語不同,因應地區做部分功能調整。)
首頁往下滑,
推薦熱門商品,引導使用者點選、購買。
商城
-
上方商品圖中,可查看多張商品照。
-
往下滑有商品詳情,以大量圖片配合文字,讓使用者快速了解產品內容、資訊。
購物車
-
購物清單中,可刪減數量及加購推薦商品,加快結帳流程,避免使用者退出購物車。
-
結帳資訊以條列式區塊分類,讓使用者清楚的點選及確認商品內容、金額。
社區(社群)
自媒體時代,讓商品使用者可以透過社區功能,發圖文、影片分享商品優劣、評論或是保養資訊分享。
我的
-
「我的」頁面中,有會員級別,可了解目前等級進度。
-
已訂購商品可透過我的訂單,查詢目前出貨進度。
形象官網
WEB Mockup
設計目標
Web設計只針對台灣使用者,考量到台灣多數使用者,有使用電腦網購的習慣,因此在Web的設計上,更加強調品牌美感、簡約風格、氛圍。
首頁
-
運用蕾舒翠PLUS品牌色,使用者一進入首頁,即可看到輪播Banner、視覺形象照、帶出強烈品牌力。
-
在頁面中精選熱門商品,讓使用者可以快速購買或了解更多資訊。
商城
商品頁中,提供詳細的商品資訊,加上商品詳情頁,讓用者更了解商品特性、成分、效果。
商品詳情頁
關於我們
將企業及品牌形象具體化,用花卉、植物的抽象視覺,呈現「美」的概念。
生活品味
美學雜誌,將生活、保養、美學......等因素,圍繞著「美」的概念。