談談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 協議