Home 設計 電商工作後台首頁的商業價值...

電商工作後台首頁的商業價值重構與產品化設計


專為互聯網人打造的365天成長計劃,500門視頻課程隨便看,構建你的產品、運營知識體系。 查看詳情

文章以買賣家工作台首頁設計為例,來介紹下電商網站後台首頁的整體設計思路。

電商網站一般分為前台導購及後台管理兩方面,通常由買家及賣家兩種角色組成。大部分的工作是在後台完成,涉及到各類管理系統,保障日常工作順利運行。

後台產品設計因其邏輯複雜、業務繁多、專業性強具有較大挑戰性,在很多情況下設計師的發揮受到較大限制。尤其是B類後台產品的設計需要對公司業務擁有更全方位的認識,加大了其設計難度。做為設計師如何重新定義後台商業價值?如何進行產品化設計思考?下面以買賣家工作台首頁設計為例,來介紹下整體設計思路。

買賣家工作台是什麼?

買賣家工作台是基於1688大數據為企業提供生意決策、日常工作管理的中小企業操作管理後台。

設計之前:思考在最前方,與業務一起確定產品方向

轉變思維方式:由被動接受到主動提案

做為體驗設計師需要對整個產品負責,在產品改造前期提前與PD對焦思路,全鏈路思考主動提出對產品的整體想法,而非到某項交互功能再介入,或者是某個頁面視覺表現再進行。對焦的過程中也發現項目的諸多難點:涉及B2B所有業務,風險大,影響範圍廣。為保證產品方向的準確性需要與業務方進行多次溝通討論及產品匯報。產品方向確定基本流程: 思路對焦——方案討論——方案設計——產品匯報——確定方向。

商業價值重構三步走:

一、了解定位,轉換視角

1、了解產品整體定位: 在進行商業價值重構前充分了解產品定位。以工作台為例,今年1688針對B2B市場提出了人、貨、場的戰略。人:幫助引流,貨:提升品質,場:提升能力,做為1688用戶的核心工作場景-工作台成為重要場景之一,需要結合新戰略進行全新升級,加強人在後台場中的匹配效率。

2、從業務視角轉變為用戶視角:在設計對焦過程發現,現有版本融入了較多內部運營工作邏輯,體現各個部門的利益及立場。比如網站多了一塊新業務需要向用戶推廣,就會在後台中增加一個介紹版塊讓用戶區體驗,缺少用戶去體驗功能的場景及動機。偏向一個流量分發為中心的核心陣地。業務視角展現在用戶層面比較難理解。做為B類用戶更多的是從做生意的角度來使用後台,需要做一層轉化才能到達認知,一定程度上影響了用戶的使用效率。因此需要翻譯成用戶能理解的產品表達。

二、統一戰線,建立目標

與產品、運營統一戰線,建立目標。將一個流量分發為中心的核心陣地打造成以用戶服務為中心的產品。

三、明確關係,構建大圖

明確商業價值的構成者,做為平台一共有三方:平台方、買方及賣方。完整的商業價值構建需要聯動三方一起共進。工作台以阿里大數據為中心,網站平台小二通過行業市場來服務我們的買家,同時通過商家培育體係來服務我們的賣家幫助商家成長,商家通過自我成長提升自身運營能力來服務好買家,構建出穩固的鐵三角服務生態大圖。通過建立價值生態場景,幫助業務打通上下游市場,讓小二更好的服務買家,促使商家自運營。

明確商業價值後,進行產品化設計

一、挖掘用戶使痛點

1、定性:採用敏捷式共建用研,在有限制時間內,獲得豐富有效信息

首先談下用研方式,傳統的用研從制定訪談計劃、問卷設計、用戶邀約、執行調研、分析數據到撰寫報告,整個過程基本由用研同學獨立完成,在項目時間比較緊張的情況下會受到限制。因此我們採用了敏捷式共建用研,在臨時機動的情況下獲取用戶痛點的方式,有幾個小tips可供參考:

