UI Design

電商平台官網價格方案頁 Redesign

重新設計定價方案頁面的視覺呈現,與行銷團隊合作優化頁面內容。新增「費用解析」與「費用試算」內容,解說品牌收費差異,突顯 meepShop 獨特的收費機制,提高頁面停留時間與易讀性。

我做了什麼

  • 與利益關係人溝通協做,設計解決辦法
  • 價格頁、功能頁架構規劃
專案涵蓋項目

Interface Design, Design system, Prototyping

專案時長

Feb. 2022 ~ April 2022

看設計產出

專案背景

meepShop 一直以其獨特的定價機制為具競爭力的關鍵要素之一。在此次改版前的定價頁面雖已標示各方案的售價,卻未詳細解釋收費機制與市面上其他競品的內容差異,大部分客戶仍須依賴專人解說,才得以真正理解之間的差別。
本專案欲在價格頁面中加入「費用解析」和「費用試算」等內容,強化 meepShop 的定價優勢並減少銷售人力解說的需求。

問題分析

除了新增費用解析資訊外,也針對改版前的頁面提出了設計問題:

  • 原先頁面內最大的問題就是頁面重點不夠清晰,雖每一區塊皆有明確的主題,內容卻沒有明確的資訊層級,不好馬上看見重點。

  • 功能列表區塊內容繁雜,一次展現所有功能細項加上瀑布式排列,容易造成資訊疲乏。

確認設計目標與方向

在分析現有問題後,整合了設計目標並提出實際的設計方向:

讓受眾能夠在官網價格方案頁充分瞭解 meepShop 的收費方案與特色

  • 將功能細項獨立出價格方案頁面,拆分「瞭解特定功能項目」與「瞭解收費方案、特色」的需求
  • 將價格方案頁面內容專注在收費方案的資訊,建立更具易讀的視覺呈現

設計實做

優化方案簡介卡片
  • 新增年費金額顯示,並提供自由切換平均月費、年費,讓受眾快速理解不同方案間平均收費差異。

  • 利用視覺呈現,提昇推薦方案的層級,並強調交易費收取差異

保留必備、特色功能,引導至獨立頁面查找類別詳細項目
  • 在功能區塊僅保留特色、必備功能,減少資訊疲乏。有興趣的受眾則提供引導連結至功能頁查看更仔細的項目。

功能頁優化資訊架構,以階層式搜索的方式瀏覽操作
  • 在獨立的功能頁面中,加入以類別為主的導覽列,讓使用者可以點擊快速滑動到對應區塊閱讀

建立官網設計系統與通用組件

在專案合作期間,我們使用 Sketch 將元件統整成共用 library接著轉移到 Figma 後,我們利用 variants 功能,按照 breakpoint 的不同將元件進行分類,以加快未來優化其他頁面的效率

設計產出

價格方案頁
功能特色頁