談談B端業務系統的首頁設計

編輯導語：作為B端業務系統的產品經理，經常收到各類聚焦於具體功能點的業務需求，卻鮮有針對首頁的優化需求；但是當我們滿足了各類業務需求後，用戶仍會吐槽系統難用，老闆也認為對業務提效沒作用；本文是作者關於B端系統的設計分析，我們一起來看一下。

筆者通過大量的用戶訪談和各類B端系統的使用分析，發現背後的原因主要有2點：一是產品功能的交互體驗糟糕，而另外一個重要原因是首頁設計不到位。

針對B端產品交互體驗的優化，大家可以多看看尼爾森的互動設計10大原則，今天主要想跟大家分享下關於B端業務系統首頁設計的一些思考~

一、首頁的產品定位

業務系統的核心目標是支持頂層業務管理目標的快速達成，所以業務系統的首頁設計應該從業務目標和管理效率這2點出發。

針對不同用戶角色聚合常用的數據信息和功能操作，通過數據激發動力，通過快捷工作檯高效執行，以此來實現業務管理目標的高效達成。

二、首頁的設計思路

1. 分角色

業務系統的特點之一便是涉及組織角色多，且每個角色的崗位權責不同。所以首頁的設計需要針對不同角色定製不同的首頁。

2. 通過數據信息激發動力

德魯克說過：「如果不能衡量，就無法管理。」作為業務系統，管理者肯定會針對不同的角色下發對應業務考核指標，這些數據會直接與績效薪資掛扣。

所以在首頁上，應該有相關的數據信息以激發用戶的工作動力；例如 一線銷售的首頁需要有相關的業績排名數據，以激勵銷售想法設防維護老客戶同時不斷開發新客戶。

3. 通過消息公告精確觸達

業務系統首頁是用戶每天必須高頻訪問的頁面，通過首頁進行相關消息公告的觸達效果是最及時且最準確有效的。

所以針對各種業務策略的的調整，需要在首頁內通過消息公告實時傳達下去，以保證一線業務人員能按照最新的策略去開展工作。

4. 通過快捷工作檯高效執行

組織為了管理高效，針對每個崗位的權責不會太多，所以落到系統內常用功能只有幾個。

但是整個業務系統涉及到的業務流程複雜，用戶處理業務時往往需要在很多頁面間進行切換，一定程度上影響著用戶的工作效率。

所以B端產品需要一個快捷的工作檯，讓用戶快速跳轉到對應的業務處理頁面。

三、CRM首頁設計的實戰過程梳理

下面將模擬設計一款CRM的首頁，具體為大家介紹下如何進行業務系統的首頁設計。

背景簡介：這是一家大型網際網路公司，整個銷售體系是以地推為主，電銷輔助，涉及銷售人員1W+。公司的CRM產品雖然現在常用的數據和功能都已經完善，但是並未聚合到首頁，所以用戶需要來回在多個菜單間切換，使用效率較低。因此啟動了CRM首頁的重構項目。

1. 需求調研

和其他常規需求一樣，第一步也是需求調研。只是首頁本身是聚合頁面，用戶難以表達很明確的需求。所以在調研方式和流程上需要有更多思考，下面是我這邊常用的首頁需求調研步驟。

1）梳理CRM相關的組織架構及崗位權責

因為首頁需要分角色定製，所以第一步需要先了解清楚整個系統涉及到哪些組織和角色。

大部分公司都會有組織架構和崗位權責說明書，所以這個環節也可以與HR團隊溝通，獲取到這部分數據。

下圖是這家公司的銷售組織架構，主要分為了3部分：戰略大客戶、城市新籤、電銷。其中CRM系統的最核心用戶是城市新籤團隊，人數佔了90%。

所以下面的分析，均以【城市新籤團隊一線BD】為例展開。

舉例：該公司【城市新籤團隊一線銷售】的崗位職責說明

• 開發：搜集未合作門店信息，通過談判促成商家合作，完成新門店的籤約任務。
• 運營：通過對新老門店的異常數據增長點進行分析，並協助商家制訂改善方案，提升門店產出。
• 維護：持續對已合作門店進行到店拜訪和電話拜訪提升客情。
• 競爭：收集競品在市場中的動作，整理分析影響並匯報，執行上級制訂的對攻動作，提升市場佔有率。

2）梳理各個角色的日常工作SOP流程

基於前2步梳理的組織及崗位權責，分別找到對應的用戶調研日常工作流程（具體到每天、每周、每月的工作流程），以便更加深入了解他們的需求。

這部分如果是相對規範的大公司，應該會有成型的體系和文檔，可以直接從HR團隊獲取；如果沒有，就需要找到對應的實際用戶進行調研訪談，甚至是日常工作陪訪觀察。

