BACK TO WORKS
E-CommerceLaunched

MUA YIK TEA 滿溢茶

2024

滿溢茶 - Mua Yik Tea，寓意風土、歷史、人文與技藝的交集與縮影，乘載自然能量、心意與情感的台灣茶品牌。承襲百年技藝的製茶工藝，滿溢茶 Mua Yik Tea 從台灣在地出發，走訪世界茶莊，結盟友善農法小農茶園契作，嚴選多樣的茶種，以手摘茶的嚴謹製程與品管，淬煉茶葉之本質。

角色
UI/UX Designer
工作內容
網站設計改版優化、行動裝置 RWD
筆電上顯示滿溢茶電商網站的登入頁，桌面左側擺著插了乾燥花的白瓷花瓶

Overview

此電商網站改版設計專案，主要根據已定案的網頁版 Wireframe、風格定義，遵循設計風格規範與 RWD 概念，進行 Web & Mobile UI 設計，交付頁面包含：

  • 購物車 / 結帳頁
  • 會員註冊 / 登入
  • 會員頁
購物車頁面，右側列出四款茶品與單價

購物車 / 結帳頁

新增官網主色元素，結合該電商原先使用的 Shopify Template 去延伸排版

註冊頁面，左半邊是茶禮盒的情境照、右半邊是註冊表單

會員註冊 / 登入

在進行設計之前，先搜集既有大品牌電商網站，參考其註冊 / 登入頁面的設計，以「使用者瀏覽該頁面時，能被品牌本身風格所吸引」為主要設計目標

會員頁的 Account Details，左側是四個功能的 Tab、右側是表單

會員頁 / 四種功能

此次改版，主要有新增全新的會員頁面，並包含四種功能，在 Tab 的設計上考量電商網站的普遍使用習慣，因此搭配 Icon 讓使用者更能一目瞭然

All Screen

  • 購物車 / 結帳頁
購物車頁的網頁版與手機版並排：商品列表、數量調整與預估金額
結帳頁的網頁版與手機版並排，下方是輸入框元件的三種狀態：未填、已填、格式錯誤
  • 會員註冊 / 登入
登入頁的網頁版與手機版並排，網頁版左半邊是茶禮盒的情境照
  • 會員頁 / 四種功能
會員頁四種功能的網頁版與手機版全頁：帳號資料、收件資訊、訂單紀錄、撰寫評論

Thank you for your scrolling

A Tea Brand of Heart and Emotion. Overflowing and Carrying Natural Energy.

NEXT PROJECT

個人品牌 Logo 設計