B端產品設計實錄——途牛商旅全案塑造

21天前發布

原創文章 / 多領域 / 觀點
途牛UED 原創,如需商業用途或轉載請與途牛UED聯系,謝謝配合。

B端市場的春天,設計層該有哪些轉變,本篇用實戰一一為你闡述。

近來,各大公司業務從C端到B端的轉型頗有些“農村包圍城市”的戰術:一來C端產品市場日趨飽和,而B端市場的開發仍是冰山一角;二來用戶早已被各類C端產品調教得非常成熟,無需花大把經歷來培養用戶習慣。簡而言之,To C(Customer)還是To B(Business)都是To P(People),P端行為被養成了,B端的到來則水到渠成。


本篇以途牛商旅(專為企業打造的差旅APP)為例,分享由C到B設計層的轉變。



?思維模式?


·流量思維:黑話“舔式”設計,即引導用戶像玩吃雞游戲一樣舔遍每個角落,C端產品最常見思維模式。


·效率思維:很好理解,用戶目標明確,設計盡量做到不干擾不打擾。

舉例1:途牛主APP登錄VS途牛商旅登錄

在B端,個人賬號往往是企業授予,登錄途徑單一化。所以我們可以巧用界面留白位置來保持鍵盤始終喚起狀態——減少步驟,一頁只做一件事。

終極理想效果:識別手機號一鍵登錄,因運營商限制暫未覆蓋。


舉例2:商旅首頁原型設計

我們一共出了3版原型大方向,方案1:中規中矩的主次層級布局;方案2:類Material Design,塊狀錯落布局;方案3:功能二級入口直接外露Tab形式布局。


當時從設計角度我們最推崇的是方案B:最大程度的保留了設計感;而方案C看上去操作路徑最短也是個不錯的選擇。

這時,我們用思維模式來印證,答案顯而易見:設計目的是為了用戶更高效完成操作,不是為了炫技,更不是想當然的操作。方案A的平白直敘最終當選。



設計思維模式的變化離不開業務的核心的變化:

ToC的盈利來源有很多種:商品售賣、情景化營銷、廣告位、資源置換等,所以在頁面布局上多采用一專多能式(一個主要內容,多個關聯入口)。ToB產品本身往往就就是一種商品:企業付費購買產品從而達到讓工作效率提高、管理便捷、業務提升等目的;如釘釘、OA、數據云,所以設計目標是如何讓用戶以最短路徑走完此流程。




?用戶分析方法?


ToC產品通常面對的是特定的一類人群,進行分析此類人群的年齡、興趣愛好等人文維度的分析。

ToB產品的用戶分析與其說是對個人分析,不如說是對企業的分析,如企業所屬行業、企業層級架構、管理層訴求、終端層訴求等。


我們可以較容易的獲取C端用戶畫像,因為我們自身或者所熟悉的人都在扮演著C端的角色,也就意味著設計過程中也很容易進行角色代入。而B端用戶畫像的獲取往往艱難得多,最快捷的方式就是和公司的業務層交流,業務部門是最直接與客戶打交道的,他們熟知大量的典型客戶案例,可以幫助我們快速高效的描繪出用戶畫像。

由于我們自身與B端用戶的相剝離性,用戶畫像的作用顯得尤為關鍵,可以時刻提醒我們是在為誰做設計,每一個關鍵訴求都在產品設計中有對應的抓手


下文,我們將從品牌感、降噪設計、輕擬物、縮短體驗路徑和人性化設計分別闡述設計抓手下的解決方案。




?品牌感?


·顏色

作為獨立子B2B子品牌,我們賦予了他商務藍作為主色調,輔助色靈感的來源于路牌,在路上一眼望去非常醒目而不突兀。同樣,綠色也是途牛色,與品牌背書耦合。



·logo

延續途牛logo外形,在保留識別度的基礎上使用圓切使其更精準簡練;將飛機飛行軌跡與牛臉弧度進行融合,最終經過多方投票選用了更有張力的剪影飛機造型。

undefined



?縮短體驗路徑?


前面說過B端產品的成型是多維的,決策層與管理層都會對終端層的操作產生直接影響。

我們來看看用戶使用最高頻次的預訂流程和查看行程:

預訂會被“申請單”、“差旅標準”等中斷;而“查看行程”的操作路徑又極為繁瑣。


優化后①我們對用戶有無公務出行做了預判斷:在有公務出行時,優先彈出申請單,申請單自動帶出符合要求的商品列表(機票、酒店等),用戶篩選后可以一鍵下單;無公務出行時正常瀏覽篩選下單。

②將“訂單詳情”及“差旅事項”整合成“行程”一欄,填補了用戶下單后出行前的空白,也為APP增加了粘性。


·交互流程

在交互流程設計上,我們也是花心思的:日期選擇,彈層而不是全屏,利用背板的伸縮不間斷頁面操作,沉浸式完成所有步驟




?降噪設計?


冗雜的表單頁離不開降噪設計,和縮短路徑相輔相成達到1+1>2的絲滑體驗。


·輕擬物

降噪不意味著只是減法,部分組件擬物化也是不錯的idea:貼近生活場景的設計可以舒緩程序化頁面的壓迫感,擬物元素與表單的穿插交互更能帶來層層推進的愉悅體驗。


同樣采用擬物手法的還有審批單,無紙登機,授權列表:

值得注意的一點是擬物的用法在界面設計中太多反而喧賓奪主,恰到好處的同構或替換是點睛之筆。



?人性化設計?


·容錯設計

錯誤消息會帶給用戶很多壓力,讓用戶感覺他們搞砸了或者沒有完成任務。核心邏輯一般是必須要全部成功的,但是有些非核心邏輯,失敗了也并不打緊,或者成功一部分即可;這個時候要把這些非核心邏輯和核心邏輯之間進行隔離;


原理來源于船舶隔板設計,一個隔板內漏水不至于整條船沉沒。



·錯誤補償

原理同樣來源于隔板設計,對于錯誤的步驟有合理的引導,使其回歸正確。



·情感轉移

當錯誤無法挽回,還可以通過視覺對錯誤的場景進行情感層的轉移



·智能化設計


按理說從「隔板設計」→「錯誤補償」→「情感慰藉」這套連環招數我們已經讓用戶體驗暢通無阻(安排得明明白白)。但我們并不滿足于用戶的主動寵幸,開始主動出擊發掘用戶需求,以下這款途牛智能化機器人——途牛小智開始(被迫)營業。


通過大數據和歷史記錄對用戶行為進行預判斷,精準推送出用戶潛在需求,并對差旅進行日程管理。



?最后?


最后國際慣例上一波設計圖吧



B端設計師在設計過程中常常感到不甘與委屈:各種炫技手法均無用武之地,長期打交道的都是無盡的表單……

記得《后會無期》有一句話:“喜歡是放肆,而愛是克制”。

保持熱愛設計的初心,克制而有招數的表達——我相信塵埃里也能開出花兒來:)



1002
- 10位推薦設計師推薦 -
    沒有新消息



    后一四码10年无挂