設計沉思錄 | 助力業務之PC端微聊改版總結
編輯導讀:在產品的迭代升級過程中,改版設計是常常會遇到的問題。文章對58集團內部即時通訊工作——微聊的升級改版進行了詳細的梳理,對遇到的一些問題進行了分析總結,供大家參考學習。
01 前言
如今,社交產品根據不同的需求和定位,已深入互聯網更多細分領域。按功能屬性可被劃分為通訊工具和社交平臺。除了能滿足人們日常生活中即時聊天的需求,最主要的是可以將網站信息與聊天用戶直接聯系在一起,滿足人們的公共社交需求。
02 背景
微聊是集團內部的高效即時通訊工具,連接了用戶、商家、客服等不同角色。最為接入業務數最多的中臺能力,是實現業務連接 、商業轉化的有力支撐。
微聊接入業務近幾年,隨著公司業務的不斷增長、產品結構復雜化,微聊在承接業務過程中收到用戶及業務方的反饋:微聊風格陳舊、各端體驗不一致,且微聊回復率低,擴展性較差。
目前同城業務已經覆蓋包括App端、M端、小程序等平臺,但仍有大量用戶習慣使用網頁端58,這些用戶的使用體驗仍是我們需要重點關注的。
03 重新定義
58同城正在從“流量型”平臺轉向“服務型”平臺。新技術的應用加大了用戶與商戶之間的連接數量和連接效率,促進交易的發生。我們的產品目標是打造體驗一流、生態完善的全鏈接服務,幫助集團全業務發展。面對現有的訴求點 ,我們發起了對網頁端微聊改版項目。
那么對于此次改版,我們除了滿足基本聊天需求外是不是可以做的更多?
結合中臺業務特點,我們重新定義微聊,微聊不僅僅是輕量聊天工具,也是助力各業務的全鏈接服務生態;作為中臺能力,除了為集團各業務提供標準化服務,高復用性、快速接入以外,還具備擴展性,支持業務自定義。
04 設計目標
為了讓產品更符合用戶預期,最大化滿足業務需求,針對PC端微聊方案改版,我們確定本次改版設計目標。
- 在業務層面:提高微聊連接率,進一步實現商業轉化;
- 從用戶角度:提升使用體驗,溝通更高效;
- 從設計內部角度:提升微聊品質感,讓微聊更具包容性和擴展性
05 設計實施
設計流程中 我們通過洞察問題點并挖掘多方訴求來尋找機會點,確定設計目標后并進行拆解落地,通過對數據驗證,從而展開后續的迭代規劃。
在改版前期 ,針對舊版頁面進行問題梳理,主要包括三個方面:
- 在視覺層界面-風格陳舊;圖標樣式不精細;干擾元素過多;
- 在交互層頁面信息結構不明確;信息獲取不夠高效;
- 在產品層頁面功能單一,易用性不足;產品缺少記憶點。
我們對設計目標進行拆解,從以下4個點切入設計目標并進行落地:
1. 視覺語言升級,強化品牌感知
視覺升級中,在保持微聊原有圖形不變的前提下,對微聊品牌色進行升級,在原有藍色系基礎上進行加深,使其更符合高效、工具性特點;
同時為了強化品牌,利用微聊圖形的特征,在功能圖標設計中使用相同的元素,加強品牌記憶點。在微聊界面頭部位置, 將圖形放大化作為背景,在潛移默化中加強用戶對微聊產品的感知。
2. 聚焦用戶場景 優化信息結構
在優化信息層級中,對原有信息層級進行梳理,并優化信息結構展示。減少溝通中干擾元素,增加信息強弱對比,強化重點內容。固定了消息通知模塊,使用戶瀏覽更聚焦;同時壓縮帖子信息和輸入區,來增加消息瀏覽空間,使閱讀更有效率;
3. 組件化設計,提升一致性
為保證業務接入更高效,我們對通用功能卡片組件化,增加親和力的同時兼顧信息主次對比,強化主體信息和視覺一致性。
如在文件發送卡片中,固定卡片信息結構,并列出文件縮略圖合集,方便適配各種文件發送場景;
同時在帖子信息卡片中, 通用視覺元素的合并抽離,形成豐富的組件庫,方便業務直接復用,有效控制視覺輸出的一致性。將卡片劃分為5個區域:標題、次要信息、價格、圖片、標簽 ;同時列舉出各種字段空缺時的正常展示樣式,保證視覺設計統一性,提高了模塊的易用性及后期延展性。
4. 支持自定義,打造沉浸式體驗
在產品層面,為滿足多業務的個性化需求、豐富多場景的溝通需求,在微聊布局中,我們創新提出預留自定義區域,在網頁端右側新增第三欄的布局結構,通過打造沉浸式體驗,讓用戶瀏覽更專注,溝通更高效;業務方可根據自身業務需求,選擇兩欄或三欄的展示形式,方便實現快速接入;
06 數據總結
改版上線后微聊回復閱讀比提升了3.95%,表明相比于之前的單向發送,上線后雙方建立鏈接率有提升。
本次PC端微聊改版是由設計側主動推動并落地的項目,我們通過體驗的視角去洞見機會點,以體驗設計的方案為業務賦能,在協同中臺業務全流程中,實現設計價值的最大化。
最后感謝全體項目組成員的辛苦付出:孫巧玲、李洋、劉靜頤、汪洋、劉辰
作者:張華,視覺設計師
本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@張華
題圖來自 Unsplash,基于CC0協議。
作為基礎平臺辦公軟件,改造的初衷應該是降本提效;然后是提升通用化、標準化的能力,以保證一致性體驗;再然后是提升使用愉悅感,咱們這個改造從這三方面來看,略顯初級了
77小W能否分享個高級的案例?
方法
訂單
導讀有錯別字