舉例：城市新籤團隊一線銷售的日常工作SOP流程

3）各個角色核心數據及常用功能

基於上一步的流程梳理，基本上可以判斷出各個崗位關注的核心數據和常用功能。

接下來，可以通過現在系統內的數據埋點情況進一步確認。

舉例：城市新籤團隊一線銷售關注的核心數據和常用操作。

核心數據：

• 個人的提成數據，提成排名；
• 個人的籤約數據，目標完成情況；
• 個人的回款數據，目標完成情況；
• 客戶異常，例如掉海、逾期未回款；

常用操作：

• 客戶檢索-快速查到客戶，處理相關問題；
• 認領客戶-擴展新客戶；
• 添加拜訪計劃；
• 到店打卡；
• 添加拜訪；
• 創建合同；
• 日常工單；

2. 首頁方案初稿設計

前期的溝通調研到位，那方案的設計其實就相對簡單，無非就是搭積木。

舉例： 城市新籤團隊一線銷售的首頁初稿

從一線銷售SOP流程可以看出，該角色是上午在辦公室用PC，下午外勤用APP，所以對應的首頁需要設計PC和APP兩個版本。

1）一線銷售首頁-PC版

銷售主要是上午和晚上在公司時採用PC，所以要結合BD使用PC的場景來梳理。

為了便於銷售能第一時間了解到公司的業務策略，所以頂部增加了【①消息公告區域】展示最新的業務策略等信息；同時增加【⑦消息通知】入口和數據角標提示，讓銷售能關注到普通的消息。

為了提升銷售的動力同時為了在早會時提前了解自己的業績情況，通過【②核心數據】展示銷售業績情況及排名。

一線銷售上午在公司主要是做當天下午的拜訪計劃，所以直接將【③拜訪計劃】直接展示出來，便於銷售做拜訪計劃和路線規劃。點擊可進入拜訪計劃列表頁面，然後對計劃進行調整。

因為做拜訪計劃時，一般銷售都會優先關注異常的客戶，所以通過【④客戶異常預警】展示出來，方便銷售及時了解到這些異常情況並且安排對應的拜訪計劃。

做完計劃後，銷售要做對應的拜訪材料準備，這裡就需要進入【客戶詳情頁】去查詢相關的數據，所以在首頁增加【⑥快捷搜索】可以快速進入對應門店詳情頁；同時在平時處理客戶問題時，也可以直接通過這個入口快速定位。

然後在【⑤快捷操作】這裡主要是聚焦在辦公室用PC時的常用功能，例如工單處理、尋找新客戶、錄入合同等等；同時增加了【自定義功能】更靈活的支持一線銷售的使用習慣。

最後是增加了相關的一些入口：APP下載、問題反饋、操作指南等。

2）一線銷售首頁-APP版

因為App主要是外勤拜訪期間使用，數據和操作項相較PC都有相應的調整。

• 因為銷售用APP比較多，所以在APP首頁通過【②核心數據】展示了業績、回款、提成等數據，讓銷售時時能看到並不斷激勵。
• 有些政策消息的發布時間是在下午銷售外勤期間，所以增加【①消息公告區域】和【⑥消息通知】入口。
• 因為外勤期間主要的工作就是拜訪，所以單獨將拜訪常用的3個模塊展示出來
• 今日計劃–通過數字角標提示銷售，今日未完成的拜訪計劃數，【點擊】直接進入拜訪計劃列表，查看明細。
• 到店打卡–【點擊】可快速完成籤到；
• 打卡未錄入–通過數字角標展示今日尚未完成填寫的拜訪記錄，避免銷售忘記錄入拜訪記錄而導致拜訪無效；【點擊】直接進入拜訪記錄列表頁，然後錄入拜訪信息。
• 因為走訪期間，會因為客戶臨時爽約。所以需要在APP上尋找新的拜訪客戶，因此增加【④客戶異常預警】展示出來，方便銷售及時了解到這些異常情況並且安排對應的拜訪計劃。
• 同時在拜訪期間，會需要臨時查看某些客戶的情況，所以增加【⑤全局搜索】，快速定位到對應客戶。

3. 首頁方案初稿評估

接下來我們模擬一線銷售小李的一天，評估新版的首頁是否能達到管理目標，提升管理效率。

09:00——10:30 在公司參加早會，這段時間不需要使用CRM系統。

10:30——12:00 打開電腦登錄到CRM系統。開始今日拜訪準備+日常事務處理。

