噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

0 評論 9750 瀏覽 43 收藏 11 分鐘

智慧營銷是一款面向B端企業(yè)用戶,為其提供線索數(shù)據(jù)獲取、CRM客戶管理以及增值服務能力的SaaS產(chǎn)品。本文對這款產(chǎn)品進行了深度的思考與體驗優(yōu)化,一起來看一下吧。

智慧營銷是一款面向B端企業(yè)用戶,為其提供線索數(shù)據(jù)獲取、CRM客戶管理以及增值服務能力的SaaS產(chǎn)品。為了在競爭激烈的B端市場占有一席之位,我們在設計上對產(chǎn)品進行了深度思考與體驗優(yōu)化。本文主要帶來在這一過程中我們的設計思考過程,出于對產(chǎn)品隱私的考慮,相關數(shù)據(jù)已經(jīng)進行了脫敏處理。

01 設計前期工作

1. 新名詞SCRM

智慧營銷屬于SCRM系統(tǒng)功能,與傳統(tǒng)的CRM的共同點:雖然都是客戶關系管理,注重提升企業(yè)工作效率、科學地進行銷售管理、高效地進行客戶關系管理與客戶跟進。

最主要區(qū)別在于:是否打通了社交工具,整合了社交網(wǎng)絡;如果打通了社交網(wǎng)絡與社交工具,并注重這方面功能的延伸與拓展,則為SCRM。

關鍵詞一:社交。既然整合了社交,突出人、組織的的可視化展示則是設計的第一個抓手。

2. 掌握核心流程

主要核心流程:市場獲客 – 線索分配 – 客戶跟進 – 商機管理 – 商務過程 – 售后管理。

了解主要核心流程后,確定了本次改版的提效目標:圍繞線索分配(篩選列表的交互優(yōu)化)、客戶跟進(信息字段的可視化展示)、商機管理(詳情內(nèi)容的承載)進行。

3. 當前問題分析

分析產(chǎn)品現(xiàn)有問題的分析和整理,總結(jié)起來大概如下:

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

確定了升級方向,便可以從視覺風格與提高效率這兩個點對關鍵頁面進行改造升級。

02 視覺品牌語言

在設計語?上我們沿襲了中臺設計品牌“視界”的設計理念,將設計系統(tǒng)的UI組件庫、插畫組件庫、數(shù)據(jù)可視化組件等進行了結(jié)合,不但視覺風格上沿襲了品牌屬性,也一定程度上提高了開發(fā)的生產(chǎn)效率。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

1. 視界設計價值觀

輕科技、未來感、空間感:品牌語言主張以簡潔、立體和科技,可被信任方式來表達產(chǎn)品的核心理念和特點。通過空間、陰影、視差,景深提升信息呈現(xiàn)的邏輯和理性,層次感和秩序感。

2. 提升設計品質(zhì)

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

大面積跳躍的視覺元素在B端系統(tǒng)上使用很少,設計能夠施展拳腳的頁面大概在于:首頁宣傳、登陸頁品牌傳達、圖標元素、空狀態(tài)、幫助引導、公告系統(tǒng)。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

深度思考:設計完一致的缺省圖就算設計完成了嗎?這里可以思考的更多。例如權限錯誤場景的引導:配圖+文案+按鈕/引導線索??梢杂脕斫鉀Q用戶面臨的緊迫問題,也可以用來引導新用戶開始產(chǎn)品體驗旅程。

3. 社交化基礎-頭像這么小的設計細節(jié)

這里的頭像可以是用戶圖像、也可以是公司頭像。相比傳統(tǒng)名稱,頭像視覺面積更大、顏色更豐富、比文字更吸引人的注意力。在界面設計中適當合理地使用頭像,可以提升情感化設計的水平,讓產(chǎn)品更親切,幫助產(chǎn)品目的達成。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

通常的用戶頭像基本上可以用三種形式來代表:空狀態(tài)、名字首字母、用戶圖片。但受到審核因素的制約,產(chǎn)品初期通常無法實現(xiàn)這個小功能。就需要視覺層面上去解決這個問題。使用名字首字母隨機顏色的方法,可以將用戶第一注意點轉(zhuǎn)移到人物的關鍵信息上,也可給整個頁面“加點顏色”。

