編輯導(dǎo)語：客戶經(jīng)理在和用戶對接時候，那么需要將產(chǎn)品性能盡可能具象化。那么在家裝領(lǐng)域?qū)鼍熬呦蠡?，就要讓設(shè)計賦能線下服務(wù)。本文引入Pad設(shè)備作為工具，對其在家裝展廳應(yīng)用的系統(tǒng)化思考。值得閱讀一看。

被窩是貝殼旗下的家裝品牌，致力于推動家裝行業(yè)品質(zhì)服務(wù)升級。線下體驗店是家裝銷售的核心場景，客戶在這里通過逛樣板間、主材及工藝，建立品牌初步認(rèn)知。

為了提供更優(yōu)質(zhì)的服務(wù)體驗，我們引入Pad作為客戶經(jīng)理與客戶洽談的工具，助力家裝銷售體驗升級。

一、現(xiàn)狀

1. 結(jié)構(gòu)層：核心流程存在斷點(diǎn)

客戶經(jīng)理在做客戶維護(hù)和服務(wù)承接時，需要分別在手機(jī)端和Pad端操作?？缭O(shè)備作業(yè)的同時，還存在ToB管理和ToC服務(wù)的流程斷點(diǎn)，難以滿足實(shí)際的作業(yè)訴求，導(dǎo)致很多人覺得流程“麻煩”而棄用。

2. 框架層：整體框架搭建、效率低

由于案例、物料等功能缺乏合理組織，查找、使用路徑冗長，客戶經(jīng)理無法快速找到核心產(chǎn)品來宣揚(yáng)品牌實(shí)力，與客戶建立信任。

3. 視覺層：未能發(fā)揮大屏優(yōu)勢

早期為實(shí)現(xiàn)功能快速迭代，直接遷移App端功能且缺少對大屏設(shè)備的設(shè)計考量，導(dǎo)致未能最大化利用Pad端屏效，無法很好呈現(xiàn)服務(wù)內(nèi)容、提升服務(wù)品質(zhì)感。

二、設(shè)計目標(biāo)

面對以上問題，在用研小伙伴的幫助下，我們有序開展了線下探店的活動，貼合場景更深入地了解業(yè)務(wù)。同時基于全局視角，和產(chǎn)品運(yùn)營小伙伴一起重新梳理線下服務(wù)流程藍(lán)圖，挖掘各個流程節(jié)點(diǎn)的痛點(diǎn)和機(jī)會點(diǎn)。

圖1 前期神秘訪客調(diào)研及服務(wù)流程梳理

基于線上問題的匯總和調(diào)研結(jié)論的輸入，結(jié)合業(yè)務(wù)的整體規(guī)劃，一方面需要真正發(fā)揮產(chǎn)品價值，提升銷售場景使用覆蓋率；另一方面要立足于B服務(wù)C的銷售場景，提升對客服務(wù)的使用體驗。我們希望助力產(chǎn)品，真實(shí)地幫助服務(wù)者，清晰、高效地解決銷售場景中的實(shí)際問題，給到店客戶帶來更專業(yè)、更有品質(zhì)的服務(wù)體驗，于是有了本次的設(shè)計目標(biāo)。

圖2 設(shè)計目標(biāo)推演

1. 重塑高效、清晰的銷售體驗

從交互視角而言，完整的體驗升級可以自上而下：首先在結(jié)構(gòu)層，定義并閉環(huán)B、C核心場景的目標(biāo)客戶使用路徑；其次在框架層，根據(jù)路徑流程梳理功能框架；最后打磨內(nèi)容，優(yōu)化信息呈現(xiàn)效率。

2. 流程再造：清晰的BC隔離設(shè)計模式

要解決服務(wù)流程斷點(diǎn)問題，首先需要細(xì)致梳理門店服務(wù)流程，在設(shè)計中做好串聯(lián)與銜接。我們將維護(hù)、預(yù)約與跟進(jìn)動作從APP端遷移到Pad上，完成Pad端BtoC服務(wù)全流程自閉環(huán)。

圖3 門店銷售流程定義

定義閉環(huán)流程后，還需清晰界定產(chǎn)品范圍，建立管理、服務(wù)的固定認(rèn)知，避免服務(wù)者在使用時感到混亂，或意外對客展示B端敏感的信息數(shù)據(jù)。這里引入BC隔離設(shè)計模式，通過設(shè)計獨(dú)立操作路徑，在同一個端既滿足B端作業(yè)場景服務(wù)者自身日常使用訴求，又滿足ToC場景針對具體客戶的個性化服務(wù)呈現(xiàn)。

圖4 BC隔離模式原理

通過開始服務(wù)按鈕，進(jìn)入指定客戶的服務(wù)頁，完成個性化服務(wù)后再通過結(jié)束服務(wù)退回首頁。隔離后B、C流程路徑完全獨(dú)立，便于埋點(diǎn)跟蹤對客服務(wù)時長、模塊講解頻次等數(shù)據(jù)，為產(chǎn)品優(yōu)化提供明確方向。