A、項目組共建用研:打破流程限制,在與用研同學確定好調研提綱後,發動項目組的成員運營、開發、測試等共同參與調研;B、靈活邀約客戶:借助園區商家活動、會議等在中間抽取時間機動調研,在中午休息時間就訪談了近15位客戶;
C、訪談結果及時產出:後項目組成員當即進行調研總結及改進建議,大大提高了訪談的輸出效率,也提高了項目成員的對於用戶的整體感知。用戶調研不在於形式,在於是否通過有效方式得到想要的信息.優勢:用戶量大,意願大,調研成本低風險:目標用戶不穩定、用戶經營狀態感知偏弱。

定性調研發現:

買家:主要工作行為是採購管理和銷售管理,小買家不會進行進銷存管理,進銷存管理工具不能同步1688信息,查看物流不方便、不能看到銷售數據情況,交易過的公司公司使用量低等情況。

賣家:主要使用群體為公司操作員基本每天都會進入後台操作,主要操作行為查看店鋪數據、進行交易訂單管理、商品管理、店舖管理、營銷活動管理。核心關注曝光、訪客及轉化情況。調研中發現用戶在後台操作的目標感模糊,例如用戶反饋:剛開了店鋪,後面要怎麼弄,完全沒方向!別人都是怎麼做的,沒有引導性;購買誠信通僅為了標識,無線上行為不知道要怎麼做?沒有把線下用戶拉到線上等問題。

2、定量:通過數據分析發現用戶使用都比較集中,部分模塊使用率較低,有效信息少;長尾效應明顯,交易鏈路為買賣家高頻行為,抓手欠缺。

二、確定設計目標及策略

基於用戶的行為差異及訴求差異,制定不同的設計目標及策略。工作台結合買賣家做了版本區分,分為買家版及賣家版買家版設計目標:讓買家擁有精細化的採銷服務,提高進貨效率

設計策略:

  1. 精簡化:信息架構場景化,內容模塊調整;
  2. 數據化、個性化:通過用戶行為數據、關係數據提供個性化服務,接入第三方服務滿足買家下游需求;
  3. 互動性:平台與買家、買家與賣家間的互動,進行服務觸達,關係顯性化,從而促進商業價值最大化。

賣家版設計目標:幫助商家更好的自我成長,提高自運營能力

設計策略:

  1. 精簡化:信息架構場景化,快捷入口調整;
  2. 數據化自運營:分類管理,結合用研中了解的用戶核心場景:管交易、管店、管貨、管客及管活動進行模塊分類;
  3. 賣家生命週期管理:建立用戶成長激勵體系,通過用戶進階分層明確成長目標,促使用戶成長。策略圖:

三、交互階段信息架構細化設計,建立模塊產品化交互設計Guideline

信息架構核心抓手有三:

  1. 導航分類場景化:以賣家版為例,在導航區域核心體現賣家四大工作場景:管交易、管店、管貨、管客及管活動。
  2. 內容場景數據導向化:中間內容區域以總體成長情況和場景數據情況進行導向性設計,提供數據分析及行動操作。明確用戶核心關注內容及操作。

3.模塊設計產品化:建立模塊交互設計Guideline 為保障後續新增模塊價值傳遞的統一性,建立模塊產品化交互設計Guideline。對所有模塊進行了功能分類,主要分為兩種: 1、任務服務模塊: 任務服務模塊設計需要明確:模塊是什麼? (業務視角轉為用戶視角)目標&現狀,怎麼做及可獲得什麼服務。 2、消息模塊:傳遞服務是什麼?怎麼做?

舉例:客戶管理模塊

  1. 模塊是什麼? :店鋪客戶管理
  2. 目標&現狀:店舖的訪客、潛在客戶、成交客戶及流失客戶情況
  3. 怎麼做? :進行客戶召回
  4. 可獲得什麼? :客戶數量增加,客戶管理類工具

交互設計微創新:功能地圖設計

