雅培營養會 - 以跨裝置 UX & UI 設計打造無縫會員體驗

項目概覽

「雅培營養會」是雅培全新升級的會員計劃，面向成人及兒童用戶，提供更全面、多元的資訊與服務。會員可參加「營・獎賞」購物儲分獎賞計劃，於購買指定產品後，透過掃描二維碼及上載收據累積積分，換領雅培產品或其他豐富禮遇。

DigiSalad 獲雅培委託，為雅培營養會設計一個兼具美感與實用性的全新網站。我們由用戶研究及需求分析出發，採用以人為本的設計，構建清晰的資訊架構，並貫徹雅培的品牌定位，呈現出專業且具親和力的視覺風格，提升整體用戶體驗。

網站特點

登記會員及賺取積分

為提升會員互動率及忠誠度，同時吸引更多新用戶，DigiSalad 特別優化了會員註冊及積分換領的流程，並將流程整合至 CRM 系統中。當用戶掃描產品罐上的二維碼後，系統便會自動匯入產品資料，然後只需上載購買收據，即可輕鬆累積積分。整個流程僅需「掃碼」與「上傳」兩個步驟，簡單便捷。此外，介面中亦清晰列出合資格商戶名單及產品資格，協助消費者輕鬆識別正貨。

管理積分及兌換產品

當會員積分達到換領門檻，即可兌換心儀獎賞。DigiSalad 為獎賞頁面增設「僅顯示可兌換獎賞」的篩選功能，並以不同顏色標籤及分頁分類，清楚區分「可使用」、「處理中」及「已兌換」等狀態，提升整體使用體驗。所有兌換記錄，包括審核進度及積分異動，皆可於「積分獎賞紀錄」中一覽無遺，並自動儲存至會員的 CRM 資料庫，確保整個換領流程透明、清晰且人性化。

修改帳戶及個人資料

為方便會員隨時更新個人資料，雅培營養會網站設有完善的帳戶管理功能，並與雅培的 CRM 系統相連。當用戶修改密碼、聯絡方式、出生日期等基本資料時，CRM 的會員檔案亦會隨即更新。隨著舊有的「雅培媽媽會」整合至現有平台，會員現可於雅培營養會網站一併管理家庭成員資料，包括新增、編輯或刪除成員資訊，全面提升帳戶管理的彈性與便利性之餘，也讓 CRM 系統能夠更精準地掌握會員的家庭信息，捉供更個人化的會員體驗。

DigiSalad 實施的解決方案

以人為本的 UI 設計

DigiSalad 於網站介面設計中秉持簡潔直觀的設計理念，並於各個操作環節注入人性化的細節，致力為用戶打造更順暢、愉悅的互動體驗。例如當用戶成功兌換獎賞或完成會員註冊時，系統會彈出提示視窗，給予即時回饋及後續操作指引；而新會員首次登入時，亦會顯示歡迎彈窗，鼓勵探索平台內的各項功能。於操作流程中，如系統偵測到積分不足、欄位未完成或格式輸入錯誤，相關按鈕將自動轉為灰階並鎖定，並透過明確提示引導用戶完成修正。

此外，所有積分紀錄、兌換進度及有效期限均整合於左側固定版塊，讓用戶可隨時掌握個人狀態。透過這些精心設計的微互動與視覺回饋，DigiSalad 進一步地鞏固了雅培的品牌形象和用戶忠誠度。

流動裝置優先的自適應式網站

鑑於大部分用戶需透過手機或平板電腦掃描二維碼以賺取積分，DigiSalad 在設計上充分考慮不同裝置的使用情境，針對桌面與流動裝置用戶的需求作出調整。

在自適應式設計的基礎下，手機介面特別參考了 App 的操作邏輯，於頁面底部設置快捷鍵，方便用戶快速跳轉至核心功能頁。整體佈局以單手拇指操作為先，並將掃碼結果、收據上傳介面、合資格產品清單及常見問題等關鍵資訊置於顯眼位置。同時，亦針對行動網絡環境進行速度與載入優化，確保用戶無論身處何地均可順暢操作。

至於桌面版本，則更側重於會員後台管理及獎賞兌換體驗。介面採用多欄式資訊架構，將「積分獎賞」、「獎賞紀錄」、「我的獎品」、「我的帳戶」等模組明確區分，並配以適合的圖示和篩選器，讓用戶可更直觀地瀏覽及管理其帳戶資料與兌換記錄。

Google Analytics 4 轉化追蹤及報告

會員忠誠計劃的轉化率是評估推廣表現的關鍵指標。為此，DigiSalad 的 IT 團隊與雅培緊密合作，於網站中植入 Google Analytics 4（GA4）追蹤代碼，精準記錄用戶於「掃描二維碼」、「上載收據」、「註冊會員」等關鍵節點的操作，並自動觸發對應事件，將產品 ID、商戶名稱、累積積分等事件參數同步至後台數據庫。

除核心轉化指標外，DigiSalad 亦整合了一系列匿名行為數據，包括頁面瀏覽量、滾動深度百分比、按鈕點擊次數及互動時長等，協助雅培深入了解會員的瀏覽習慣與內容偏好，為未來體驗優化提供依據。此外，我們亦會定期提供度身訂造的網站分析報告，內容涵蓋主要轉化漏斗分析、裝置與流量來源分佈、用戶留存與活躍度指標等，並提出具體優化建議，協助雅培持續提升會員體驗，制訂更精準的行銷策略。

總結

DigiSalad 由用戶研究到視覺設計，始終以用戶需求為核心，為雅培量身打造一個既符合品牌形象、又具高度可用性的會員網站。無論是在流動裝置上迅速完成掃碼累積積分，或於桌面端進行帳戶管理與獎賞兌換，網站皆提供直觀、流暢的操作體驗。

配合全面整合的 GA4 轉化追蹤與客製化數據報告，雅培能即時掌握會員行為與偏好，持續優化行銷決策與用戶體驗。全新「雅培營養會」網站不僅有效提升互動率與會員留存，更實踐了「以人為本、數據驅動」的創新數碼營運理念，為品牌建立更具長遠價值的會員關係。