• 首先，第一眼看到【①公告區域】公司最新的提成政策出來了，這次提成加大了新籤的比例，看來這個周要多開發新客戶了。
• 接著，看到【②數據區域】自己的排名，這個月籤約業績才完成了30%，同桌的小張已經80%了；再看看提成，小張比自己多出了8千多了；好吧，沒有對比就沒有傷害，小李的鬥志瞬間被激發了。
• 接著，看到【③拜訪計劃】今天的拜訪計劃才定了2個，要完成業績目標，今天必須要跑滿6家客戶才行，到底要拜訪哪些客戶呢？
• 接著，看到了【④業務預警】即將掉海的客戶有6個，這些都是好不容易挑到的好客戶要儘快跟進下，否則掉出去就可惜了；點擊【即將掉海客戶】，進入客戶詳情頁，撥通聯繫人的電話，逐個預約了本周的拜訪時間，然後同步創建了對應的拜訪計劃；接著針對【業務預警】裡的其他客戶重點梳理了下，今天剩下的幾個拜訪計劃都確認了。
• 接著，看下【⑤快捷操作】裡裡有3個待辦工單的，點擊進去完成了處理。
• 處理完工單，看看時間11:30了。小李想起來早會的時候盤點客戶，發現目前待合作的客戶只有20%，迫切需要儲備新客戶了；點擊【⑤快捷操作-公海客戶池】，從裡面篩選出了一批還不錯的客戶，認領到自己私海了；小李計劃著本周對這幾個新客戶都拜訪下，先找到聯繫人了解下大概情況。

12:00——18:30 小李外出拜訪，基本都在使用App。

• 按計劃來到第一家客戶，打開APP首頁【③到店打卡】，完成了今天的第一個籤到。
• 找到老闆開始溝通，因為第一次拜訪所以主要是介紹公司的產品；這時老闆問到，隔壁的商戶情況，正好這家店已經合作了，小李想著直接拿那個商戶的數據給這個老闆講講，正好是個成功案例。小李通過首頁【⑤全局搜索】，輸入那個商戶的名稱直接進入了該商戶的詳情頁，直接給這個老闆展示了下該商戶合作前後的效果對比數據；老闆聽完這個成功案例很滿意，讓小李儘快做一份合作方案後天找他再溝通下。
• 第一次拜訪結束後，小李打開【③打卡未錄】找到剛剛這個商戶的打卡記錄，順手錄入了這次的拜訪信息，同時預約了後天的拜訪計劃。
• 到了下午4點，小李看了下【③今日計劃】的數字角標已經沒有了，今天的拜訪任務提前完成了；今天還能再跑幾家客戶，先看看即將掉海的客戶有沒有正好在附近的，可以順路過去看看。點擊【④業務預警-即將掉海客戶】，正好裡面有2家在附近，走過去，小李順利完成了這2家客戶的拜訪。

18:30-19:00 小李回到公司參加晚分享。

19:00–20:00 小李打開電腦，開始處理日常事務。

• 今天情況不錯有1個客戶成功續約，一個新客戶也成功籤約了。要趕緊要把合同錄進去，爭取這周走完流程。打開電腦點擊【快捷操作-新建合同】，完成了合同的錄入。
• 19:20，今天拜訪的一個客戶給小李打電話說，後天想約小李過去聊下合作方案；小李，掛完電話點擊【快捷操作-新建計劃】把這個客戶加入到了周三的拜訪計劃裡。
• 19:30，小李想起來，今天公司其他業務線的同事跟他微信上分享了一個客戶叫XX，說還挺不錯的；小李想著先看看這個客戶的情況吧，點擊【全局搜索】輸入客戶名稱，快速找到了這個客戶；進入客戶詳情頁，這個客戶確實不錯體量很大，如果能籤下來提成應該能拿不少；小李趕緊把這個客戶認領到了自己的私海內，同時加入到了明天的拜訪計劃裡。
• 19:50，首頁消息這塊有2個新消息提醒，點擊【消息通知】發現今天錄入的2個新合同已經審批通過了，客戶也籤完字了。

20:00 小李關上電腦，下班回家~

通過模擬銷售小李的一天，可以看出小李通過首頁，高效的完成了相關的動作，並且取得不錯的業務結果。

所以這套首頁方案初步判斷是OK的。

4. 首頁方案上線後優化

首頁改版最好是能先灰度一版，灰度期間深入到一線走訪。通過觀察用戶對首頁的使用情況，調研用戶的使用反饋，不斷優化迭代，最終給到用戶一個真正好用的首頁。

四、首頁方案上線後優化

首頁改版最好是能先灰度一版，灰度期間深入到一線走訪；通過觀察用戶對首頁的使用情況，調研用戶的使用反饋，不斷優化迭代，最終給到用戶一個真正好用的首頁。

業務系統並沒有太多可完全借鑑參考的首頁設計，所以本文只是簡單梳理了之前做首頁的一些經驗和心得，希望對大家有幫助。

 

本文由作者@水問 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash ，基於 CC0 協議