作品

Bitget Homepage Redesign

把品牌視覺從 2D 帶進 3D 的首頁改版

Bitget 網站首頁改版是我加入後主導的第一個大型專案,於 2024 年 11 月 26 日全量上線。首頁是尚未註冊的訪客認識 Bitget 的第一道門,因此它的任務非常明確:把訪客轉化為註冊用戶,並帶動 App 下載。

我全權負責這個專案:從前期調研、設計、交付上線,到上線後的數據分析。這次確立的視覺方向,後來也成為 Bitget 設計系統的基礎。

角色
調研視覺定調UI & UX 設計動態設計數據分析
平台
網站
時程
–
日期
2024 年 11 月

研究告訴我們什麼

這次改版從證據出發,而不是從喜好出發。問卷針對 Bitget 當時並行的兩種首頁,蒐集到 808 份回饋:行銷版 421 份、簡潔版 387 份。簡潔版的問題是缺乏行業差異化、不夠友善、沒有重點;行銷版則是雜亂、賭場感重、閱讀體驗差、內容過多。

據此,提案訂出三個目標:降低新用戶的註冊阻礙、強化 App 下載的引導,以及視覺降噪,讓品牌與平台的安全性更值得信任。

行為數據則決定了資訊該放在哪裡。mobile 佔首頁訪客的 66.2%(PC 32.6%、Tablet 1.2%),而能看到長頁底部的訪客不到 3.6%。因此註冊入口與關鍵產品資訊必須前移,手機版也必須獨立設計,而不是從桌機版縮小而來。

三個設計決策

提案把這些發現轉成三項改變,下方的前後對照皆出自這份提案。

  1. 導覽列:原本有 1 個圖示按鈕、9 個主選項加上廣告位,共 10 到 11 項。提案把跟單(Copy)與策略交易(Bots)歸入 Trade,新增給新手的 Learn 入口,強化 Rewards,並精簡二、三級選單。
  2. 簡潔版:頁面從 8 屏以上精簡為 5 屏,讓更多訪客看到重點:熱門幣種、跟單與理財收益前移,重疊的業務與增信模組整併,並新增 FAQ。
  3. 行銷版:首屏保留活動,但拿掉雜亂的視覺,以微動效做強調;行情改以分頁呈現,跟單一次呈現三位交易員。

簡潔版

左邊是之前,右邊是之後;下方的完整頁面可以直接捲動,像瀏覽真實網站一樣。

之前
改版前的簡潔版首頁:「Trade smarter. Trade on Bitget.」搭配足球員主視覺、平台數據與一長串模組。
之後
改版後的簡潔版首頁:「30 Million users trade on Bitget」搭配註冊欄位與 3D 玻璃緞帶,區塊更少、更精簡。

行銷版

左邊是之前,右邊是之後;下方的完整頁面可以直接捲動,像瀏覽真實網站一樣。

之前
改版前的行銷版首頁:合約兌換商城的商品照片、活動卡片與密集的列表。
之後
改版後的行銷版首頁:相同的標語搭配西甲合作主視覺、活動卡片、行情分頁與三位跟單交易員。

行動版網頁(H5)

左邊是之前,右邊是之後,以手機尺寸呈現。

之前
改版前的手機版首頁:App 下載列、標語、註冊與登入按鈕,接著是圖示選單與幣種列表。
之後
改版後的手機版首頁:標語搭配註冊欄位與 Get Started 按鈕,下方是幣種價格列表。

從 2D 走到 3D

Bitget 原有的視覺語言以平面的 2D 漸層材質為主。我把它帶進三維空間,將玻璃視為真實的材質,而非表面效果:折射、光暈、透明度與光線,都逐一細緻調校。

為了讓材質成為畫面的主角,其餘元素刻意保持克制。我制定了字體與圓角的使用規範,讓介面保持沉穩、一致,3D 視覺得以主導畫面,而不與內容互相競爭。

安全區塊:刻著 Bitget 標誌的 3D 玻璃盾牌,周圍環繞玻璃代幣,下方是保護基金、儲備金證明與冷錢包。

這次改版的影響遠不止於單一頁面。這些規則成為 Bitget 設計系統的基礎,也是後續主視覺與大型頁面設計的起點。

效果和效能之間

首頁是全站對效能最敏感的頁面之一,設計上卻需要豐富的 3D 動態。我們沒有因此犧牲動態,而是將素材壓縮成更輕量的檔案格式來保留它。取捨落在影片長度:我們縮短了影片秒數,讓每一段都能形成乾淨、無縫的 loop,同時檔案小到足以快速載入。

「Trade anytime, anywhere!」:桌機交易畫面,下方是 QR code 與各平台的 App 下載連結。

上線之後

首頁註冊轉化率均值
+83.61%
App 下載轉化率
+14.63%
首屏註冊按鈕點擊率日均
0.47% → 2.47%
點擊 App 下載區的使用者日均
39 → 304

改版前:2024/9/16–11/24;改版後:2024/11/26–12/16。

數字待確認,正式上線前會再核對

數字沒說的事

同一段時間,首頁流量大幅成長:從首頁註冊的訪客,9 月約 3.4 萬,11 月約 22.9 萬。所以上面列的是比率,不是總數。但它們仍然是改版前後的比較,不是 A/B test,數字裡不只有設計的影響。

回饋也不全是正面的。上線後對英語區使用者做的 Email 調研(回收 2,933 份),平均滿意度 4.22/5。313 份負面回饋主要集中在學習成本變高、韓文支援不足、缺少 KRW 顯示,以及不喜歡 dark mode。