起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B 端產品用戶體驗升級之旅
編輯導語：產品設計的目標之一便是達成更加完善的用戶體驗，進而提升用戶粘性，推動后續用戶的留存和轉化。作者深度復盤了他的項目，分享B端產品體驗升級背后思考過程，希望可以帶給大家更多幫助！
BrokerCould是一款為金融券商提供客戶關系管理的SaaS產品，至今發展已有4年。市場不斷在變化，客戶對于產品服務的要求也在不斷變化，為了讓用戶有更好的使用體驗，需要對產品進行不斷的優化創新。在2020年下半年，產品進行了自上線以來規模最大的一次改版。
在這次改版中，我們對產品主要板塊進行了體驗上的升級改造，新增了BI和Marketing功能，產品能力大幅提升。本文將為你帶來這一過程中我們在產品設計上的思考過程，出于保證產品隱私考量對于頁面中的一些字段信息進行了替換處理。
一、為什么做體驗升級
做出產品全面體驗升級的決策并沒有那么容易，團隊在經過幾輪的會議討論后，才最終決定對產品進行全面升級改造，產品進行全面體驗升級的原始驅動力主要有以下三點：
- ?NPS凈推薦值：作為一款金融垂直領域SaaS產品，客戶介紹是我們獲取新客戶的主要途徑之一，NPS凈推薦值也是我們長期關注的指標，我們希望通過這次的體驗優化來提升產品的NPS值。
- 品成熟期：產品經過孵化期、成長期進入到成熟期，在這個階段產品功能趨于穩定，讓我們有更多的時間來優化打磨產品，提升產品的用戶體驗。
- 海外戰略：產品國內市場發展受限，業務拓展重心向海外市場轉移，產品交互和視覺上需要針對海外用戶的使用習慣進行調整（關于海外用戶對視覺風格傾向的用研結論顯示，海外用戶更傾向于Chrome及谷歌系產品風格）。
二、產品現有問題分析
解決問題的前提是定位出產品中真正的問題。只有清楚的了解產品的現狀，才能提出優質的解決方案。因此在項目啟動后，我們就開始了對產品現有問題的分析和整理，信息來源于以下三個方向：
- 客戶反饋：通過客戶成功人員收集客戶反饋，深入地了解客戶期望與客戶體驗之間的差距，定位出產品存在的體驗問題。
- 數據分析：分析產品在接入GrowingIO后產生的真實數據，直觀地洞察用戶行為，分析異常數據背后的原因。
- 競品分析：對比分析Salesforce、HubSpot、Zoho等相關競品，找出與之相比我們產品中存在的不足之處和潛在的機會點。
三、明確改版設計目標
產品沒有目標就沒有前進方向，如果只是一個接一個的做不同的功能，只會把產品做成一個功能的集合，而不會勁往一個方向使。
經過前期的市場調研和競品分析，再結合我們自身掌握的資源和產品現狀，我們確定了新階段的產品目標。產品目標是新階段我們對于產品形態的全新定位，也是我們后續進行改版設計的準則。
新階段產品目標關鍵詞：
- 高效管理工具：B端產品的核心價值在于降本提效，通過交互流程優化、引入智能助手等方式將用戶從繁瑣的基礎工作中解放出來，提升用戶日常工作效率，為客戶帶來實際的價值。
- 有溫度的產品：關注用戶使用產品時的情緒，產品的功能服務于用戶需求的同時，更注重情感的交流，讓用戶在產品使用過程更輕松、順暢。
- 差異化的能力：增強產品能力、優化產品體驗，與競爭對手形成明顯區別，獲取競爭優勢，讓產品突出重圍。
四、改版設計方向
我們無意于僅做表層視覺的優化，根據產品屬性、特征以及現實狀況，我們圍繞“高效管理工具、有溫度的產品、差異化的能力”三個關鍵點，對目標進行了分解，對應到具體的頁面升級改造上，對部分功能進行了重構優化，對視覺表現進行了全面的升級。
五、優化方案展示
1. 頁面自定義，打造專屬工作臺
1）首頁優化
在產品最初的階段，我們并沒有一個真正意義上的首頁，而是出于用戶實際的使用場景，將用戶最常訪問的客戶列表頁作為進入產品后的第一個頁面。在后續產品運營過程中，有一些客戶提出需要一個能統一查看客戶跟進情況及業績排行等信息的頁面，方便公司對銷售工作進行匯總管理。
獲取到用戶的實際需求后，我們決定用首頁來承載這些功能模塊，開始階段我們打算只在首頁放置一些通用性強的功能模塊，但后續客戶不斷提出更為定制化的需求，首頁也變得越來越不可控。
舊版首頁的形成
產品設計一旦進入到這種模式，對于產品研發團隊和用戶而言都是一種災難。為了滿足客戶需求，產品研發團隊無法避免會做一些客戶的定制功能的開發，這類定制開發十分占用產品研發資源，影響正常的產品迭代節奏，而最終呈出的大雜燴式的首頁也談不上什么用戶體驗。
2） 轉變方向，重回以人為本的體驗設計
舊版首頁框架是圍繞業務架構建立的，在這次改版中，我們希望基于每一個使用者的視角，來建立新的首頁框架。在建立框架之前，首先我們需要明確的是，新版首頁的定位是什么？
我們對新版首頁的定位是提升工作效率方便用戶快速開展工作的平臺，基于這個定位，新版首頁需要考慮到不同角色對首頁的不同功能需求。不同角色因其工作職責和內容的差異，對其而言同樣一個功能板塊的重要程度是不一樣的。一個內容統一固定的首頁并不能滿足所有角色的工作需要，我們需要設計一個更為靈活的首頁，自定義的需求順應而生。
新版設計框架
為此我們分別找到對應角色的用戶，調研他們的日常工作流程（具體到每天、每周、每月的工作流程），以便更加深入了解他們的需求。基于前面對用戶工作流程的梳理，基本上可以判斷出各個角色關注的核心數據和常用功能。
不同角色工作流程
隨著產品的持續迭代，產品業務種類增多，業務流程變得復雜，用戶處理業務時往往需要在多個頁面間進行來回切換，在一定程度上影響著用戶的工作效率。其實用戶常用的功能并不多，完全可以將他們迫切需要的功能或數據展現到首頁，方便用戶開展工作。
基于前期對不同角色用戶日常工作流程的調研，我們抽象歸納出不同角色的工作路徑，整理出他們對功能、數據的不同需求，將其中高價值的部分做成組件，匯總起來搭建首頁組件庫。用戶在首頁配置頁可以根據自己的工作需要挑選出相應的組件，配置自己的專屬首頁。
布局模式選擇
在首頁的配置頁面，可以進行卡片組件的添加、編輯、拖拽調整位置等操作。每次設置只會應用于個人視圖，不會影響團隊中其他成員的視圖。
首頁編輯頁示意圖
最后我們一起來看看不同布局模式下首頁的實際效果。
首頁三列布局實際效果圖
首頁兩列布局(左寬)實際效果圖
2. 體驗流程優化，提升用戶體驗
1）列表頁優化
對于B端用戶而言，來后臺主要目的之一就是對數據進行查閱和操作。列表頁可以查看和處理大量的數據，常有導航至詳情的作用。用戶可在列表頁對數據進行篩選、比對、新增、分析、下鉆至數據完整詳情頁等操作。因此幫助用戶更高效的查看、處理、查找數據對于提升B端用戶的操作效率有著舉足輕重的作用。
B端用戶都是產品的重度使用者，一個每天會被使用到幾十次的功能，操作步驟是5步還是3步，會帶來明顯的體驗差異。很多看似合理的設計，在高頻使用的場景下，就開始暴露出問題。
將自己武裝成重度使用產品的用戶，進入到打造高效信息管理列表頁的實戰階段，從實際使用者的角度出發分析并定義問題，尋找設計突破口。
原有列表頁問題分析
在定位出列表頁存在的問題后，針對問題點提出相應的改進優化方案。列表頁的改版優化主要圍繞列表頁的三大組成部分篩選器、工具欄、表格來進行。
2）篩選器-高效、便捷的篩選體驗
篩選器的存在對列表頁來說是非常重要的，它可以幫助用戶在列表頁茫茫多的數據當中進行快速的定位。對列表數據進行快速的劃分，縮短用戶對于數據的尋找時間。
舊版篩選器是產品中用戶吐槽很多的一個點，舊版篩選器固定展示在列表頁的左側，將所有的篩選字段依次羅列出來。在進行篩選操作時需要先選中篩選字段點擊展開，然后再對篩選項進行操作，交互步驟較為繁瑣。缺少針對篩選項的排序功能，在篩選時需要花費大量時間來挨個尋找自己要用的篩選項，實際使用體驗不佳。為了用戶更好的篩選場景體驗，我們選擇對列表頁的篩選功能進行優化。
設計之前我們對市面常見篩選器形式進行了調研，為后續設計提供參考。
常見篩選器分析
在我們產品的實際業務場景中，每一個表單字段都有可能成為用戶的篩選條件之一，但是大部分情況下用戶在篩選時只會使用三到四個篩選項結合進行篩選，這幾個篩選項也基本上是如時間、地址、客戶級別、客戶狀態這類的高頻篩選字段。
因為篩選功能是用戶進入列表頁會頻繁使用到的一個功能，所以篩選操作的便捷性是我們在設計新版篩選器時著重考慮的一個點。
通過分析不同類型篩選器的優劣再結合到我們實際的業務場景，設計出更為高效與便捷的新版篩選器，新版篩選器改動主要有以下三點：
- 浮層式篩選器：新版篩選器位置由原本的固定在列表頁左側改為通過點擊按鈕觸發的浮層，這樣的改動能夠擴大表格橫向寬度，表格在橫向上能展示更多的字段信息，改動對于后續新增的行內快捷編輯功能也更為友好。
- 選項平鋪：在原來篩選器使用中就有客戶反應這種勾選篩選項以后才能展開篩選項內容進行篩選的交互方式很不方便，在新的篩選器中我們選擇將部分篩選字段平鋪展示，這樣能簡短操作步驟，提升交互效率。
- 篩選項的增刪與排序：新增篩選項的增刪與排序功能后，用戶可以根據自己的工作需要將自己常用篩選項進行排序后固定展示，不用在尋找篩選項上花費大量時間。
新版篩選器
3）工具欄-空間與布局的合理安排
舊版設計中列表工具欄空間浪費較多，壓縮了表格區域空間，我們希望通過優化頂部操作區域使空間利用更合理。列表工具欄大概有兩個模式，一種是單行模式，節約縱向空間，一種是雙行模式，適用于內容量較多的情況。
在設計過程中我們分別嘗試了兩種模式，我們產品的內容量在單行布局下顯得十分局促，在雙行模式下更滿足元素排序邏輯，所以我們還是選擇了雙行模式。
在雙行模式下，我們選著將標題、視圖、新增等優先級高的元素放在第一行。
表格工具、篩選、表格信息等優先級相對較低的內容放在第二行，為了節省縱向空間，對第二行的內容進行了弱化處理。為了確保搜索的全局性，選擇將搜索放在第一行，不受其他篩選項的影響。
列表工具欄
4）表格-最優信息密度與快捷編輯
我們為用戶提供了“緊湊”、“舒適”和“寬松”這三種表格模式選擇，同時滿足用戶在“效率型”“閱讀型”“展示型”等不同頁面場景的需求。我們還未表格新增行內快捷編輯功能，編輯信息在列表頁即可完成，不用再進入詳情頁進行修改，簡化了步驟，提升用戶工作效率提升。
表格閱讀模式
除了上述的改動，我們還為列表頁新增了看板視圖模式，看板試圖模式在商機等場景有很好的應用，最后讓我們一起看看優化后的列表頁。
列表頁(表格視圖模式)
列表頁(看板視圖模式)
5）詳情頁優化
原版的詳情頁為在新頁全屏展示，優化為詳情頁在當前頁面中展開顯示的方式，可以讓用戶不必經常切換頁面，直接通過點擊下方列表中的客戶名來進行快速切換。
新版詳情頁查看模式
6）信息降噪，讓界面信息更聚焦
詳情頁需要承載的信息、功能繁多，但是單頁面承載能力有限，一旦內容過多，就會出現焦點不突出，內容不清晰的情況。這無疑增加了用戶的思考時間，降低了工作效率。那么如何改善用戶體驗，讓其能夠高效且舒適地使用我們的產品呢？
加強重點、信息降噪是保持信息干凈清晰，更好觸達用戶的保證。通過強化頁面內的有效信息，降低多余元素干擾，從而提升頁面內的“信噪比”，以達到功能與信息有效傳遞，降低用戶理解成本，提高產品操作效率。
提升“信噪比”不能以犧牲用戶正常的信息獲取需求為代價，當頁面元素太多放不下，除了增加產品頁面數，我們可以嘗試運用動效，在同一頁面上擴大產品的內容范圍。
動態擴展內容范圍
舊版產品中跟進記錄模塊是將整個發布控件完整的展現出來，在新版設計中我們將詳情頁由原本的新頁全屏展示優化為當前頁面展開的抽屜形式，詳情頁布局空間也因此變小，新版設計中如果再將發布控件完整的展現出來，由于控件本身占據空間較大，其他內容的展示空間會變得很局促。
因此在新版設計中，我們選擇只將根據記錄的輸入框固定展示，將跟進方式選擇、發布按鈕這些元素都暫時隱藏起來，當用戶點擊輸入框觸發發布控件時，再擴展為完整的發布控件形態。這樣的改動既保證了跟進記錄功能的完整，也保證了頁面信息的干凈清晰。
動態記錄模塊優化
出于用戶長期使用中形成的使用習慣，我們并沒有大幅調整詳情頁的頁面結構，在新版設計中主要優化信息的呈現和細節交互，通過細節優化來提升用戶實際體驗。
詳情頁
3. 組件優化，從底層提升效率
在2年前，為了提升設計輸出的一致性以及提高和下游開發同學的對接效率，我們搭建了UI組件庫。舊版組件庫相對較為基礎，和我們自身的業務貼合度不高。
新版組件庫為解決實際問題而生，基于B端產品特性和自身業務特點，確定組件庫清晰、靈活、效率、優雅的設計原則，對如地址選擇、人員選擇、時間選擇等20余個組件進行了設計優化。我們希望用戶使用新版組件更高效地去解決問題，并且從中獲得愉悅的感受。
新版組件庫設計思路
1）組件優化示例-字段選擇組件
產品中如列表頁配置表頭顯示內容、后臺配置默認顯示字段等很多場景都需要進行字段選擇。不同場景之間的功能需求也有所區別，有的需要能對選擇后的字段進行排序，有的對已選擇的字段有數量限制。
舊版設計中是使用穿梭框來進行字段選擇，為了滿足這些穿梭框能力之外的功能需求，我們對穿梭框進行了改造，產品中因此產生了幾個衍生版本的穿梭框組件，整體性差，不成體系。
在我們產品實際的用戶使用環境中，可選字段數量經常能達到七八十個字段。這么多字段的情況下選用穿梭框進行字段選擇效率很低。
2）新版設計中
1.側重的將可選字段區域占比擴大，并將字段平鋪展開，這樣可以展示更多的可選字段，更從容、高效的進行字段選擇。
2.在已選字段區域，將排序、限制已選字段數量等功能統一設計，保持交互的統一性。
3.新增搜索功能，方便用戶快速選擇目標字段。
新版字段選擇組件
應用實例
3）組件優化示例-地址選擇組件
地址選擇是新建表單中的常見填寫項，舊版地址選擇組件缺少搜索功能，級聯選擇的選擇方式效率低，在列表頁中進行篩選時舊版地址選擇組件不能支持多選。
在新版設計中我們針對這些問題進行了相應的優化：
- 地址信息平鋪展開，提高選擇效率
- 地址選擇組件新增搜索功能
- 添加復選框，支持篩選場景下的多選需求
新版地址選擇組件
4）組件優化示例-下拉選擇組件
在類似于審批人選擇這類場景，我們除了可以選擇具體的“成員”為審批人外，同時可以選擇“角色”或“部門”作為審批人，這樣可避免因成員離職變動導致審批流失效。
在一個組件中同時選擇三種不同類型的數據，舊版下拉選擇組件是不支持的。舊版設計中我們的解決方案是用兩個選擇組件配合使用來達到這樣的效果，先選擇審批人的類別，再選擇具體的審批選項。
這種交互方式的無疑體驗不好，新版設計中我們給選擇器新增了Tab，通過Tab切換來區分選擇不同類型的數據。
新版下拉選擇組件
新版組件庫有一套全新的設計語言，從設計原則到字體排版，從交互到文案，從動效到樣式，從組件到設計工具……
4. 幫助引導系統化、體系化
大多數的B端產品，業務邏輯都非常復雜，為了滿足復雜業務邏輯的需要，設計的業務流程和產品頁面也相對復雜，為了讓用戶在使用產品時能方便、快捷的完成任務，在客戶使用產品前會安排專門的實施人員對用戶進行產品知識培訓。盡管提供了培訓，用戶在使用產品過程中或多或少還會遇到問題。
這時候一個好的幫助引導系統存在就很有必要，舊版產品中幫助功能是一個很小的模塊，當用戶產生疑問時，引導他去幫助中心查閱資料，這種方案顯然不太高效，幫助中心是按產品功能邏輯排列說明文檔，定位問題答案十分不易。
用戶根本訴求是：能快速定位到問題的答案，排解自己的疑惑。因此我們仔細詢問過用戶疑惑感來源的方方面面，構建了構建了基于場景識別的幫助引導系統。
1）簡單問題，就地解決
如名稱解釋、操作提示等簡單問題，提前預判問題點，給出輕量化的快速解答，就地化解疑惑。若疑惑未被消除，提供入口，將用戶引導至該問題對應的詳細說明文檔。
示例一
2）因地制宜 ，快捷訪問
我們對全局幫助面板進行升級，它的形式不再是一成不變，而是根據用戶當前訪問的頁面，給出當前頁面用戶可能出現問題指引和快速開始教程，幫助用戶快速解決問題。
示例二
3）復雜功能 ，視頻講解
在如圖表配置、數據工場這類流程和邏輯復雜的頁面，通過文字來給用戶完善的引導往往需要長篇大論。在這類頁面我們給用戶提供視頻講解來幫助用戶快速上手，相對于文字而言視頻的講解更形象易懂。
示例三
4）空頁面，無形的引導
最好的引導是無形的，不強制要求用戶完成教學任務，將空頁面作為用戶引導流程的一個起點，將空頁面設計為介紹產品功能，引導用戶的模塊。
示例四
最后我們還有一個強大的后方——幫助中心，幫助中心是我們整個幫助引導系統中重要的部分之一。在這里我們為用戶提供了各種各樣的幫助形式和學習資料，如教學視頻、幫助文檔、問答社區等。用戶有了問題進入到幫助中心，可以很便捷的找到自己想要的答案，并且答案足以解決他們的問題。
5. 全新風格、情感化插畫
在新版設計中我們繪制了全新風格的產品插畫，運用于產品中空狀態，加載等待、運營活動等場景，插畫作為現代設計的一種重要視覺傳達，可以進行信息的傳達、感情的傳遞。
具備文字所不具備的溫度的插畫，能引發共情效應的同時，可以具像化品牌形象、促進轉化以及提升用戶粘合度。
列表頁搜索為空示例
空狀態插圖示例
六、總結
以上，是本次全面體驗升級背后的原因以及思考過程，從前期用戶調研、問題分析、目標確定（1.高效管理工具；2.有溫度的產品；3.差異化的能力），到通過多維度地將目標落地（1.頁面自定義，打造專屬工作臺；2.體驗流程優化，提升用戶體驗；3.組件優化，從底層提升效率；4.幫助引導系統化、體系化；5.全新風格、情感化插畫），優化了體驗、提高了使用效率。
新版設計在上線灰度測試后，通過問卷對本次體驗升級進行滿意度收集，測試租戶對于新版產品的滿意度平均值高達90%，用戶對于新版產品有很多正面反饋，有租戶反饋新版首頁對員工日常工作幫助很大，新版列表頁對于用戶日常管理用戶更高效。
對于自我認知，設計更像一場修行，知易行難。作為體驗設計師，不要紙上談兵，只在乎視覺層面的感知，應該深入用戶群體，升入了解用戶使用場景，從用戶和業務的角度去研究用戶群體，只有站在更全面的的角度去思考問題，才能更好地服務用戶。
受限于篇幅，沒有將新功能BI和marketing部分的設計思考過程展示出來，以后會單獨分享，最后按照慣例上一波設計圖。
作者：Yone楊 ；公眾號：黑馬家族
原文鏈接：https://mp.weixin.qq.com/s/Kejsj3gkdvMW17zrQxhTXg
本文由@黑馬家族 授權發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
很棒的文章
用心了，贊