03 聚焦效率提升

1. 工作臺-任務的集合

核心功能:統(tǒng)計數(shù)據(jù)、待辦任務、快捷入口、通知公告。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

將用戶需要待辦的事項、事項處理的進度等都完整的展示出來,方便用戶隨時查看,提升用戶的工作效率。設計原則上,以模塊進行劃分,總數(shù)量控制在 5-9 個。不同的角色需求不同,應提供基于角色的差異化視圖。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

2. 高效的篩選列表頁

篩選存在的對于整個SaaS系統(tǒng)來說是非常重要的,它可以幫助用戶在表單茫茫多的數(shù)據(jù)當中進行快速的定位,縮短用戶對于數(shù)據(jù)的尋找時間。

1)明確信息結(jié)構(gòu)

篩選列表頁面,總體可分為全局操作區(qū)-篩選區(qū)-列表操作區(qū)-表格區(qū)。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

2)篩選器類型分析

  • 按位置劃分:可分為側(cè)邊欄、水平欄、并列;
  • 按初始狀態(tài)劃分:可分為展開/折疊、平鋪/彈出;
  • 按執(zhí)行時間劃分:可分為實時更新、手動更新;
  • 按顯示結(jié)果劃分:可分為篩選進度、突出篩選結(jié)果、結(jié)果計數(shù)、空結(jié)果、在結(jié)果中過濾和搜索、結(jié)果清除/結(jié)果重置。

3)結(jié)構(gòu)層面分析

當篩選器過多的情況下(一般在 5-15 個之間),篩選器過多,需要滾屏才能看到篩選結(jié)果,用戶使用起來會很別扭。所以在數(shù)量較多的情況下,一般會將篩選項進行收折,這樣保證篩選整體面積不會太大,同時將用戶常用的篩選放在前面,可以滿足用戶基本的業(yè)務需求和使用場景。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

4)設計應用實踐

結(jié)合項目特點,在設計上首先使用的是平鋪型,其優(yōu)點是:將篩選項的結(jié)果全部或者部分放出,能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結(jié)果。

缺點是:占空間面積較大。需要做折疊收起處理。

執(zhí)行時間:去掉了原先需點擊查詢按鈕的步驟,改為實時更新信息的篩選交互會更加高效。

聯(lián)動交互的小細節(jié)。指的是控件之間發(fā)生互相關聯(lián)的變化,比如選擇了某個值后,其他篩選項隨之發(fā)生變化。例如通常情況下產(chǎn)品選擇的時間選擇器輸入框,便可以提取出快捷選項,今天、明天、一月內(nèi)等快捷選擇項,不滿足點擊其他再聯(lián)動出時間選擇器,既能保證頁面的視覺一致,也一定程度上提升效率。

表頭自定義欄:允許用戶根據(jù)自己的偏好選擇表單顯示內(nèi)容。當涉及多個指標和數(shù)據(jù)集時,該功能可以滿足不同的用戶目標 。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

3. 電話條的改版與設計

撥打電話也是用戶的常用操作,設計上去掉了原版超級多的按鈕選項,減少用戶視覺干擾。視覺強調(diào)和突出重要操作。

噓!SaaS產(chǎn)品的差異化設計細節(jié),一般人我不告訴他

04 寫在最后

以上我們僅僅針對智慧營銷的設計進行了簡單的設計經(jīng)驗分享。關于SaaS的體驗設計探索我們還只是剛邁出第一步,也將會持續(xù)去深入 SCRM與傳統(tǒng)系統(tǒng)的差異化。同時基于業(yè)務中臺化方向發(fā)展方向,設計側(cè)未來也將進一步去展開中臺化設計賦能之路,去賦能產(chǎn)品體系下更多場景的拓展和應用。

來源公眾號:58UXD(ID:i58UXD),58UXD,全稱58同城用戶體驗設計中心。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @58UXD 授權發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

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

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!