阿里實戰案例解析:設計思維的“破”與“立”

1 評論 4519 瀏覽 34 收藏 15 分鐘

在互聯網公司中,設計師搞事伙伴主要有產品經理、運營、技術,常規合作流程為產品、運營輸入需求,設計師以自身的美感品位創意才華巧技……輸出設計方案,如果方案有一些撩撥用戶的特效和細節,可能還得端上星巴克求技術哥哥幫忙實現。在這種習以為常的合作流程中,我們既難以決定需求的有無,也缺乏驅動下游技術的抓手,角色較被動。本文以挑貨的改版,談設計思維破局及特色價值建立的一次過程。

一、業務概況

在1688業務大盤中,老挑貨是長圖文為主的市場,買家通過看平臺精選的長圖文內容找貨。隨著業務的蓬勃,挑貨變為基于買賣家關系的導購市場,買家通過看與其有關系的商家上新、活動、直播、爆款等動態來找貨。

由于挑貨業務定位和欄目內容較老版都發生了變化,故設計上對不同類型內容做差異化處理,讓買家認知到各類型的商家動態都在挑貨。

新挑貨上線后,UV 較之前翻倍,多項關鍵業務指標也都超出預期。這為商家主動在挑貨發內容提供了動力,也吸引了平臺橫向業務積極與挑貨合作。

二、破的意識

如果設計師把角色定位為完成上游產品、運營需求的資源,那么在新挑貨表現尚可的情況下,接下來要做的需求可以預見:基于現有卡片,改造一份增加商家文案后的卡片;根據橫向業務輸入的需求,基于已有的卡片樣式,繼續新增卡片類型。

踮起腳看,如果這會兒設計師選擇被動等上游提需求,不主動做點不同,挑貨將迎來三層「泥潭式」的重。

1. 第一重,用戶將負擔不必要的閱讀成本

目前卡片已有5種類型,卡片加入商家文案后,信息層級將更臃腫,卡片類型預計到10種。橫向業務不定期的需求輸入,卡片類型還將持續增加。而看線上數據,用戶基于內容類型做篩選的點擊占比極低,反映出內容卡片做的差異化表達,為用戶帶來的價值并不大,反而增加了閱讀負擔。

2. 第二重,內部協作流程長,資源投入大

橫向業務輸入需求到挑貨的產品和運營,產品經理和運營要和橫向業務磨,類似于商家「鎮店之寶」、「私密商品」、「優惠券」等內容是否要在挑貨做。上游業務磨清楚后,召集橫向業務的產品經理、運營、挑貨的設計、技術開需求評審會,設計排期出方案,之后設計評審再技術排期,開發完成后上線——而這個流程,還只是新增一種內容卡片。

3. 第三重,技術基于業務邏輯開發,卡片類型越多,性能越難保障

挑貨2.0改版時,技術對五種卡片單獨進行開發,后續每新增一種卡片類型,都需投資源新開發。且卡片類型越多,頁面加載速度越慢。挑貨幀率一度在46徘徊,用戶瀏覽挑貨時,已經感受到明顯的卡頓,若繼續新增卡片類型,挑貨可能會卡得讓用戶不愛這個老關系市場。

注:幀率為幀的位圖圖像連續出現在顯示器上的頻率(速率),指一秒內的刷新頻率,在線上場景中,60是較完美狀態,低于50用戶將感受到卡頓。

局面將很「泥潭」,設計師如何來破?

設計師開始給自己加戲,為需求方代言,給自己提需求了。

4. 盤點卡片內容層級

由于內容類型做了差異化表達,不同內容卡片上,相同信息層級也分出多個樣式,且業務即將新增商家文案及優惠券,這將使卡片多出更多信息層級及樣式。

卡片內容如圖所示:

5. 重理信息框架

盤點卡片信息層級及優先級,以內容來源+內容描述+內容來收口。

盤點信息后,基于內容來源+內容描述+內容的邏輯做信息的刪減融合。

  • 內容來源區:在商家信息基礎上+內容發布時間+買賣家關系描述字段;
  • 內容描述區:將活動描述和商家文案融合,簡化活動類型及時間描述,使之適配于所有內容卡片;
  • 內容區:內容區圖片展示從4種收口為2種。

6. 基于視覺框架組裝卡片的設計

將收口后的信息層級抽象為視覺框架,并列出框架內的具體內容?;诖丝蚣苓M行開發,可靈活組裝出各類型動態,而非之前以單張卡片為單位進行設計及開發。同時,這種基于框架組裝生成卡片的方式,也為承接未來的業務需求留足了擴展性。

  • 「需求盡管來,都可以用新的信息框架組裝?!?/li>
  • 「假設有組不出來的特殊需求呢?」
  • 「…新增框架」

以上只是設計師給自己加的戲,還得游說上下游的搞事伙伴,把戲落實進用戶的屏幕。

先搞定上游,和產品經理及運營重點講「三重泥潭」的第一重和第二重,同時把以上思考及方案作推銷,產品經理及運營聽完很認同,收下方案。

