設計沉思錄|58心寵詳情頁改版設計總結

0 評論 8699 瀏覽 45 收藏 9 分鐘

編輯導讀:在產品的迭代升級過程中,改版設計是常常會遇到的問題。文章對寵物活體交易與服務運營平臺——58心寵詳情頁的升級改版進行了詳細的梳理,對遇到的一些問題進行了分析總結,供大家參考學習。

01 寫在前面

隨著突飛猛進的經濟社會發展,人們的物質生活得到不斷改善,但快節奏、高強度的工作生活方式也相應帶來了人們心靈上的壓力和空虛。為了緩解緊張壓力情緒、排遣孤獨無聊,更為了生活中增添一縷色彩,養一只萌寵成為許多人的第一選擇。

當下的寵物不僅是作為看家護院的存在,更多人將寵物當作家中不可缺少的一部分,寵物的圖片和視頻也經常占據著他們朋友圈中的大片篇幅。同時大量網紅貓、網紅狗的涌現,使不少人萌生了養寵物的念頭,養寵也漸漸變成了一種時尚,人們對寵物的需求量大大提升。

但寵物行業部分方面不規范,存在缺少監督和管理的問題,再加上寵物交易的特殊性,養寵人士很容易吃虧受騙,寵物的品相、寵物的健康都難以得到保證。如何使寵物市場更健康、更規范,如何讓每一位養寵人士都能放心購寵、放心養寵,這是寵物行業一直不斷探索想要解決的問題。

58心寵是什么

58心寵是專注于寵物活體交易與服務運營的專業平臺。通過與優質的商戶合作為購寵用戶提供有利的保障,我們通過自己的努力規范環境混亂的寵物交易市場,做到“幼寵實拍+種犬/貓備案+防疫管控+售后質?!彼闹乇U?。是鏈接B端商戶與C端用戶的一道橋梁。

58心寵于2015年9月正式獨立運營。今年2月,58心寵正式回歸58同城,將繼續專注于推動國內寵物交易市場的健康發展,打造優質寵物交易信息平臺,構建全流程購寵服務保障。

02 改版背景

心寵回歸58后首先要與集團業務進行融合,除了B端業務的打通,在C端視覺風格上也要與集團業務保持一致,舊版頁面因為長時間未做改版,樣式陳舊,設計規范性差,功能體驗不足等問題也日趨明顯。

且詳情頁作為用戶使用產品時的必經頁面,承載著用戶決策的重要信息。原有頁面信息層級混亂,核心信息優先級較低,現有結構已經不能滿足用戶的需求。為提升心寵的流量,保證設計的一致性對心寵詳情頁進行改版。

1. 發現問題

本次改版主要解決以下兩個問題:

在改版前我們分析了原有頁面存在的一些問題:

03 解決問題

針對于上述的問題,我們分別在視覺層和框架層分別入手進行改版優化:

1. 視覺層

大黃頁下類目繁多,心寵做為黃頁類目的一部分,既要保持其品類獨有的差異性。也要保證整個黃頁風格的統一。

提升頁面一致性:在視覺上根據以下幾點做了統一

  • 頭圖:改版后詳情頁由H5頁面改為native頁面,所以產品頭圖可以與黃頁詳情保持統一。
  • 字號:心寵原有版本整體字號偏小,改版后與黃頁規范字號大小保持統一。
  • 色值:將頁面內心寵主色#FF2737改為平臺主色#FF552E,統一色值。
  • 卡片:信息卡片由直角改為大圓角
  • tab:統一tab切換方式,底部tab使用平臺通用組件,保證設計的一致性。

下圖是改版前和改版后以及和黃頁寵物詳情的對比,整體頁面風格都有了一個大的變化。

差異化設計:在保證設計統一性的同時,與黃頁原有寵物品類也要做相應的差異化處理,讓用戶了解自己進入到的是心寵的還是黃頁的寵物詳情頁,所以改版后在店鋪的位置增加了心寵的logo,增加心寵品牌的露出,強調心寵品牌。這樣不僅可以加深用戶對品牌的認知,還能明顯區分心寵寵物詳情和黃頁寵物詳情,使用戶不會產生混淆。同時在保障圖標上也做了相應的顏色區分。

幼寵的驅蟲防疫信息是用戶判斷寵物是否健康有保障的重要決策信息。改版前以表格的形式展示,但是關系對應性差,用戶的理解成本較高。所以我們將其改為了平鋪展示,通過顏色區分每一針的強度,使信息展示更清晰。

2. 框架層

針對框架層出現的問題,我們做了如下的解決方案:

交易流程改版前在詳情圖片的下方展示,如果用戶沒有繼續瀏覽頁面,將會看不到這部分信息。但交易流程會告訴用戶我們在購寵過程中能給用戶帶來什么樣的保障。所以此次改版我們將交易流程的優先級提升到了頁面首屏,體現心寵的標準化服務,減少跳轉率。

改版前詳情圖片由寵物照片和店鋪介紹兩部分組成,用戶通過橫滑操作的方式瀏覽圖片,點擊展開信息按鈕查看全部文字信息,想要查看完整信息分別需要有兩次操作。改版后我們將兩部分信息整合到了一起,通過展開下滑的方式查看,大大減少用戶的操作成本,提升用戶的決策點。

04 項目總結

此次改版是心寵回歸58后在C端的改版,最主要的目的是在提升用戶體驗的同時,統一視覺,與集團業務融合。

但是因為時間比較緊急,沒有交互同學的參與,所以在很多地方還是缺乏更深度的打磨與思考,在之后我們會逐步將列表,店鋪依次改版,進行融合。希望通過后續不斷的優化,提升用戶體驗,解決用戶的訴求。

 

作者:李國輝,視覺設計師

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@李國輝

題圖來自pixabay,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!