好市民保健電商網站

好市民原本的網站已經上線一段時間，商品豐富、廣告投放也持續在跑，但轉換率始終不理想。從進站、找商品到結帳，每一個階段都能看到明確的流失數字，這代表問題不是集中在單一頁面，而是分散在整條使用者路徑上。這次改版的第一步，不是從視覺出發，而是先把每個節點的流失原因釐清。

數據問題發掘：概略分析近三個月內近千筆產品數據，包含 GA 留存率與 Clarity 熱點圖，分析出目前現有網頁的可優化方向。

以使用者視角進行全站體驗測試，檢視各裝置版本的操作流暢度、資訊架構邏輯性、以及互動元素的直覺性，記錄並分類所有體驗痛點與障礙，作為後續優化方案的設計依據。

透過數據與體驗走查，這兩條路徑交叉比對後，找出行為斷點，歸納出三個明確需要優化的階段。

好市民原本的首頁架構是輪播 Banner、主打商品、人氣商品、官方宣傳影片的直線排列。但熱點圖顯示，主打商品跟宣傳影片的點擊率都偏低（CTR 僅 1.49%），沒有達到主推的效果。進一步比對 GA 的使用者流程會發現，絕大多數瀏覽率其實是廣告直接導流至商品頁，並不是從首頁開始瀏覽再深入商品。這代表首頁目前的功能設定與實際使用情境不符，它的角色應該調整為提供順暢的引導與搜尋，並提升品牌印象與信任感，而非承擔銷售轉換的責任。

商品總覽頁的數據更直接：近 50% 的用戶進入頁面後就立即跳出，熱點圖也顯示使用者難以在眾多商品中快速鎖定目標。優化方向會朝 sorting 與引導機制加強，加入智能篩選、分類導覽與搜尋建議，讓商品數量持續成長時，使用者仍然能更快找到需要的商品，降低因資訊過載造成的跳出率。

GA 數據顯示，有 34% 的用戶會在加入購物車後跳出，或未完成購買流程。針對此斷點規劃三個處理方向：降低結帳頁的資訊負擔並重新調整資訊層級；用清晰的進度條讓使用者掌握流程位置；將購買按鈕常駐畫面下方，減少跳出干擾。針對已登入會員、購物車內仍有未結帳商品的狀況，也規劃透過 Email 通知進行再行銷追蹤，找回原本會流失的訂單。

好市民原本的品牌色是偏深的珊瑚紅，這次改版並沒有替換主色，而是以既有紅色作為基礎，調整飽和度與明度，展開成一組層次完整的色彩系統（Primary 100–800），並補齊 Grey 階與 Error / Check 等系統色。在維持品牌辨識度的前提下，讓整體視覺更貼近保健品牌想傳達的活力感，而不是原本偏沉穩、偏傳統藥妝的調性。

字體選用 Outfit，筆畫圓潤、字重層級清楚，從 Display 到 Body-XX Small 建立完整的 Type Scale。搭配同樣走圓潤路線的 3D 風格 icon set，將維生素、關節保健、腸胃保健、視力保健、心血管保健、美容保健等商品分類，各自重新繪製成立體插畫圖示，取代原本扁平化的線性 icon，讓偏功能性的保健品分類多了一點生活感。

購物車重新設計了空車、有商品、側邊欄三種狀態的呈現方式。空車狀態加入插畫緩解單調感，並清楚提示「購物車裡還沒有任何商品喔！」；有商品狀態則以商品縮圖、數量加減、Total 金額三個資訊層級排列，讓使用者能快速確認內容與小計；側邊欄版本則將購物車與主選單整合在同一個抽屜內，方便在瀏覽商品的同時隨時確認購物車狀態，不需要跳轉頁面。

舊版首頁只有輪播 Banner、人氣商品、固定宣傳 Banner 三段內容，資訊層級單一，使用者除了滑過去別無其他路徑。新版首頁重新拆成必買分類、熱銷商品、聯合推薦、推薦商品、健康新知、品牌故事六個區塊，讓帶著不同目的進站的使用者都有對應的入口可以走。其中聯合推薦導入醫師與 KOL 背書，強化商品的信任感；健康新知與品牌故事則補上原本網站缺乏的內容行銷與品牌溫度。

舊版購物車與結帳頁把會員登入、收件資訊、付款方式、發票資訊全部塞進同一張長表單，使用者得一路往下滑才能完成結帳，資訊負擔重也容易半路放棄。新版把流程拆成購物車內容、會員專區、付款運送方式三個清楚區塊，並在購物車頁加入常用地址快選與相關商品推薦，減少重複輸入、順手創造加購機會。結帳完成後也新增了原本沒有的訂單完成頁，用確認訂單、運送中、已送達三個節點的進度條，讓使用者結完帳後仍然清楚知道接下來會發生什麼事。