3. 功能重組：扁平靈活的結(jié)構(gòu)框架

在銷售前期，需要對“客”有完善的準(zhǔn)備管理流程，讓客戶經(jīng)理更“懂客戶”；此外面向銷售內(nèi)容，需要對“家裝材料”有高效的展示查找工具，幫助客戶經(jīng)理更“懂產(chǎn)品”。將“效率”作為基礎(chǔ)原則并結(jié)合實(shí)際場景，我們重新定義產(chǎn)品框架、劃分了首頁功能模塊。

圖5 基于銷售工具屬性的框架優(yōu)化

作為工具型產(chǎn)品的首頁，需起到快速建立認(rèn)知、高效觸達(dá)核心功能的作用。重構(gòu)前，首頁用了半屏區(qū)域展示已預(yù)約客戶，便于直接開啟服務(wù)。但調(diào)研發(fā)現(xiàn)，平日已預(yù)約客戶很少，會導(dǎo)致核心位置空缺，無法合理利用空間。此外高頻物料、功能被混雜收入工具箱中，需要滑動才能查看全部，功能權(quán)重弱的同時也缺少合理的組織邏輯，查找很不方便。

圖6 首頁框架對比

本次優(yōu)化通過底部標(biāo)簽，切分首頁、客戶、產(chǎn)品等核心模塊，建立更符銷售作業(yè)的認(rèn)知；同時在首頁平鋪了合理組織后的核心功能，使其更易觸達(dá)。此外，我們在深層級頁面新增快捷回到首頁的導(dǎo)航，便于滿足真實(shí)場景中，快速返回首頁頻繁切換物料的訴求。

圖7 導(dǎo)航交互細(xì)節(jié)

4. 屏效考量：聚焦場景的內(nèi)容呈現(xiàn)

物料分為品宣和功能兩類。對于物料展示部分，早期為快速上線，將手機(jī)端的內(nèi)容采用抽屜的形式平移到Pad端，視窗非常小，展現(xiàn)效果非常的局促。

本次升級，我們把“抽屜式交互”升級成“全屏視窗”，保證屏幕效用最大化，讓客戶看的更爽。同時，為了解決物料聚合后分類多、內(nèi)容長所帶來的曝光弱、瀏覽效率低的問題，我們把同類物料做成長圖并支持錨點(diǎn)定位，可以沉浸瀏覽并盡量減少跳出感。

圖8 品宣類物料頁面前后對比

對于功能展示，屏效≠屏占比，并不是越大越好。真實(shí)場景中，客戶經(jīng)理會掏出手機(jī)介紹真實(shí)案例，來打消客戶顧慮。為模擬實(shí)際使用APP的場景，我們創(chuàng)新設(shè)計了工地試裝的交互物料頁面，輔助客戶經(jīng)理講解被窩特色的裝修能力。

圖9 功能類物料創(chuàng)新交互

這里核心在于“營造手機(jī)體驗場景”+“體現(xiàn)功能豐富程度”，將亮點(diǎn)功能集成到手機(jī)容器，使之更聚焦。同時支持內(nèi)部交互跳轉(zhuǎn)，給互動場景下的客戶經(jīng)理提供豐富的講解素材，讓業(yè)主知道：原來購買被窩家裝可以享受這么多有品質(zhì)的服務(wù)。

三、建立輕盈、舒適的視覺體系

1. 內(nèi)容升維：高效的信息呈現(xiàn)

馮·雷斯托夫效應(yīng)告訴我們，某個元素越是表現(xiàn)的特別，就越容易搶奪人們的注意力和記憶。

舊的工作臺首頁將功能都收到工具箱，但這樣會削弱功能的靈活度和層次感，無法快速識別?；谇捌谑崂恚诿鞔_新版工作臺的核心價值定位后，根據(jù)服務(wù)者的使用頻率對功能模塊進(jìn)行合理的排序、整合，同時通過不同的表現(xiàn)方式（從顏色、大小、版式元素）對內(nèi)容進(jìn)行差異化表達(dá)，提升服務(wù)者信息獲取效率，讓服務(wù)者更快速的定位功能并使用。

圖10 工作臺首頁

客戶服務(wù)頁作為個性化服務(wù)客戶的主要承接頁面，需要向客戶兜售自己的方案。大多數(shù)服務(wù)者在線下會先講解自家的戶型，有哪些改造可能以及喜歡的裝修風(fēng)格等等，不斷的明確客戶需求，最終贏取客戶信任。

為降低服務(wù)者的認(rèn)知理解成本，根據(jù)服務(wù)者的實(shí)際講解動線和瀏覽習(xí)慣，制定從左到右的瀏覽動線，左側(cè)放置個人相關(guān)信息，右側(cè)放置個性化服務(wù)信息。左側(cè)卡片通過顏色進(jìn)行差異化處理，快速定位信息，右側(cè)設(shè)計方案卡片通過大圖模式，吸引客戶注意力，喚起客戶對裝修效果的興趣。同時為減少頁面信息對服務(wù)者講解過程產(chǎn)生過多打擾，對信息進(jìn)行降噪處理。

