電商工作后臺(tái)首頁(yè)的商業(yè)價(jià)值重構(gòu)與產(chǎn)品化設(shè)計(jì)

文章以買(mǎi)賣(mài)家工作臺(tái)首頁(yè)設(shè)計(jì)為例,來(lái)介紹下電商網(wǎng)站后臺(tái)首頁(yè)的整體設(shè)計(jì)思路。
電商網(wǎng)站一般分為前臺(tái)導(dǎo)購(gòu)及后臺(tái)管理兩方面,通常由買(mǎi)家及賣(mài)家兩種角色組成。大部分的工作是在后臺(tái)完成,涉及到各類(lèi)管理系統(tǒng),保障日常工作順利運(yùn)行。
后臺(tái)產(chǎn)品設(shè)計(jì)因其邏輯復(fù)雜、業(yè)務(wù)繁多、專(zhuān)業(yè)性強(qiáng)具有較大挑戰(zhàn)性,在很多情況下設(shè)計(jì)師的發(fā)揮受到較大限制。尤其是B類(lèi)后臺(tái)產(chǎn)品的設(shè)計(jì)需要對(duì)公司業(yè)務(wù)擁有更全方位的認(rèn)識(shí),加大了其設(shè)計(jì)難度。做為設(shè)計(jì)師如何重新定義后臺(tái)商業(yè)價(jià)值?如何進(jìn)行產(chǎn)品化設(shè)計(jì)思考?下面以買(mǎi)賣(mài)家工作臺(tái)首頁(yè)設(shè)計(jì)為例,來(lái)介紹下整體設(shè)計(jì)思路。
買(mǎi)賣(mài)家工作臺(tái)是什么?
買(mǎi)賣(mài)家工作臺(tái)是基于1688大數(shù)據(jù)為企業(yè)提供生意決策、日常工作管理的中小企業(yè)操作管理后臺(tái)。
設(shè)計(jì)之前:思考在最前方,與業(yè)務(wù)一起確定產(chǎn)品方向
轉(zhuǎn)變思維方式:由被動(dòng)接受到主動(dòng)提案
做為體驗(yàn)設(shè)計(jì)師需要對(duì)整個(gè)產(chǎn)品負(fù)責(zé),在產(chǎn)品改造前期提前與PD對(duì)焦思路,全鏈路思考主動(dòng)提出對(duì)產(chǎn)品的整體想法,而非到某項(xiàng)交互功能再介入,或者是某個(gè)頁(yè)面視覺(jué)表現(xiàn)再進(jìn)行。對(duì)焦的過(guò)程中也發(fā)現(xiàn)項(xiàng)目的諸多難點(diǎn):涉及B2B所有業(yè)務(wù),風(fēng)險(xiǎn)大,影響范圍廣。為保證產(chǎn)品方向的準(zhǔn)確性需要與業(yè)務(wù)方進(jìn)行多次溝通討論及產(chǎn)品匯報(bào)。 產(chǎn)品方向確定基本流程: 思路對(duì)焦——方案討論——方案設(shè)計(jì)——產(chǎn)品匯報(bào)——確定方向。
商業(yè)價(jià)值重構(gòu)三步走:
一、了解定位,轉(zhuǎn)換視角
1、了解產(chǎn)品整體定位: 在進(jìn)行商業(yè)價(jià)值重構(gòu)前充分了解產(chǎn)品定位。以工作臺(tái)為例,今年1688針對(duì)B2B市場(chǎng)提出了人、貨、場(chǎng)的戰(zhàn)略。人:幫助引流,貨:提升品質(zhì),場(chǎng):提升能力,做為1688用戶(hù)的核心工作場(chǎng)景-工作臺(tái)成為重要場(chǎng)景之一,需要結(jié)合新戰(zhàn)略進(jìn)行全新升級(jí),加強(qiáng)人在后臺(tái)場(chǎng)中的匹配效率。
2、從業(yè)務(wù)視角轉(zhuǎn)變?yōu)橛脩?hù)視角:在設(shè)計(jì)對(duì)焦過(guò)程發(fā)現(xiàn),現(xiàn)有版本融入了較多內(nèi)部運(yùn)營(yíng)工作邏輯,體現(xiàn)各個(gè)部門(mén)的利益及立場(chǎng)。比如網(wǎng)站多了一塊新業(yè)務(wù)需要向用戶(hù)推廣,就會(huì)在后臺(tái)中增加一個(gè)介紹版塊讓用戶(hù)區(qū)體驗(yàn),缺少用戶(hù)去體驗(yàn)功能的場(chǎng)景及動(dòng)機(jī)。偏向一個(gè)流量分發(fā)為中心的核心陣地。業(yè)務(wù)視角展現(xiàn)在用戶(hù)層面比較難理解。做為B類(lèi)用戶(hù)更多的是從做生意的角度來(lái)使用后臺(tái),需要做一層轉(zhuǎn)化才能到達(dá)認(rèn)知,一定程度上影響了用戶(hù)的使用效率。因此需要翻譯成用戶(hù)能理解的產(chǎn)品表達(dá)。
二、統(tǒng)一戰(zhàn)線(xiàn),建立目標(biāo)
與產(chǎn)品、運(yùn)營(yíng)統(tǒng)一戰(zhàn)線(xiàn),建立目標(biāo)。將一個(gè)流量分發(fā)為中心的核心陣地打造成以用戶(hù)服務(wù)為中心的產(chǎn)品。
三、明確關(guān)系,構(gòu)建大圖
明確商業(yè)價(jià)值的構(gòu)成者,做為平臺(tái)一共有三方:平臺(tái)方、買(mǎi)方及賣(mài)方。完整的商業(yè)價(jià)值構(gòu)建需要聯(lián)動(dòng)三方一起共進(jìn)。工作臺(tái)以阿里大數(shù)據(jù)為中心,網(wǎng)站平臺(tái)小二通過(guò)行業(yè)市場(chǎng)來(lái)服務(wù)我們的買(mǎi)家,同時(shí)通過(guò)商家培育體系來(lái)服務(wù)我們的賣(mài)家?guī)椭碳页砷L(zhǎng),商家通過(guò)自我成長(zhǎng)提升自身運(yùn)營(yíng)能力來(lái)服務(wù)好買(mǎi)家,構(gòu)建出穩(wěn)固的鐵三角服務(wù)生態(tài)大圖。通過(guò)建立價(jià)值生態(tài)場(chǎng)景,幫助業(yè)務(wù)打通上下游市場(chǎng),讓小二更好的服務(wù)買(mǎi)家,促使商家自運(yùn)營(yíng)。
明確商業(yè)價(jià)值后,進(jìn)行產(chǎn)品化設(shè)計(jì)
一、挖掘用戶(hù)使痛點(diǎn)
1、定性:采用敏捷式共建用研,在有限制時(shí)間內(nèi),獲得豐富有效信息
首先談下用研方式,傳統(tǒng)的用研從制定訪(fǎng)談?dòng)?jì)劃、問(wèn)卷設(shè)計(jì)、用戶(hù)邀約、執(zhí)行調(diào)研、分析數(shù)據(jù)到撰寫(xiě)報(bào)告,整個(gè)過(guò)程基本由用研同學(xué)獨(dú)立完成,在項(xiàng)目時(shí)間比較緊張的情況下會(huì)受到限制。因此我們采用了敏捷式共建用研,在臨時(shí)機(jī)動(dòng)的情況下獲取用戶(hù)痛點(diǎn)的方式,有幾個(gè)小tips可供參考:
A、項(xiàng)目組共建用研:打破流程限制,在與用研同學(xué)確定好調(diào)研提綱后,發(fā)動(dòng)項(xiàng)目組的成員運(yùn)營(yíng)、開(kāi)發(fā)、測(cè)試等共同參與調(diào)研;B、靈活邀約客戶(hù):借助園區(qū)商家活動(dòng)、會(huì)議等在中間抽取時(shí)間機(jī)動(dòng)調(diào)研,在中午休息時(shí)間就訪(fǎng)談了近15位客戶(hù);
C、訪(fǎng)談結(jié)果及時(shí)產(chǎn)出:后項(xiàng)目組成員當(dāng)即進(jìn)行調(diào)研總結(jié)及改進(jìn)建議,大大提高了訪(fǎng)談的輸出效率,也提高了項(xiàng)目成員的對(duì)于用戶(hù)的整體感知。用戶(hù)調(diào)研不在于形式,在于是否通過(guò)有效方式得到想要的信息.優(yōu)勢(shì):用戶(hù)量大,意愿大,調(diào)研成本低 風(fēng)險(xiǎn):目標(biāo)用戶(hù)不穩(wěn)定、用戶(hù)經(jīng)營(yíng)狀態(tài)感知偏弱。
定性調(diào)研發(fā)現(xiàn):
買(mǎi)家:主要工作行為是采購(gòu)管理和銷(xiāo)售管理,小買(mǎi)家不會(huì)進(jìn)行進(jìn)銷(xiāo)存管理,進(jìn)銷(xiāo)存管理工具不能同步1688信息,查看物流不方便、不能看到銷(xiāo)售數(shù)據(jù)情況,交易過(guò)的公司公司使用量低等情況。
賣(mài)家:主要使用群體為公司操作員基本每天都會(huì)進(jìn)入后臺(tái)操作,主要操作行為查看店鋪數(shù)據(jù)、進(jìn)行交易訂單管理、商品管理、店鋪管理、營(yíng)銷(xiāo)活動(dòng)管理。核心關(guān)注曝光、訪(fǎng)客及轉(zhuǎn)化情況。調(diào)研中發(fā)現(xiàn)用戶(hù)在后臺(tái)操作的目標(biāo)感模糊,例如用戶(hù)反饋:剛開(kāi)了店鋪,后面要怎么弄,完全沒(méi)方向!別人都是怎么做的,沒(méi)有引導(dǎo)性;購(gòu)買(mǎi)誠(chéng)信通僅為了標(biāo)識(shí),無(wú)線(xiàn)上行為不知道要怎么做?沒(méi)有把線(xiàn)下用戶(hù)拉到線(xiàn)上等問(wèn)題。
2、定量:通過(guò)數(shù)據(jù)分析發(fā)現(xiàn)用戶(hù)使用都比較集中,部分模塊使用率較低,有效信息少;長(zhǎng)尾效應(yīng)明顯,交易鏈路為買(mǎi)賣(mài)家高頻行為,抓手欠缺。
二、確定設(shè)計(jì)目標(biāo)及策略
基于用戶(hù)的行為差異及訴求差異,制定不同的設(shè)計(jì)目標(biāo)及策略。工作臺(tái)結(jié)合買(mǎi)賣(mài)家做了版本區(qū)分,分為買(mǎi)家版及賣(mài)家版
買(mǎi)家版設(shè)計(jì)目標(biāo):讓買(mǎi)家擁有精細(xì)化的采銷(xiāo)服務(wù),提高進(jìn)貨效率
設(shè)計(jì)策略:
- 精簡(jiǎn)化:信息架構(gòu)場(chǎng)景化,內(nèi)容模塊調(diào)整;
- 數(shù)據(jù)化、個(gè)性化:通過(guò)用戶(hù)行為數(shù)據(jù)、關(guān)系數(shù)據(jù)提供個(gè)性化服務(wù),接入第三方服務(wù)滿(mǎn)足買(mǎi)家下游需求;
- 互動(dòng)性:平臺(tái)與買(mǎi)家、買(mǎi)家與賣(mài)家間的互動(dòng),進(jìn)行服務(wù)觸達(dá),關(guān)系顯性化,從而促進(jìn)商業(yè)價(jià)值最大化。
賣(mài)家版設(shè)計(jì)目標(biāo):幫助商家更好的自我成長(zhǎng),提高自運(yùn)營(yíng)能力
設(shè)計(jì)策略:
- 精簡(jiǎn)化:信息架構(gòu)場(chǎng)景化,快捷入口調(diào)整;
- 數(shù)據(jù)化自運(yùn)營(yíng):分類(lèi)管理,結(jié)合用研中了解的用戶(hù)核心場(chǎng)景:管交易、管店、管貨、管客及管活動(dòng)進(jìn)行模塊分類(lèi);
- 賣(mài)家生命周期管理:建立用戶(hù)成長(zhǎng)激勵(lì)體系,通過(guò)用戶(hù)進(jìn)階分層明確成長(zhǎng)目標(biāo),促使用戶(hù)成長(zhǎng)。 策略圖:
三、交互階段信息架構(gòu)細(xì)化設(shè)計(jì),建立模塊產(chǎn)品化交互設(shè)計(jì)Guideline
信息架構(gòu)核心抓手有三:
- 導(dǎo)航分類(lèi)場(chǎng)景化:以賣(mài)家版為例,在導(dǎo)航區(qū)域核心體現(xiàn)賣(mài)家四大工作場(chǎng)景:管交易、管店、管貨、管客及管活動(dòng)。
- 內(nèi)容場(chǎng)景數(shù)據(jù)導(dǎo)向化:中間內(nèi)容區(qū)域以總體成長(zhǎng)情況和場(chǎng)景數(shù)據(jù)情況進(jìn)行導(dǎo)向性設(shè)計(jì),提供數(shù)據(jù)分析及行動(dòng)操作。明確用戶(hù)核心關(guān)注內(nèi)容及操作。
3.模塊設(shè)計(jì)產(chǎn)品化:建立模塊交互設(shè)計(jì)Guideline 為保障后續(xù)新增模塊價(jià)值傳遞的統(tǒng)一性,建立模塊產(chǎn)品化交互設(shè)計(jì)Guideline。 對(duì)所有模塊進(jìn)行了功能分類(lèi),主要分為兩種: 1、任務(wù)服務(wù)模塊: 任務(wù)服務(wù)模塊設(shè)計(jì)需要明確:模塊是什么?(業(yè)務(wù)視角轉(zhuǎn)為用戶(hù)視角)目標(biāo)&現(xiàn)狀,怎么做及可獲得什么服務(wù)。 2、消息模塊:傳遞服務(wù)是什么?怎么做?
舉例:客戶(hù)管理模塊
- 模塊是什么?:店鋪客戶(hù)管理
- 目標(biāo)&現(xiàn)狀:店鋪的訪(fǎng)客、潛在客戶(hù)、成交客戶(hù)及流失客戶(hù)情況
- 怎么做?:進(jìn)行客戶(hù)召回
- 可獲得什么?:客戶(hù)數(shù)量增加,客戶(hù)管理類(lèi)工具
交互設(shè)計(jì)微創(chuàng)新:功能地圖設(shè)計(jì)
工作臺(tái)中的功能入口眾多,為方便用戶(hù)查找及使用,對(duì)功能地圖進(jìn)行優(yōu)化。統(tǒng)一工作場(chǎng)景分類(lèi)認(rèn)知與導(dǎo)航分類(lèi)保持一致,減少界面中分類(lèi)層級(jí),用戶(hù)點(diǎn)擊功能地圖后可進(jìn)行自定菜單設(shè)置,將自己常用的入口釘?shù)阶髠?cè)菜單中。
優(yōu)化前:
優(yōu)化后:
四、視覺(jué)設(shè)計(jì)無(wú)邊界,尋找核心發(fā)力點(diǎn)
通常一個(gè)產(chǎn)品進(jìn)入視覺(jué)設(shè)計(jì)就開(kāi)始YY各種品牌元素及表現(xiàn)感知方面的設(shè)計(jì),而作為后臺(tái)產(chǎn)品因其偏重操作,在視覺(jué)設(shè)計(jì)前,需要宏觀(guān)的進(jìn)行再思考,用戶(hù)通過(guò)感知可以帶來(lái)什么價(jià)值?在工作臺(tái)視覺(jué)設(shè)計(jì)前進(jìn)行了進(jìn)行感知升級(jí)思考,建立感知升級(jí)閉環(huán)貫穿在整個(gè)視覺(jué)設(shè)計(jì)環(huán)節(jié),閉環(huán)全圖:
視覺(jué)設(shè)計(jì)核心發(fā)力點(diǎn)提?。?在對(duì)整體閉環(huán)有一定認(rèn)知后,進(jìn)行感知定位通過(guò)與項(xiàng)目組成員共建提取工作臺(tái)感知云標(biāo)簽,提取感知關(guān)鍵詞:簡(jiǎn)單、清晰及高效。在視覺(jué)層面主要通過(guò)風(fēng)格定義、特色模塊設(shè)計(jì)及情感化設(shè)計(jì)來(lái)發(fā)力。
1、風(fēng)格定義:對(duì)B2B供應(yīng)鏈管理類(lèi)后臺(tái)從顏色、圖標(biāo)、控件、模塊等方面進(jìn)行視覺(jué)層面競(jìng)品分析,同時(shí)了解時(shí)下主流產(chǎn)品設(shè)計(jì)趨勢(shì)如微軟、facebook,IOS11最新視覺(jué)風(fēng)格。發(fā)現(xiàn)以下特點(diǎn):
- 形:去裝飾,以?xún)?nèi)容為中心,去掉了多余的裝飾元素
- 色:少顏色,通過(guò)大小對(duì)比來(lái)突出主體,減少顏色
- 質(zhì):扁平化設(shè)計(jì),微漸變
- 構(gòu):減線(xiàn)條,弱化線(xiàn)條分割,通過(guò)留白來(lái)區(qū)分空間,輕劃分:巧用投影做區(qū)塊劃分 綜合以上分析進(jìn)行風(fēng)格定義設(shè)計(jì)
買(mǎi)家版:
賣(mài)家版:
風(fēng)格細(xì)節(jié):
導(dǎo)航優(yōu)化:為保障用戶(hù)認(rèn)知的統(tǒng)一性,沿用了老版本中買(mǎi)家橙色,賣(mài)家藍(lán)色的顏色特征。導(dǎo)航設(shè)計(jì)中縮減了顏色在導(dǎo)航中的比重,通過(guò)版本字體來(lái)區(qū)分。簡(jiǎn)化老版本中當(dāng)前狀態(tài)的框選樣式,通過(guò)TAB短線(xiàn)來(lái)表示當(dāng)前狀態(tài)。
內(nèi)容再設(shè)計(jì):老版本中代辦模塊信息內(nèi)容密集識(shí)別困難,操作性較低,通過(guò)信息名片卡片式設(shè)計(jì)待辦歸類(lèi)整理,突出核心內(nèi)容
化繁為簡(jiǎn):現(xiàn)有頁(yè)面中模塊很多用線(xiàn)條來(lái)區(qū)分,信息量比較多的情況下,頁(yè)面相對(duì)復(fù)雜,因此弱化線(xiàn)條分割,通過(guò)留白來(lái)區(qū)分空間
圖標(biāo)設(shè)計(jì):對(duì)后臺(tái)產(chǎn)品中的圖標(biāo)進(jìn)行了功能分類(lèi):說(shuō)明性圖標(biāo)、權(quán)益性圖標(biāo)。后臺(tái)圖標(biāo)設(shè)計(jì)需要控制其表現(xiàn)力度,因此在設(shè)計(jì)上通過(guò)局部細(xì)節(jié)點(diǎn)綴來(lái)表現(xiàn)。權(quán)益類(lèi)圖標(biāo)與前臺(tái)門(mén)洞類(lèi)做區(qū)分,減少顏色運(yùn)用,結(jié)合買(mǎi)賣(mài)身份做橙、藍(lán)底色區(qū)分,使用簡(jiǎn)易面狀的形式來(lái)凸顯特征。
2、特色模塊設(shè)計(jì),以成長(zhǎng)模塊為例
模塊設(shè)計(jì)背景:根據(jù)商家在平臺(tái)的七項(xiàng)能力,統(tǒng)一分層體系,促進(jìn)商家自運(yùn)營(yíng),從而為買(mǎi)家提供優(yōu)質(zhì)貨源和采購(gòu)體驗(yàn)
設(shè)計(jì)方向:為幫助商家在平臺(tái)更好的成長(zhǎng),全鏈路思考用戶(hù)成長(zhǎng)環(huán)節(jié)。在工作臺(tái)中的透?jìng)髦校褂蒙虅?wù)跑的方式來(lái)激勵(lì)用戶(hù),并給予成長(zhǎng)引導(dǎo) 基于模塊設(shè)計(jì)Guideline明確:
- 模塊是什么?:我的成長(zhǎng)
- 目標(biāo)&現(xiàn)狀:成長(zhǎng)能力得分
- 怎么做?:成長(zhǎng)任務(wù)
- 可獲得什么?:成長(zhǎng)權(quán)益
對(duì)模塊進(jìn)行劃分:
成長(zhǎng)感知定位,主要通過(guò)兩方面,提取物像特征,提取表現(xiàn)形式
通過(guò)商務(wù)人物奔跑的形式來(lái)表現(xiàn)成長(zhǎng)進(jìn)度,為便于用戶(hù)進(jìn)行成長(zhǎng)任務(wù)連貫操作設(shè)計(jì)全鏈路成長(zhǎng)插件,提高成長(zhǎng)效率。
3、情感化設(shè)計(jì):
身份卡片設(shè)計(jì):
使用2.5D元素來(lái)增加用戶(hù)新手操作的實(shí)體感受:
五、后臺(tái)動(dòng)效,讓工作臺(tái)體驗(yàn)更流暢
在項(xiàng)目過(guò)程中非常感謝成龍、梅郁在設(shè)計(jì)思路及方法上的引導(dǎo),感謝團(tuán)隊(duì)中顧佳、蘇林給力的設(shè)計(jì)支持。
產(chǎn)品化設(shè)計(jì)任重道遠(yuǎn),是一個(gè)不斷優(yōu)化迭代的過(guò)程,還需要聯(lián)合各方力量一起合力,共同改進(jìn)。在新形勢(shì)下,設(shè)計(jì)師已不在是接需求的資源方,而是產(chǎn)品共同的締造者。需要利用一切能夠改善產(chǎn)品的方式,用我們的全部智慧和能力,為我們的用戶(hù)服務(wù)。
作者:金莉
來(lái)源:阿里巴巴U一點(diǎn)
題圖來(lái)自PEXELS,基于CC0協(xié)議
很棒
??
好贊啊!
說(shuō)的非常好。