WET Ethical Select Shop

結合品牌全球規範與台灣在地邏輯,將雜亂的資訊重新優化,打造全新品牌官網。

結合品牌全球規範與台灣在地邏輯,將雜亂的資訊重新優化,打造全新品牌官網。

角色:

網頁設計

團隊:

1 總監, 1 網頁設計師, 1 工程師

客戶:

WET Ethical Select Shop

WET Ethical Select Shop
WET Ethical Select Shop

專案背景

針對客戶原有舊網站結構單一且美感與品牌定位脫節的痛點,我們著手重新設計網頁。在維持全球品牌識別的前提下,更深入整合台灣市場的閱讀偏好與使用習慣,將破碎雜亂的資訊流重新分類。這不只是視覺上的翻新,更是為了將原本陽春的網頁,轉化為一個既能傳遞品牌溫度、又專業的品牌網站。

負責項目

資訊架構重組

UI/UX 介面設計

響應式網頁設計

Shopify後台設定

WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop

設計挑戰

01

01

品牌識別落差 信任感不足

舊版網頁視覺表現過於單薄,缺乏系統化的視覺系統,導致頁面呈現較為陽春與風格不一,難以在第一時間建立品牌原有的專業感與使用者信任。

02

02

資訊架構單一 缺乏清晰層級

原有的導覽結構缺乏清晰層級,內容多為生硬堆疊。由於資訊流未經有效統整,使用者進入頁面後難以快速掌握重點,整體瀏覽體驗不流暢,無法吸引使用者了解產品價值。

03

03

體驗過時 SEO 不友善

舊網站基本上只是功能性的存在,加上許多資訊直接做在圖片裡,讓搜尋引擎抓不到關鍵字、對 SEO 排名不利,圖片式內容也造成 RWD 響應式體驗不佳,無法展現品牌應有的溫度與專業度。

WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop
WET Ethical Select Shop

設計策略

#Solution 01

#Solution 01

建立設計系統,重塑品牌專業感

我們遵循品牌核心調性,定義出一套色彩與字體規範。透過一致性的網頁系統設計,解決了原本頁面零散的問題,為品牌建立起具專業感與信任度的數位門面。

Fonts

Figtree

Figtree

WET Ethical Select Shop

WET Ethical Select Shop

Colors

#Solution 02

#Solution 02

視覺減法,建立品牌質感

針對舊站過於擁擠、視覺干擾過多的問題,我們重新定義了版面的留白比例。透過放大商品主圖並簡化背景元素,消除原有的壓迫感,讓視覺焦點回歸產品本身,呈現出國際品牌乾淨俐落的質感

Before

Before

WET Ethical Select Shop

After

After

WET Ethical Select Shop

#Solution 03

#Solution 03

重構資訊架構,優化導覽層級與動線

重新規劃了整體的資訊層級,將原本破碎的頁面進行邏輯分類。透過分層導覽設計,確保使用者進入後能快速抓到重點與想瀏覽的內容,並流暢地在不同產品類別間切換。

WET Ethical Select Shop

泳裝系列導覽列

泳裝系列導覽列

WET Ethical Select Shop

選品系列導覽列

選品系列導覽列

#Solution 04

#Solution 04

建立標準化商品標籤系統

由於代理商旗下擁有許多商品品項,決定導入直覺式側欄篩選功能 ,前期投入大量的時間進行分類,為每個商品建立個別標籤系統。透過類別、品牌及系列等不同維度的分類標籤,將原本無整理的商品資料結構化,讓使用者能輕鬆篩選商品,提供良好的瀏覽體驗。

Before

Before

WET Ethical Select Shop

After

After

WET Ethical Select Shop

#Solution 05

#Solution 05

內容實體化,提升 SEO 與跨裝置體驗

優化舊站直接將資訊嵌入圖片的作法,新網站全面改為程式碼編寫取代圖像資訊。不僅能讓搜尋引擎精準抓取相關關鍵字,優化 SEO 表現,更解決了圖片在不同螢幕尺寸下因縮放導致瀏覽不易問題,提升網站易讀性與互動性。

Before

Before

WET Ethical Select Shop Mobile

After

After

WET Ethical Select Shop Mobile

#Solution 06

#Solution 06

深化品牌連結與會員經營

除了架構重塑,我們進一步擴充了網站的內容深度,透過多面向資訊傳達,強化品牌與使用者之間的連結。

WET Ethical Select Shop Mobile
WET Ethical Select Shop Mobile
透明化的會員制度

推出完整的會員分級與獎勵機制,增加使用者的歸屬感,並將單次購買的行為轉化為長期的品牌忠誠。

WET Ethical Select Shop Mobile
WET Ethical Select Shop Mobile
品牌工藝與布料堅持

針對消費者最在意的品質疑問,新增了泳裝布料介紹頁。呈現品牌對原料的機能與材質堅持,建立專業且可靠的品牌信任感。

WET Ethical Select Shop Mobile
WET Ethical Select Shop Mobile
將銷售轉化為認同

我們重新規劃了整體的敘事邏輯,讓網站不僅是展示產品的型錄,更是傳遞品牌核心價值,讓使用者產生共鳴與認同。

Project Conclusion

Project Conclusion

Project Conclusion

不只是改版,更是品牌形象的重塑

本次改版的核心價值在於跳脫單純的購物功能,將網站重塑為傳遞品牌靈魂的網站。我們不只解決了視覺與技術上的問題,更透過會員制度與內容經營,讓網站從單純的賣東西,進化到能傳遞品牌信仰、建立長期客戶關係的網站。

Thank you for watching 👙

Thank you for watching 👙

Thank you
for watching 👙

Let’s build something amazing together 💪

謝謝你看到最後,期待有機會一起合作,如果有任何想法,隨時聯絡我吧!

Copyright © www.yuchinglab.com | All rights reserved.

Let’s build something amazing together 💪

謝謝你看到最後,期待有機會一起合作,如果有任何想法,隨時聯絡我吧!

Copyright © www.yuchinglab.com | All rights reserved.