品牌官網

為 The ColdHub 建立品牌能見度並促進客戶轉換率

專案時長

Sep 2025 - Oct 2025

團隊

1 位 UIUX 設計師
1 位產品負責人
1 位視覺設計師
1 位內容經理

我的角色

UIUX 設計師

  • 從零到一規劃網站,包含定義規模、資訊架構和內容策略

  • 設計 UI 元件、視覺稿及互動原型

  • 透過 Webflow 架設網站

背景

為新事業的冷凍倉儲服務建立品牌形象

The ColdHub 是一項全新的冷凍倉儲事業,尚未建立任何數位的品牌形象。為了建立品牌知名度並觸及潛在客戶,需要建立官網來介紹服務、展示競爭優勢,並為客戶提供聯絡業務團隊的管道。

目標

為 The ColdHub 設計官方網站,以建立更清晰的品牌形象並有效傳達服務內容

挑戰

從模糊的需求中釐清設計方向

這項專案最初的需求是為 The ColdHub 建立一個官方網站,當時缺乏網站目的、目標受眾和願景等相關說明。

為了釐清需求,我針對這項新事業展開了初步研究,與利害相關人進行討論,以確認定位、主要目標和目標受眾。我也藉此界定了專案規模,確認是否為獨立網站,以及未來是否有擴展計劃。

設計亮點

一個月內從頭開始設計、架站並上線

亮點 1

透過標竿案例研究和行銷漏斗框架,塑造使用者旅程

我分析了 10 個以上 B2B 服務網站的資訊架構與內容策略,以找出共同的模式與缺口。透過研究洞察,我最終以行銷漏斗框架來設計網站資訊架構,引導使用者從瞭解資訊、考慮方案到最終完成轉換。

亮點 2

將品牌風格手冊轉化為可擴展的設計系統

在收到視覺設計師提供的品牌風格手冊後,我定義了網站的核心配色及適用於桌上型電腦與行動裝置的字體層級,接著建立可重複使用的 UI 元件,以確保設計的一致性。

定義 Design token,以確保一致性、可擴展性及加速開發交付流程

雖然官網目前的規劃僅為單頁網站,但我主動在 Figma 中定義了設計 Design token,以確保視覺一致性並支持未來的擴展性。由於 Figma 到 Webflow 的外掛程式可以直接讀取 Design token,這也加速了開發交付流程,以最少的手動調整將設計決策直接應用於網站。

亮點 3

獨立設計並使用 Webflow 架設網站

除了介面設計外,我也獨自負責架站,利用 Figma-to-Webflow 外掛程式來簡化交付流程,並高效實現設計。

成果

建立更明確的品牌形象及客戶轉換的管道

在一個月內,我從零開始獨立架設這個網站,並趕在 10 月初的貿易展覽前上線。最終的成果獲得了業主和利害相關人的高度好評。

學習反思

透過視覺化方式溝通,轉化模糊的概念以達成設計共識

這個專案讓我瞭解到利害關係人並非總是清楚自己的需求,而這正是設計師的價值所在。藉由提出正確的問題,並將線框圖、原型和 UI 視覺模型作為溝通媒介,我學會了如何對齊彼此的預期,並引導團隊朝向共同的願景邁進。

下個專案

提升訂單細節的易讀性,以改善售後體驗

Copyright © 2026 Hsiao-Yeh Yang