圖11 客戶服務(wù)首頁引導(dǎo)動線

2. 感官喚醒：沉浸的觀看體驗

套餐講解是銷售過程中非常重要的一個環(huán)節(jié)，也是被窩家裝的與其他平臺的能力差異化體現(xiàn)。為了更好展示我們的套餐能力，結(jié)合Pad優(yōu)勢采用大圖模式，通過視覺上帶來的沖擊力快速激發(fā)客戶的想象力，能夠很好的將自家場景產(chǎn)生聯(lián)想共鳴，給客戶留下深刻印象。在細(xì)節(jié)處理上，采用了非常具有呼吸感的毛玻璃手法來體現(xiàn)界面的空間感，創(chuàng)建視覺層次結(jié)構(gòu)。

圖12 套餐案例沉浸感打造

除了套餐介紹頁面，也將這樣的設(shè)計理念融入進(jìn)了案例圖集、房間切換等場景。

圖13 房間切換等相關(guān)頁面

3. 語言升級：輕盈的視覺體驗

在體驗店，相對于手機(jī)而言，Pad的攜帶是有一定重量的，客戶經(jīng)理的日常工作是繁雜的?；谠O(shè)備和服務(wù)者工作屬性的考量，我們希望從視覺上的輕量帶來身心的減負(fù)，故將本次升級以”輕盈感”為基調(diào)，構(gòu)建起一個清新舒適、簡潔大方、親和有力的使用體驗。

圖14 設(shè)計基調(diào)

四、關(guān)于色彩

顏色是體現(xiàn)產(chǎn)品氣質(zhì)的關(guān)鍵因素，我們希望通過新的配色為家裝Pad帶來清新舒適的視覺感受和認(rèn)知?，F(xiàn)有Pad以主色黃色為主，缺少輔助色的使用。主黃色在Pad端反復(fù)出現(xiàn)這就導(dǎo)致出現(xiàn)視覺疲勞、信息不易識別、服務(wù)者身份低幼感的問題 。

為保持被窩家裝的基礎(chǔ)調(diào)性，銜接客戶對被窩已有認(rèn)知，主色沿用被窩品牌色黃色。在此基礎(chǔ)加入了低飽和度、輕快明亮的輔助色，緩解客戶的視覺疲勞，安撫服務(wù)者工作中帶來的不安情緒。

圖15 關(guān)于色彩

五、關(guān)于文字

在與客戶面對面洽談講解過程中，如何通過文字讓內(nèi)容展示更具有易讀性是我們思考的問題。

文字信息是客戶獲取內(nèi)容信息的重要來源之一，好的文字呈現(xiàn)效果帶來舒適的閱讀體驗。不同的屏幕大小、分辨率、色彩傾向、視距等，對字號、行距、字色對比度等參數(shù)均有不同程度的影響。比如，握在手中的手機(jī)，觀看屏幕的舒適距離大約30cm，保證舒適觀看的情況下正文字號設(shè)置為16pt。而實(shí)際作業(yè)場景中服務(wù)者和客戶觀看屏幕的距離大約40-60cm。

圖16 設(shè)備、視距與文字的關(guān)系

通過相關(guān)理論支持，結(jié)合真實(shí)的可用性測試定義了文字的使用規(guī)范。同時通過字號、字重和字色的差異，明確信息層級，讓客戶閱讀時更易讀。

圖17 文字規(guī)范的制定

六、關(guān)于容器

圓角，代表友好、親和，具有更強(qiáng)的內(nèi)指向性。我們對于圓角的取值上也做了足夠的思考：結(jié)合家裝B端特性，卡片內(nèi)需承載的內(nèi)容信息眾多，圓角太大會影響邊角信息的呈現(xiàn)，所以我們在圓角選取上將圓角數(shù)值整體縮小，采用了可根據(jù)場景精細(xì)程度選擇合適數(shù)值的圓角(4-6-8px)，使卡片容器信息展示更聚焦。

圖18 卡片容器

七、結(jié)語

項目的成功落地，離不開前期大家一起深入一線的多次調(diào)研，和后期確定目標(biāo)后敏捷的方案驗證。

上線后，Pad使用率有了大幅提升，客戶經(jīng)理和客戶給予了很多正面評價，我們也得到了一些改進(jìn)建議，這讓我們深受鼓舞。但受Pad總持有數(shù)量及固有作業(yè)習(xí)慣的限制，整體使用率仍偏低，有較大的進(jìn)步空間。相信通過我們持續(xù)不斷地努力，會為服務(wù)行業(yè)的銷售體驗帶來一些改變。

設(shè)計并不會一勞永逸，永遠(yuǎn)要用發(fā)展的眼光去看問題。接下來我們將持續(xù)研究、推進(jìn)Pad端獨(dú)特設(shè)計模式方法的沉淀，敬請期待。

作者：?KEDC，高級設(shè)計師；公眾號：貝殼KEDC

本文由@ 貝殼KEDC?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議