重新設計定價方案頁面的視覺呈現,與行銷團隊合作優化頁面內容。新增「費用解析」與「費用試算」內容,解說品牌收費差異,突顯 meepShop 獨特的收費機制,提高頁面停留時間與易讀性。
meepShop 一直以其獨特的定價機制為具競爭力的關鍵要素之一。在此次改版前的定價頁面雖已標示各方案的售價,卻未詳細解釋收費機制與市面上其他競品的內容差異,大部分客戶仍須依賴專人解說,才得以真正理解之間的差別。
本專案欲在價格頁面中加入「費用解析」和「費用試算」等內容,強化 meepShop 的定價優勢並減少銷售人力解說的需求。
在分析現有問題後,整合了設計目標並提出實際的設計方向:
新增年費金額顯示,並提供自由切換平均月費、年費,讓受眾快速理解不同方案間平均收費差異。
利用視覺呈現,提昇推薦方案的層級,並強調交易費收取差異
在功能區塊僅保留特色、必備功能,減少資訊疲乏。有興趣的受眾則提供引導連結至功能頁查看更仔細的項目。
在獨立的功能頁面中,加入以類別為主的導覽列,讓使用者可以點擊快速滑動到對應區塊閱讀
在專案合作期間,我們使用 Sketch 將元件統整成共用 library接著轉移到 Figma 後,我們利用 variants 功能,按照 breakpoint 的不同將元件進行分類,以加快未來優化其他頁面的效率