擔任角色
UI/UX設計師
專案時程
2022.3~2022.10
負責項目
需求溝通與規劃
UI/UX設計
RWD靜態切版
上線前各項數據測試
SEO關鍵字設定追蹤
工具/程式語言
工具與程式語言
*由於後台系統為公司內部機密,以下展示前台畫面為主。
01

背景介紹

Background
專為成大醫院內部合作社所成立之電商平台,尚未成立此平台前,若想購買商品,需透過填寫Google表單的方式登記,管理者再以人工核對訂單,不僅耗費許多人力時間成本,也容易發生計算錯誤的情況。此平台建立後,幫助院內員工更加方便的購買「門市商品」與「團購商品」,同時增加合作社與商品的曝光度。

BEFORE

人工核對耗費時間人力成本,且出錯率高
金/物流無法即時同步,雙方資訊不透明
需至實體店面,有購買時間限制

AFTER

系統自動計算訂單,減省時間、提高準確度
系統自動計算訂單,減省時間、提高準確度
前台同步金/物流狀態,買賣雙方資訊透明
前台同步金/物流狀態,買賣雙方資訊透明
24小時不限時於線上購買商品
24小時不限時於線上購買商品
02

主視覺設計

Main Page Design

設計理念

主視覺以LOGO中的酒紅色系為主,以手寫風格的字體作為網站的Slogan與大標,打造畫面的豐富感。並以許多新鮮食材作為裝飾,整體畫面活潑、清新,更加符合「健康市集」的意象。
主畫面設計
03

更多設計細節

Features
Products

商品介紹

快速、準確地找到符合需求的商品!
分類選單
為讓使用者快速找到商品,設計兩層分類選單,方便篩選商品
商品列表畫面
商品列表設計
卡片式設計,選擇商品時更為直觀邊框增添雙細線,提升商品圖片質感
商品圖片
切換商品圖片,讓使用者從不同角度了解商品
商品詳細頁
標籤頁設計
為避免畫面過於冗長,詳細內容採標籤式設計,並依重要程度依序排列
Shopping

購物流程

簡約的介面與引導性的操作流程,打造絕佳的購物體驗!
商品自動分類
方便訂單管理,系統自動將加入購物車的商品分類成「團購」或「門市」商品
購物車
活動優惠與折扣
使用者可透過「符合活動」區塊,一目瞭然獲得的優惠與折扣
防呆結帳頁
為避免下錯訂單的狀況,以條列式呈現商品資訊,方便下訂前做雙重確認
收件人資料填寫
為節省購物時間,勾選「同會員資料」即可一鍵帶入收件人資料
結帳頁面
完成結帳頁面
購物完成頁
除顯示訂單編號外,下方添加快速按鈕,引導使用者下一步動作
訂單查詢
下訂後,可於會員中心查詢歷史訂單,隨時追蹤訂單目前狀態
訂單查詢頁面
訂單分類設計
訂單日期作為訂單間的區隔,方便使用者快速查找
更多訂單資訊
重要資訊特別以淺黃底色獨立出來,以達提醒作用
訂單詳細頁
訂單最新狀態
以顯眼的紅綠訊息框顯示訂單最新狀態
Wishing

團購許願

不單只能購物,再來許個願吧!
團購許願表單
會員可透過客製化表單許願欲上架商品。抓住客戶喜好,提升平台競爭力
團購許願表單
04

靜態網站展示

Static Webpage