再搞定下游(當然也可以等產品經理和運營去向技術提需求,但我沒這樣做),和技術哥哥們聊,重點講了三重泥潭的第一重和第三重,同時把以上思考及方案作推銷,技術哥哥聽完很感動,因為主管給他的核心業務指標是,把挑貨徘徊在45的幀率提上去,新的框架設計思路,利于提高挑貨的性能。

技術基于新的信息框架進行開發,靈活組裝成多款內容卡片,產品經理和運營也可以基于這種輕量級卡片,靈活地和橫向業務合作。當然,最大的價值是為用戶帶來了更簡潔流暢的內容呈現。

三、如何立?

破的事情做了。從設計師的角色里踮起腳預見問題,主動給出解決方案并推動落地了,但設計師的特色價值又立在哪里呢?比如手機淘寶的「微淘」,也是用戶關注店鋪,集中看內容的場景,如何立出1688挑貨和微淘的區別呢?

1688和淘寶的區別是 B 和 C 的區別,具體 BC間的差異,各位可移步《從買家差異看B類&C類電商體驗設計創新》,本文僅拎出1688的挑貨與手機淘寶的微淘間細節點的不一樣(并不拎出微淘和挑貨間有什么不一樣)。

設計思維要立挑貨區別于微淘的B類特色了!

1. 以日歷立「商機盡在掌握」的B類特色

C類買家逛微淘主要找個人感興趣的,而逛挑貨的「買家」很可能是商人,他們是要從挑貨中,挑出好貨批發回去做生意賺錢。對來挑貨的B類買家而言,挑貨是基于老關系找商機、鎖定商機的重要陣地。此外,挑貨里的店鋪活動、伙拼、直播等動態有時間范圍,也支持買家通過「設置提醒」鎖定商機。

所以在欄目的頭部設計上,選擇了日歷的形式,承載每日上新和買家「設置提醒」鎖定好的商機,內容篩選及內容卡片的「設置提醒」也都以日歷icon 聯動表達,營造挑貨欄目「我的商機盡在掌握」的場景特色。

2. 基于B類特點的商家名稱備注功能

做 B類買家線下調研時,我們發現買家逛1688,很難通過商家名定位和識別「這是哪位供應商」,什么原因呢?

不同于淘寶短且易記的店鋪名,1688的商家/公司名常有一二十個字,買家很難記??!看了也很難認出這是哪家供應商來著?

此外,買家想采購時,有時候也會習慣加微信或直接電話聯系商家。挑貨作為1688基于關系的市場,讓買家準確定位出動態來自于哪個商家,太重要了。所以我們希望支持 B類買家備注商家名稱、電話、權益說明等內容,讓買家通過備注商家信息及關系描述字段準確識別并定位商家,讓買家對挑貨這一老關系場有更強的感知。

3. 私密商品增強表達

通常來說,C類用戶在淘寶上買了好東西,會想分享給自己的親朋好友。而B類買家在1688發現了好東西,是要批發回去賺錢的,巴不得除了他就沒更多人知道,所以 B類市場,有做私密的空間。在挑貨這種基于老關系的市場,商家愿意為頭部買家透露私密商品,為了讓買家不辜負商家對他敞開的私密,我們對挑貨「私密商品」進行了增強表達,加入撩撥用戶的特效和細節。

4. 改版結果

通過「破」和「立」的這一系列動作,助力增強了挑貨這一基于關系的市場在買家端的心智感知;技術基于新的信息框架開發,挑貨的幀率從之前的45.69提升至54.36,用戶瀏覽不再感覺到技術原因的卡頓;引導進店UV及引導進店率等關鍵業務指標也有一定提升。

結語

以上就是挑貨改版過程中,個人設計思維「破」和「立」的運用,希望對大家有益處。最后想起一位哲人曾說的 「世上沒有白走的路,每一步都算數」,想分享自己初入職時遇到過兩個小事:

運營提需求,要在一個并不貼合用戶預期的場景里「加個吸人眼球的banner」,當時求助主管,他莞爾一笑「這里流量大,運營只是想有做運營的空間,不一定是 banner,有很多開鑿運營空間的方式啊?!刮阴囗?,輸出了更利于做運營的其他方案,運營同學看到方案后驚嘆「你你你,你太懂用戶了,設計得真好!」

另一次評審,技術挑戰設計的某處細節,評審后我沮喪我懊惱,主管又莞爾一笑,「設計可以的,不用太在意他說的,他不是覺得這里設計得不好,而是因為開發起來成本比較大」。

寫這篇總結前,并沒有認為這兩個事對自己有什么影響,寫到這里才忽然意識到,也許第一個事情告訴我,設計思維可以破局,第二個事情告訴我,設計思維可以立穩價值。感謝各位閱讀,希望讀本文不是「白走的路」,未來能「算數」。

 

作者:阿里巴巴_B2B_UED,公眾號:阿里巴巴UED

來源:https://www.zcool.com.cn/article/ZNzk2MTk2.html

題圖來自網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!