起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B2C服務場景設計探索：家裝Pad體驗升級
編輯導語：客戶經理在和用戶對接時候，那么需要將產品性能盡可能具象化。那么在家裝領域將場景具象化，就要讓設計賦能線下服務。本文引入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 協議
- 目前還沒評論，等你發揮！
