設(shè)計(jì)沉思錄:給商家一種全新的店鋪管理體驗(yàn)
文章為58商家通項(xiàng)目設(shè)計(jì)總結(jié),一起來(lái)學(xué)習(xí)下。
“58商家通”是基于58同城本地服務(wù)業(yè)務(wù)下商家日常經(jīng)營(yíng)管理的移動(dòng)端產(chǎn)品。隨著產(chǎn)品的迭代完善,由1.0版本中基于商機(jī)線索建立B與C之間的連接方式,轉(zhuǎn)向2.0版本商家主動(dòng)經(jīng)營(yíng)管理線上店鋪的概念。
“線上店鋪”是互聯(lián)網(wǎng)時(shí)代商家宣傳推廣、獲取客源、了解用戶(hù)需求、掌握行業(yè)資訊等經(jīng)營(yíng)活動(dòng)的重要集合場(chǎng)地。原有產(chǎn)品架構(gòu)以消息、電話、帖子等信息連接為主的維度展開(kāi),未涉及到“店鋪”這個(gè)集合場(chǎng)地的概念。
對(duì)此,我們對(duì)商業(yè)產(chǎn)品的主要業(yè)務(wù)邏輯進(jìn)行再梳理,充分了解商家的經(jīng)營(yíng)流程。決定將原App“我的”個(gè)人中心頁(yè)面調(diào)整為“店鋪”頁(yè)面。結(jié)合PM部門(mén)以提升核心功能的使用量的產(chǎn)品目標(biāo),歸納整理出需要設(shè)計(jì)完成的具體任務(wù):
- 有層次的處理功能優(yōu)先級(jí),加強(qiáng)核心功能操作引導(dǎo);
- 全新店鋪概念的傳遞;
- 產(chǎn)品拓展性,及不同身份商家所面臨的功能差異性。
需求拆解?
理清功能優(yōu)先級(jí),確定頁(yè)面結(jié)構(gòu)?
劃分功能關(guān)聯(lián)性及優(yōu)先級(jí),結(jié)合產(chǎn)品策略制定的服務(wù)重點(diǎn),梳理頁(yè)面結(jié)構(gòu)。
梳理功能層級(jí):我們打散了所有功能,按屬性及用戶(hù)的操作頻率進(jìn)行分組,分別是獲取客源的高頻操作、新用戶(hù)必要完成引導(dǎo)操作、日常維護(hù)管理的基礎(chǔ)操作。
完善頁(yè)面交互:內(nèi)容上保留了基本的店鋪信息,既可以促進(jìn)商家信息的完善,也能夠傳遞出它的統(tǒng)領(lǐng)頁(yè)面的地位。就像實(shí)體店面的招牌一樣。另外考慮產(chǎn)品逐步成長(zhǎng)完善,平臺(tái)會(huì)不斷的推出運(yùn)營(yíng)活動(dòng)來(lái)提升商家活躍度,因此首屏核心區(qū)域保留了較為突出運(yùn)營(yíng)位。
處理頁(yè)面節(jié)奏:從原型呈現(xiàn)來(lái)看這是一個(gè)功能入口眾多的頁(yè)面,為了能夠更好的突出產(chǎn)品戰(zhàn)略方向的重點(diǎn)功能,我們通過(guò)調(diào)整布局結(jié)構(gòu),將商家高頻操作的重點(diǎn)功能變?yōu)闄M向雙卡片式布局,加大功能入口的頁(yè)面占比,豐富了頁(yè)面節(jié)奏。
傳遞店鋪概念?
新的店鋪概念的傳遞,主要是視覺(jué)呈現(xiàn)層面上的思考。
頁(yè)面色彩的定調(diào):設(shè)計(jì)之初,同PM和UE部們的伙伴,進(jìn)行充分的溝通,從不同的角度出發(fā),對(duì)于店鋪概念的理解進(jìn)行頭腦風(fēng)暴。歸納出相應(yīng)的視覺(jué)關(guān)鍵詞:貼近生活、溫暖、好彩頭。
貼近生活:用戶(hù)群體特征是生活服務(wù)領(lǐng)域的商家。
溫暖:希望為商家打造生意經(jīng)營(yíng)的助手管家,而非一款冷冰冰的工具產(chǎn)品。
好彩頭:商家的直觀目的是獲取收益的最大化。希望產(chǎn)品貼合商家生意興隆的心理預(yù)期。
頁(yè)面氛圍的渲染:通過(guò)圖片抽離顏色的方式,將關(guān)鍵詞可視化,確定了相應(yīng)的主輔色。原型頭部的店鋪信息區(qū)有統(tǒng)領(lǐng)頁(yè)面的作用,也奠定了頁(yè)面的色彩氛圍。處理上采用大面積的主色漸變,結(jié)合懸浮的同色系圖案,保證不影響文字閱讀的前提下 ,豐富畫(huà)面空間感和質(zhì)感。
功能入口的差異化處理:功能入口的處理上主要分為兩個(gè)部分,獲取客源:商家使用頻率最高的操作(即前面提到的調(diào)整為橫向卡片布局的部分)。新手引導(dǎo)/日常操作:新用戶(hù)必要引導(dǎo)教育和老用戶(hù)的日常維護(hù)相對(duì)低頻的操作功能。
獲取客源部分是商家獲得生意的主動(dòng)操作功能,并且原型里增加了該功能頁(yè)面占比。那么,視覺(jué)處理上采用低飽和度較為溫和的色塊手法。沒(méi)有用過(guò)強(qiáng)的刺激色彩引導(dǎo)點(diǎn)擊。而是照顧到頁(yè)面的整體平衡感。
新手引導(dǎo)和日常維護(hù)icon的差異化處理?!靶率直匾δ堋币曈X(jué)上需要加強(qiáng)引導(dǎo)的部分,手法上采用色塊化的面性圖標(biāo),沿用微漸變的方式,來(lái)增強(qiáng)視覺(jué)沖擊力,并考慮將這一部分操作任務(wù)化,強(qiáng)調(diào)已完成和未完成的狀態(tài)?!叭粘9ぞ卟糠帧惫δ芊N類(lèi)繁多,但操作優(yōu)先級(jí)相對(duì)較低。處理時(shí)重點(diǎn)考慮模塊的整體感。色彩上將主色飽和度做了適當(dāng)降低;形式上統(tǒng)一采用3px粗細(xì)的線條兩端全圓角;在整體頁(yè)面中既不單薄也不過(guò)于笨重。
以上,通過(guò)不同形式的視覺(jué)處理方式,來(lái)營(yíng)造新店鋪的氛圍,以及有層次的處理不同優(yōu)先級(jí)的功能入口。實(shí)現(xiàn)了設(shè)計(jì)需要完成的前兩項(xiàng)任務(wù)。接下來(lái)是考慮到商家通用戶(hù)群體的多樣性,以及產(chǎn)品后期的可拓展性。
產(chǎn)品拓展性及功能差異性?
商家通本身處于成長(zhǎng)階段,產(chǎn)品部門(mén)會(huì)不時(shí)的迸發(fā)出新的功能進(jìn)行驗(yàn)證。以及,商家通的用戶(hù)群體依據(jù)身份(VIP和非VIP)的不同在功能權(quán)限上有很大的差異性??紤]到這些,我們決定整體設(shè)計(jì)采用可自由組合的卡片式布局,實(shí)現(xiàn)千人千面的模塊化方案。這樣既保障了不同身份的使用者都能有較好的產(chǎn)品體驗(yàn),又為產(chǎn)品隨時(shí)調(diào)整策略提供便利,同時(shí)也將開(kāi)發(fā)成本將到最低。
設(shè)計(jì)結(jié)果?
店鋪首頁(yè)改版上線后各方面數(shù)據(jù)均有不錯(cuò)的發(fā)展趨勢(shì)。PM訴求的核心功能訪客足跡、放心服務(wù)、店鋪動(dòng)態(tài)等較之前均有大幅度提高。其中,放心服務(wù)帶來(lái)直接收入增長(zhǎng)3倍多。訪客足跡超出預(yù)期30%多,功能使用率占到50%以上。另外,店鋪基礎(chǔ)信息外漏后,信息完善,Logo上傳等起到了很大的促進(jìn)作用。為建立商家差異化等級(jí)體系起到積極作用。
反思總結(jié)?
不難看出店鋪首頁(yè)改版達(dá)到可觀的預(yù)期效果,為商家搭建起一個(gè)經(jīng)營(yíng)管理店鋪的基礎(chǔ)線上平臺(tái)。但我們也意識(shí)到,當(dāng)商家對(duì)于店鋪概念不在陌生時(shí),基礎(chǔ)信息模塊占比將造成空間上的浪費(fèi),后期將為戰(zhàn)略級(jí)的商家等級(jí)體系作出更妥善的設(shè)計(jì)。
另外,一個(gè)完善的店鋪所要走的路還很長(zhǎng),需要有效的監(jiān)管商家的服務(wù)水平,從平臺(tái)的角度出發(fā)獎(jiǎng)優(yōu)懲劣,確保優(yōu)質(zhì)商家的權(quán)益得以保證。接下來(lái)我們整個(gè)團(tuán)隊(duì)將共同努力,不斷的優(yōu)化產(chǎn)品體驗(yàn),帶給商家一個(gè)好用,易用,不斷提升收益的商家通。
作者:王帥,視覺(jué)設(shè)計(jì)師
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶(hù)體驗(yàn)設(shè)計(jì)中心(微信公眾號(hào)@58UXD),作者@王帥
題圖來(lái)自PEXELS,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!