設計沉思錄 | 中臺產品服務升級之58微聊SDK
編輯導讀:文章作者對主導的一個中臺產品服務升級的過程進行了梳理總計,從項目的基礎背景出發,到對目標進行拆解,復盤產品設計的邏輯推演過程,并對升級過后的版本進行了介紹,與大家分享。
01 前言
中臺產品的基礎概念:中臺本質是把一些公共、通用的部分從前臺業務中抽離出來,形成可復用的服務,讓前臺業務之間的信息形成互通和增強的能力;
其特點是業務或功能高度類似,高通用化。主要作用是為各接入方提供通用業務功能接口,幫助業務提升效率,為企業節約產研資源。
58微聊SDK是58集團內部的即時通訊工具,在業務中扮演的角色有客服、銷售、商家、經紀人等。為全平臺提供快捷、穩定、可定制的連接解決方案,全方位助力集團業務發展。
02 背景
隨著集團業務的擴充和發展接入微聊的端口越來越多,58微聊SDK是整個集團即時通訊工具的核心“出口”,SDK體驗的好壞直接影響對應業務的使用體驗和發展。所以微聊SDK視覺交互體驗升級至關重要。
微聊產品現狀分析:
- 視覺交互樣式陳舊體驗差、通用能力落后主流業務線能力同時缺少業務特色;
- 高可定制化響應效率低,需要接入方二次改造成本大,阻礙業務發展速度;
- 高復用率,由于大多數新接入業務或平臺基于資源成本問題會直接復用,所以微聊SDK體驗的好壞直接影響接入方的使用體驗。
03 目標
我們的產品目標是打造體驗一流、生態完善的全鏈接服務,對用戶使用體驗直接負責,加強消息及提醒監管;希望通過重構各端微聊視覺交互,提升微聊整體視覺交互體驗。
接下來將從中臺產品問題收集方法、主要界面框架,視覺語言升級,代碼整體升級以及沉淀通用組件庫等方面來說明本次升級的具體目標:
- 提效:提升產品的復用性,節約產研資源;
- 一致性:提升體驗一致性,降低用戶認知成本;
- 易用性:符合使用者習慣與需求。
04 設計方法探索
首先了解下中臺產品的設計難點是什么?
中臺產品設計有兩大難點分別是:
- 需求分析難:場景多而廣,且不明確;很難找到精準目標用戶;設計目標更加靈活多變
- 設計驗證難:設計轉化提升?用戶反饋收集?
中臺產品前臺化過程
那么中臺產品面向前臺用戶產品化過程是?
通過以上問題分析,我們本次收集方法的重點就是“集中力量”只有集中各個業務方的交互、視覺、產品共同的力量,才能提供更貼近用戶的產品,從而符合用戶的使用體驗,因此我們在前期調研過程中做了下面幾件事:
1. 機制建立
首先2020年3月份我們成立了前臺中臺體驗升級小分隊,集合團隊的力量進行問題收集及反饋,同時我們建立單周會、雙周會的會議機制保證我們各方信息可以及時同步達到一致;同時我們也對前臺業務的微聊產品經理發起了功能調研。
最終我們對調研和走查結果進行匯總,共發現53個體驗問題和19個產品功能需求,更加明確了本次需求改版的的痛點。主要有:
(1)提升框架擴展性
通過前期業務體驗及產品功能調研,發現SDK的框架擴展存在一定的局限性不利于產品長期發展,通過高危提醒、吸頂卡片、表情擴展、通用卡樣式等的增加來提升整體框架的擴展性。
(2)縮短發送圖片路徑
增加圖片快捷發送,5步變3步,提升圖片發送效率。
2. 視覺升級
微聊產品本次視覺升級的目標是強化產品的工具特性、親和力,同時提升用戶的使用識別效率和一致性。同時針對當前版本存在的主要問題版本低-視覺陳舊、品牌感弱-獨立品牌感及與主品牌58的關聯性較弱、缺少業務特色-業務關聯性弱業務場景欠缺等問題進行了以下優化:
(1)品牌色優化,強化品牌工具特性:
我們重新定義了微聊的品牌色,用戶進入產品界面最直觀的就是色彩感知,通過對原本品牌色值、色相、飽和度的調整,讓產品更顯穩重,凸顯產品的工具型特質。
(2)大圓角設計,增加產品親和力:
通過對微聊界面的主要圖形元素、對話卡片、通用卡片、頭像、icon等視覺元素的圓角大小進行整體調整控制,讓產品更加年輕有活力,同時更加適應我們業務陌人生、強利益關系的場景,增加產品整體的親和力。
(3)簡化視覺元素,減少溝通干擾:
為了減少使用雙方溝通過程中的干擾元素,增加信息顏色強弱對比,強化主要內容,通過減少非必要視覺元素如線條的使用,降低使用者的識別成本,通過元素大小和間距的把控讓內容呈現更加有層次感和空間感。
(4)通用卡片重構,強化一致性:
通用卡片樣式陳舊,信息層次弱,且不能滿足當前業務的快速迭代與發展,本次信息卡片重構,增加親和力的同時兼顧信息主次對比,強化主體信息和視覺一致性。
3. 組件沉淀
微聊產品包含信息列表、會話、群管理、搜索等主要框架頁面,我們通過對主體框架的組件沉淀,通用視覺元素的合并抽離,形成豐富的組件庫,方便業務直接復用,有效控制視覺輸出的一致性。
4. 代碼升級
為了提升業務接入和二次改造的效率、節約產研資源,以視覺各平臺方聯合打造的視覺規范為基礎,技術層面對整體SDK代碼層面進行同步優化,讓代碼接入更高效,更好的保證集團微聊產品的視覺一致性。
05 新版預告
微聊SDK預計9月底全面上線目前微聊產品支持的端口多達200+,包含了4大主流端口,分別為移動端、網頁端、M端、小程序端。
四大優勢
- 功能全面-基礎聊天功能、業務特色拓展、及時響應新需求;
- 高效穩定-單日千萬級消息收發,加密傳輸,離線推送;
- 接入簡單-快速對接、UI集成、專業技術服務、豐富的經驗積累;
- 數據反饋-核心數據報表、自定義數據報表、消息總線實時同步。
六大能力
- 會話模式支持單聊、群聊、客服、公眾號;
- 消息類型支持文字消息、語音消息、圖片消息、表情、位置消息、文件消息、視頻消息、視頻消息及自定義消息;
- 音視頻通話支持音頻通話、視頻通話及IP電話;
- 會話管理支持會話列表、刪除會話、會話置頂、會話新消息提醒、會話未讀、消息數、繪畫消息提醒免打擾;
- 消息功能支持消息撤回、消息閱讀回執、群@消息、消息刪除;
- 還有用戶資料同步、敏感詞過濾、離線推送、禁言。
最后感謝全體項目組成員的辛苦付出:張莉、孫巧玲、李洋、張華、李建、汪洋、申玉姝
作者:劉靜頤,視覺設計師
本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@劉靜頤
題圖來自Unsplash,基于CC0協議
- 目前還沒評論,等你發揮!