工作台中的功能入口眾多,為方便用戶查找及使用,對功能地圖進行優化。統一工作場景分類認知與導航分類保持一致,減少界面中分類層級,用戶點擊功能地圖後可進行自定菜單設置,將自己常用的入口釘到左側菜單中。
優化前:


優化後:

四、視覺設計無邊界,尋找核心發力點

通常一個產品進入視覺設計就開始YY各種品牌元素及表現感知方面的設計,而作為後台產品因其偏重操作,在視覺設計前,需要宏觀的進行再思考,用戶通過感知可以帶來什麼價值?在工作台視覺設計前進行了進行感知升級思考,建立感知升級閉環貫穿在整個視覺設計環節,閉環全圖:

視覺設計核心發力點提取: 在對整體閉環有一定認知後,進行感知定位通過與項目組成員共建提取工作台感知雲標籤,提取感知關鍵詞:簡單、清晰及高效。在視覺層面主要通過風格定義、特色模塊設計及情感化設計來發力。

1、風格定義:對B2B供應鏈管理類後台從顏色、圖標、控件、模塊等方面進行視覺層面競品分析,同時了解時下主流產品設計趨勢如微軟、facebook,IOS11最新視覺風格。發現以下特點:

  • 形:去裝飾,以內容為中心,去掉了多餘的裝飾元素
  • 色:少顏色,通過大小對比來突出主體,減少顏色
  • 質:扁平化設計,微漸變
  • 構:減線條,弱化線條分割,通過留白來區分空間,輕劃分:巧用投影做區塊劃分綜合以上分析進行風格定義設計買家版:

賣家版:

風格細節:

導航優化:為保障用戶認知的統一性,沿用了老版本中買家橙色,賣家藍色的顏色特徵。導航設計中縮減了顏色在導航中的比重,通過版本字體來區分。簡化老版本中當前狀態的框選樣式,通過TAB短線來表示當前狀態。

內容再設計:老版本中代辦模塊信息內容密集識別困難,操作性較低,通過信息名片卡片式設計待辦歸類整理,突出核心內容

化繁為簡:現有頁面中模塊很多用線條來區分,信息量比較多的情況下,頁面相對複雜,因此弱化線條分割,通過留白來區分空間


圖標設計:對後台產品中的圖標進行了功能分類:說明性圖標、權益性圖標。後台圖標設計需要控制其表現力度,因此在設計上通過局部細節點綴來表現。權益類圖標與前台門洞類做區分,減少顏色運用,結合買賣身份做橙、藍底色區分,使用簡易面狀的形式來凸顯特徵。

2、特色模塊設計,以成長模塊為例

模塊設計背景:根據商家在平台的七項能力,統一分層體系,促進商家自運營,從而為買家提供優質貨源和採購體驗設計方向:為幫助商家在平台更好的成長,全鏈路思考用戶成長環節。在工作台中的透傳中,使用商務跑的方式來激勵用戶,並給予成長引導基於模塊設計Guideline明確:

  1. 模塊是什麼? :我的成長
  2. 目標&現狀:成長能力得分
  3. 怎麼做? :成長任務
  4. 可獲得什麼? :成長權益

對模塊進行劃分:

成長感知定位,主要通過兩方面,提取物像特徵,提取表現形式


通過商務人物奔跑的形式來表現成長進度,為便於用戶進行成長任務連貫操作設計全鏈路成長插件,提高成長效率。

3、情感化設計:

身份卡片設計:

使用2.5D元素來增加用戶新手操作的實體感受:

五、後台動效,讓工作台體驗更流暢

在項目過程中非常感謝成龍、梅鬱在設計思路及方法上的引導,感謝團隊中顧佳、蘇林給力的設計支持。

產品化設計任重道遠,是一個不斷優化迭代的過程,還需要聯合各方力量一起合力,共同改進。在新形勢下,設計師已不在是接需求的資源方,而是產品共同的締造者。需要利用一切能夠改善產品的方式,用我們的全部智慧和能力,為我們的用戶服務。

作者:金莉

來源: 阿里巴巴U一點

題圖來自PEXELS,基於CC0協議



文章來源