編輯導語：客户經理在和用户對接時候，那麼需要將產品性能儘可能具象化。那麼在家裝領域將場景具象化，就要讓設計賦能線下服務。本文引入Pad設備作為工具，對其在家裝展廳應用的系統化思考。值得閲讀一看。
被窩是貝殼旗下的家裝品牌，致力於推動家裝行業品質服務升級。線下體驗店是家裝銷售的核心場景，客户在這裏通過逛樣板間、主材及工藝，建立品牌初步認知。
為了提供更優質的服務體驗，我們引入Pad作為客户經理與客户洽談的工具，助力家裝銷售體驗升級。
一、現狀1. 結構層：核心流程存在斷點客户經理在做客户維護和服務承接時，需要分別在手機端和Pad端操作。跨設備作業的同時，還存在ToB管理和ToC服務的流程斷點，難以滿足實際的作業訴求，導致很多人覺得流程“麻煩”而棄用。
2. 框架層：整體框架搭建、效率低由於案例、物料等功能缺乏合理組織，查找、使用路徑冗長，客户經理無法快速找到核心產品來宣揚品牌實力，與客户建立信任。
3. 視覺層：未能發揮大屏優勢早期為實現功能快速迭代，直接遷移App端功能且缺少對大屏設備的設計考量，導致未能最大化利用Pad端屏效，無法很好呈現服務內容、提升服務品質感。
二、設計目標面對以上問題，在用研小夥伴的幫助下，我們有序開展了線下探店的活動，貼合場景更深入地瞭解業務。同時基於全局視角，和產品運營小夥伴一起重新梳理線下服務流程藍圖，挖掘各個流程節點的痛點和機會點。
圖1 前期神秘訪客調研及服務流程梳理
基於線上問題的彙總和調研結論的輸入，結合業務的整體規劃，一方面需要真正發揮產品價值，提升銷售場景使用覆蓋率；另一方面要立足於B服務C的銷售場景，提升對客服務的使用體驗。我們希望助力產品，真實地幫助服務者，清晰、高效地解決銷售場景中的實際問題，給到店客户帶來更專業、更有品質的服務體驗，於是有了本次的設計目標。
圖2 設計目標推演
1. 重塑高效、清晰的銷售體驗從交互視角而言，完整的體驗升級可以自上而下：首先在結構層，定義並閉環B、C核心場景的目標客户使用路徑；其次在框架層，根據路徑流程梳理功能框架；最後打磨內容，優化信息呈現效率。
2. 流程再造：清晰的BC隔離設計模式要解決服務流程斷點問題，首先需要細緻梳理門店服務流程，在設計中做好串聯與銜接。我們將維護、預約與跟進動作從APP端遷移到Pad上，完成Pad端BtoC服務全流程自閉環。
圖3 門店銷售流程定義
定義閉環流程後，還需清晰界定產品範圍，建立管理、服務的固定認知，避免服務者在使用時感到混亂，或意外對客展示B端敏感的信息數據。這裏引入BC隔離設計模式，通過設計獨立操作路徑，在同一個端既滿足B端作業場景服務者自身日常使用訴求，又滿足ToC場景針對具體客户的個性化服務呈現。
圖4 BC隔離模式原理
通過開始服務按鈕，進入指定客户的服務頁，完成個性化服務後再通過結束服務退回首頁。隔離後B、C流程路徑完全獨立，便於埋點跟蹤對客服務時長、模塊講解頻次等數據，為產品優化提供明確方向。
3. 功能重組：扁平靈活的結構框架在銷售前期，需要對“客”有完善的準備管理流程，讓客户經理更“懂客户”；此外面向銷售內容，需要對“家裝材料”有高效的展示查找工具，幫助客户經理更“懂產品”。將“效率”作為基礎原則並結合實際場景，我們重新定義產品框架、劃分了首頁功能模塊。
圖5 基於銷售工具屬性的框架優化
作為工具型產品的首頁，需起到快速建立認知、高效觸達核心功能的作用。重構前，首頁用了半屏區域展示已預約客户，便於直接開啓服務。但調研發現，平日已預約客户很少，會導致核心位置空缺，無法合理利用空間。此外高頻物料、功能被混雜收入工具箱中，需要滑動才能查看全部，功能權重弱的同時也缺少合理的組織邏輯，查找很不方便。
圖6 首頁框架對比
本次優化通過底部標籤，切分首頁、客户、產品等核心模塊，建立更符銷售作業的認知；同時在首頁平鋪了合理組織後的核心功能，使其更易觸達。此外，我們在深層級頁面新增快捷回到首頁的導航，便於滿足真實場景中，快速返回首頁頻繁切換物料的訴求。
圖7 導航交互細節
4. 屏效考量：聚焦場景的內容呈現物料分為品宣和功能兩類。對於物料展示部分，早期為快速上線，將手機端的內容採用抽屜的形式平移到Pad端，視窗非常小，展現效果非常的侷促。
本次升級，我們把“抽屜式交互”升級成“全屏視窗”，保證屏幕效用最大化，讓客户看的更爽。同時，為了解決物料聚合後分類多、內容長所帶來的曝光弱、瀏覽效率低的問題，我們把同類物料做成長圖並支持錨點定位，可以沉浸瀏覽並儘量減少跳出感。
圖8 品宣類物料頁面前後對比
對於功能展示，屏效≠屏佔比，並不是越大越好。真實場景中，客户經理會掏出手機介紹真實案例，來打消客户顧慮。為模擬實際使用APP的場景，我們創新設計了工地試裝的交互物料頁面，輔助客户經理講解被窩特色的裝修能力。
圖9 功能類物料創新交互
這裏核心在於“營造手機體驗場景”+“體現功能豐富程度”，將亮點功能集成到手機容器，使之更聚焦。同時支持內部交互跳轉，給互動場景下的客户經理提供豐富的講解素材，讓業主知道：原來購買被窩家裝可以享受這麼多有品質的服務。
三、建立輕盈、舒適的視覺體系1. 內容升維：高效的信息呈現馮·雷斯托夫效應告訴我們，某個元素越是表現的特別，就越容易搶奪人們的注意力和記憶。
舊的工作台首頁將功能都收到工具箱，但這樣會削弱功能的靈活度和層次感，無法快速識別。基於前期梳理，在明確新版工作台的核心價值定位後，根據服務者的使用頻率對功能模塊進行合理的排序、整合，同時通過不同的表現方式（從顏色、大小、版式元素）對內容進行差異化表達，提升服務者信息獲取效率，讓服務者更快速的定位功能並使用。
圖10 工作台首頁
客户服務頁作為個性化服務客户的主要承接頁面，需要向客户兜售自己的方案。大多數服務者在線下會先講解自家的户型，有哪些改造可能以及喜歡的裝修風格等等，不斷的明確客户需求，最終贏取客户信任。
為降低服務者的認知理解成本，根據服務者的實際講解動線和瀏覽習慣，制定從左到右的瀏覽動線，左側放置個人相關信息，右側放置個性化服務信息。左側卡片通過顏色進行差異化處理，快速定位信息，右側設計方案卡片通過大圖模式，吸引客户注意力，喚起客户對裝修效果的興趣。同時為減少頁面信息對服務者講解過程產生過多打擾，對信息進行降噪處理。
圖11 客户服務首頁引導動線
2. 感官喚醒：沉浸的觀看體驗套餐講解是銷售過程中非常重要的一個環節，也是被窩家裝的與其他平台的能力差異化體現。為了更好展示我們的套餐能力，結合Pad優勢採用大圖模式，通過視覺上帶來的衝擊力快速激發客户的想象力，能夠很好的將自家場景產生聯想共鳴，給客户留下深刻印象。在細節處理上，採用了非常具有呼吸感的毛玻璃手法來體現界面的空間感，創建視覺層次結構。
圖12 套餐案例沉浸感打造
除了套餐介紹頁面，也將這樣的設計理念融入進了案例圖集、房間切換等場景。
圖13 房間切換等相關頁面
3. 語言升級：輕盈的視覺體驗在體驗店，相對於手機而言，Pad的攜帶是有一定重量的，客户經理的日常工作是繁雜的。基於設備和服務者工作屬性的考量，我們希望從視覺上的輕量帶來身心的減負，故將本次升級以”輕盈感”為基調，構建起一個清新舒適、簡潔大方、親和有力的使用體驗。
圖14 設計基調
四、關於色彩顏色是體現產品氣質的關鍵因素，我們希望通過新的配色為家裝Pad帶來清新舒適的視覺感受和認知。現有Pad以主色黃色為主，缺少輔助色的使用。主黃色在Pad端反覆出現這就導致出現視覺疲勞、信息不易識別、服務者身份低幼感的問題 。
為保持被窩家裝的基礎調性，銜接客户對被窩已有認知，主色沿用被窩品牌色黃色。在此基礎加入了低飽和度、輕快明亮的輔助色，緩解客户的視覺疲勞，安撫服務者工作中帶來的不安情緒。
圖15 關於色彩
五、關於文字在與客户面對面洽談講解過程中，如何通過文字讓內容展示更具有易讀性是我們思考的問題。
文字信息是客户獲取內容信息的重要來源之一，好的文字呈現效果帶來舒適的閲讀體驗。不同的屏幕大小、分辨率、色彩傾向、視距等，對字號、行距、字色對比度等參數均有不同程度的影響。比如，握在手中的手機，觀看屏幕的舒適距離大約30cm，保證舒適觀看的情況下正文字號設置為16pt。而實際作業場景中服務者和客户觀看屏幕的距離大約40-60cm。
圖16 設備、視距與文字的關係
通過相關理論支持，結合真實的可用性測試定義了文字的使用規範。同時通過字號、字重和字色的差異，明確信息層級，讓客户閲讀時更易讀。
圖17 文字規範的制定
六、關於容器圓角，代表友好、親和，具有更強的內指向性。我們對於圓角的取值上也做了足夠的思考：結合家裝B端特性，卡片內需承載的內容信息眾多，圓角太大會影響邊角信息的呈現，所以我們在圓角選取上將圓角數值整體縮小，採用了可根據場景精細程度選擇合適數值的圓角(4-6-8px)，使卡片容器信息展示更聚焦。
圖18 卡片容器
七、結語項目的成功落地，離不開前期大家一起深入一線的多次調研，和後期確定目標後敏捷的方案驗證。
上線後，Pad使用率有了大幅提升，客户經理和客户給予了很多正面評價，我們也得到了一些改進建議，這讓我們深受鼓舞。但受Pad總持有數量及固有作業習慣的限制，整體使用率仍偏低，有較大的進步空間。相信通過我們持續不斷地努力，會為服務行業的銷售體驗帶來一些改變。
設計並不會一勞永逸，永遠要用發展的眼光去看問題。接下來我們將持續研究、推進Pad端獨特設計模式方法的沉澱，敬請期待。
作者： KEDC，高級設計師；公眾號：貝殼KEDC
本文由@ 貝殼KEDC 原創發佈於人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基於 CC0 協議