UI/UX DESIGN

MORIÉ HomeStore Website Design

MORIÉ 森寓家居品牌電商
網站設計

MORIÉ 森寓以現代居家美學與自然材質為概念方向。本概念案將品牌認識、空間靈感與商品探索串連,讓使用者能從風格瀏覽進一步比較家具資訊。

ROLE

UI/UX Designer · Visual Designer

TIMELINE

4 Weeks

TOOLS

Figma · Photoshop · Illustrator

MORIE HomeStore desktop tablet and mobile website mockup

PROJECT OVERVIEW

專案概覽

Project Background

家具選購需同時考慮風格、尺寸、材質與空間搭配。本概念案將空間情境、商品資訊與比較入口放進同一瀏覽脈絡,協助使用者由風格探索逐步縮小選擇。

Target Audience

本概念案設定的目標受眾,是重視居家質感、正在佈置新家或更新家具的使用者;設計方向聚焦於協助他們掌握風格、價格、材質與空間搭配。

Project Goal

整合品牌故事、空間靈感與商品資訊,降低家具選購時的資訊負擔,讓使用者能更有效率地探索、比較並建立購買信心。

My Responsibility

負責 UI/UX 設計,包含使用者需求整理、資訊架構、操作流程、介面視覺與 Responsive Design,並建立元件與 Design System。

DESIGN INSIGHTS

設計洞察

使用者痛點 Pain Points

不知道怎麼挑

Choice Overload

家具種類、風格與尺寸繁多,缺少清楚引導時,使用者容易不知道該從哪類商品開始探索。

缺乏空間感

Space Uncertainty

單看商品圖難以判斷家具放入實際空間後的比例、風格與搭配效果,增加選擇的不確定感。

商品難以比較

Difficult Comparison

材質、尺寸與價格資訊分散,使用者需要來回查看頁面,增加比較不同家具的時間與操作成本。

擔心品質服務

Trust Barrier

家具屬於高單價商品,使用者除了外型,也在意材質品質、配送流程與售後保障,影響購買信心。

使用者旅程 User Journey

探索風格

了解空間需求尋找理想方向

尋找家具

依分類與情境縮小選擇範圍

比較選擇

比較材質、尺寸價格與適配性

確認購買

查看商品細節配送與服務資訊

完成選購

確認配送付款安心完成購買

DESIGN DECISIONS

設計決策

建立品牌風格與商品入口

INSIGHT

使用者第一次進入家具網站時,通常先感受品牌風格,再判斷是否值得繼續探索;若首頁資訊過多,容易削弱第一印象與瀏覽方向。

DESIGN DECISION

以「品牌氛圍 → 精選家具 → 品牌價值」建立清楚的首頁層級,讓使用者先理解 MORIE 的生活風格,再自然進入商品探索。

UI APPLICATION

Hero 採大幅居家情境與簡潔標題搭配 CTA;下方以精選商品銜接購物內容,維持留白與視覺焦點。

MORIE HomeStore homepage hero brand entry design decision showcase

平衡商品導購與空間情境

INSIGHT

家具選購高度依賴空間想像,單看去背商品圖,難以判斷家具放入實際環境後的比例、氛圍與搭配效果。

DESIGN DECISION

將商品與真實居家情境交錯呈現,讓使用者不只「看家具」,也能從整體空間理解家具適合的生活風格。

UI APPLICATION

運用大尺寸情境照、局部細節與家具推薦建立視覺連結,讓使用者能從空間靈感自然延伸至商品探索。

MORIE HomeStore shopping guide and brand content design decision showcase

建立一致的商品瀏覽結構

INSIGHT

當家具商品增加時,使用者最需要的是快速掃描與比較;如果資訊層級不一致,會增加尋找與反覆確認的負擔。

DESIGN DECISION

統一商品卡片資訊結構,優先呈現影響初步決策的圖片、名稱、價格與分類,降低不必要的資訊干擾。

UI APPLICATION

商品列表採一致圖片比例與文字層級,搭配分類、篩選與收藏操作,讓使用者能快速瀏覽並比較不同家具。

MORIE HomeStore product browsing and filtering design decision showcase

以內容建立選購信任

INSIGHT

家具屬於高單價、低頻率購買商品,使用者除了產品本身,也會在意材質品質、配送服務與品牌是否值得信任。

DESIGN DECISION

將部落格納入商品探索流程,以空間靈感、材質知識與選購指南,協助使用者理解家具並降低決策的不確定感。

UI APPLICATION

建立設計靈感部落格,以分類與文章卡片呈現內容,讓使用者從空間案例與選購知識,自然延伸至商品探索。

MORIE HomeStore blog and content guide design decision showcase

DESIGN OUTCOME

設計成果

完成涵蓋風格探索、家具比較、選購指南與響應式介面的電商設計,將空間情境與商品資訊相連,支援從找靈感到比較選品。

MORIE HomeStore full homepage design screenshot
0%
MORIE HomeStore four mobile screens responsive shopping experience showcase

Summary

從風格探索到安心選購

依家具選購情境整理「探索風格、尋找商品、比較資訊」的瀏覽脈絡,並以居家情境內容連結商品,讓使用者能對照家具與空間搭配。

同時整合商品、空間靈感與選購資訊,並設計對應桌機與手機的版面,呈現由風格探索到商品比較的使用流程。

DESIGN SYSTEM

設計系統

MORIE HomeStore complete design system showcase

BRAND APPLICATION

品牌情境應用

MORIE HomeStore brand application showcase