編輯導語：客戶經理在和使用者對接時候，那麼需要將產品效能儘可能具象化。那麼在家裝領域將場景具象化，就要讓設計賦能線下服務。本文引入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 協議
