輕量級(jí)品牌電商的設(shè)計(jì)模式分析

1 評(píng)論 7805 瀏覽 53 收藏 15 分鐘

提及電商設(shè)計(jì),我們首先想到的是淘寶、京東這類具有很大規(guī)模的知名電商。但實(shí)際工作中,許多設(shè)計(jì)師更容易接觸到的是輕量級(jí)的電商項(xiàng)目,尤其是startup階段的品牌電商。今天簡(jiǎn)要談?wù)勥@類輕量級(jí)品牌電商的設(shè)計(jì)模式。

一、品牌電商的定義

電商平臺(tái)按照規(guī)??梢源笾路譃?strong>綜合電商、垂直電商品牌電商。綜合電商是指淘寶、京東這類面向大眾、銷售各種商品的平臺(tái)。垂直電商則專注于一塊細(xì)分市場(chǎng),如:唯品會(huì)專門向年輕女性用戶售賣服飾、美妝。品牌電商則是商家自主運(yùn)營的官網(wǎng),只銷售這一個(gè)品牌的產(chǎn)品。

它們的劃分通常并不涇渭分明,例如:當(dāng)當(dāng)是以網(wǎng)絡(luò)書城(垂直電商)的身份發(fā)家,現(xiàn)在的規(guī)模卻已經(jīng)達(dá)到了綜合電商的標(biāo)準(zhǔn)了。而小米商城作為一個(gè)獨(dú)立的品牌電商,隨著商品品類的增加,在設(shè)計(jì)模式上也越來越接近垂直電商。

電商類型與案例

電商類型與案例

一個(gè)典型的品牌電商,通常會(huì)具有以下特點(diǎn):

  • 瞄準(zhǔn)細(xì)分市場(chǎng)。有非常精準(zhǔn)的目標(biāo)用戶群體,以及非常具體的用戶場(chǎng)景。
  • 商品數(shù)量少。因而每個(gè)商品的詳情頁都需要精心設(shè)計(jì),而不像大型電商那樣套用模板。
  • 商品類目簡(jiǎn)單。因此信息架構(gòu)可以更加扁平化。

可以說,品牌電商的結(jié)構(gòu)雖然不像綜合電商那樣復(fù)雜,但對(duì)于場(chǎng)景化的要求更高。在信息架構(gòu)與流程設(shè)計(jì)上,品牌電商的設(shè)計(jì)師不能盲目借鑒淘寶、京東等主流電商的方案。而要通過分析,探索適合品牌電商的設(shè)計(jì)模式。

二、品牌電商的用戶場(chǎng)景分析

下面以“小度商城”為例,看看品牌電商如何進(jìn)行用戶場(chǎng)景分析,并用分析結(jié)果指導(dǎo)流程設(shè)計(jì)。

小度商城于2018年6月上線,目前還處于起步階段,主要是售賣百度自主研發(fā)的智能音箱產(chǎn)品——小度音箱,以及其他智能硬件產(chǎn)品和配件。小度商城是一個(gè)非常典型的品牌電商——有清晰的產(chǎn)品定位(小型智能設(shè)備商城)、特定的目標(biāo)用戶(小度音箱的受眾)、輕量級(jí)的信息規(guī)模(少而精的商品)。

小度商城web版(截屏)

小度商城web版(截屏)

小度商城的目標(biāo)用戶基本上可以等同為其主打商品“小度音箱”的用戶。

用戶畫像:阿智,男,28歲,互聯(lián)網(wǎng)公司運(yùn)營職位。

  • 對(duì)生活質(zhì)量有一定要求的年輕人,思想開放、新潮,相信“科技改變生活”。
  • 工作的年頭不長,經(jīng)濟(jì)上并不富裕,對(duì)產(chǎn)品價(jià)格敏感。
  • 網(wǎng)購經(jīng)驗(yàn)豐富,對(duì)常見的購物流程操作熟練。
  • 剛剛晉升為娃爸,希望小度音箱能陪孩子說話,讓帶娃更輕松。
  • 由于看過《最強(qiáng)大腦》綜藝節(jié)目,對(duì)“小度機(jī)器人”的形象有印象和好感。

用戶場(chǎng)景:

由于小度商城正處于起步階段,大部分流量來自于運(yùn)營活動(dòng)(如公眾號(hào))或搜索引擎廣告(如在百度搜索“智能音箱”)的引流,用戶通常是直接進(jìn)入小度音箱的商品詳情頁(而非商城首頁)。

基于這種特殊情況,一套完整的用戶場(chǎng)景可以如下描述:

  1. 進(jìn)入:阿智最近聽到一些朋友討論智能音箱的話題,自己也想試一試,但不知道買一個(gè)音箱劃不劃算。他用手機(jī)百度了“智能音箱”,想了解一下,搜索的第一條結(jié)果就是“小度智能音箱”,阿智看到高亮的“89元嘗鮮價(jià)”,覺得這個(gè)價(jià)格非常有誘惑力,于是點(diǎn)擊查看。
  2. 查看:阿智進(jìn)入了“小度智能音箱”詳情頁,作為理性的消費(fèi)者,他瀏覽了整個(gè)商品說明,但由于不想浪費(fèi)流量沒有看視頻。
  3. 加入購物車:阿智點(diǎn)擊了頁面頂部的“立即購買”,看到了選擇顏色彈框,默認(rèn)的“白色”已經(jīng)被選中,阿智點(diǎn)擊了“加入購物車”按鈕,確認(rèn)購買商品。彈框中的文案提示添加成功,阿智點(diǎn)擊了“去購物車”按鈕,直接進(jìn)入購物車頁面。
  4. 登錄:阿智點(diǎn)擊“去下單”,發(fā)現(xiàn)自己還沒有登錄,好在自己有百度賬號(hào),阿智很快就登錄成功了。
  5. 下單:阿智按照以往的網(wǎng)購經(jīng)驗(yàn),填寫了收獲地址、確認(rèn)了訂單明細(xì),并用百度錢包成功支付。
  6. 二次訪問:過了幾天,阿智想查看一下訂單有沒有發(fā)貨。他來到小度商城想找到已下單的訂單信息,瀏覽頁面后,阿智發(fā)現(xiàn)只有頁面左上角的抽屜式導(dǎo)航圖標(biāo)還沒有點(diǎn)過,他點(diǎn)擊圖標(biāo),如愿發(fā)現(xiàn)了“我的訂單”入口,并進(jìn)去查看了發(fā)貨情況。

在小度商城用戶場(chǎng)景中,有兩個(gè)特征明顯區(qū)別于更加主流的綜合電商:

  1. 用戶的購物流程是相對(duì)“單線程”的,從進(jìn)入商品詳情頁開始,用戶的行為就指向“獲取信息、完成購買”,而非“隨意閑逛”。且大概率的,一次僅購買一件商品。
  2. 手機(jī)端的信息載體是M站而非原生的app,這導(dǎo)致頁面的穩(wěn)定性、可控性稍差,在交互設(shè)計(jì)中必須要考慮得更周全。

分析用戶場(chǎng)景以及用戶購物流程中的特點(diǎn),對(duì)于品牌電商來說是非常必要的。例如:apple的官網(wǎng),不少用戶在訪問網(wǎng)站前,就已經(jīng)決定了要買“銀色”、“64GB”的最新款iphone,那么確認(rèn)不干擾和打斷用戶的選購流程就是非常關(guān)鍵的。

反之,在時(shí)尚服裝品牌的商城中,用戶很可能需要在幾款相似的商品之間猶豫,那么,則需要針對(duì)這樣的情況進(jìn)行設(shè)計(jì)。

三、根據(jù)用戶場(chǎng)景進(jìn)行流程優(yōu)化

針對(duì)從用戶場(chǎng)景中提煉出的兩個(gè)特征,我對(duì)小度商城的下單流程進(jìn)行了走查,提煉出了兩個(gè)值得關(guān)注的問題:

1. 對(duì)配件產(chǎn)品的引流不足

小度商城當(dāng)前的“加入購物車流程”如圖,可以看出:這個(gè)流程整體而言是簡(jiǎn)介、流暢的。不過,“單線程”的購買流程一方面能最大限制地防止跳出,另一方面也導(dǎo)致用戶不再留意商城中的其他產(chǎn)品。

小度商城-加入購物車流程

小度商城-加入購物車流程

隨著業(yè)務(wù)發(fā)展,商城可能引入更多的智能配件(智能開關(guān)、智能插線板),它們能夠帶給用戶更完整的智能家居體驗(yàn)。在這種前提下,我認(rèn)為不妨在智能音箱的購買路徑中,適度地插入智能配件產(chǎn)品的引流廣告。

我認(rèn)為一個(gè)好的引流位置是“加入購物車的成功反饋”環(huán)節(jié)(上圖中的第三個(gè)界面)。此時(shí),用戶已經(jīng)將音箱產(chǎn)品加入購物車了,對(duì)于主打的音箱產(chǎn)品已經(jīng)有了比較穩(wěn)定的購買意愿,此時(shí)插入“智能插座”等配件產(chǎn)品的引流廣告,不會(huì)生硬地打斷用戶的購買流程。同時(shí)能夠引起部分用戶的興趣,增加配件的曝光度和銷售額。

加入購物車反饋頁優(yōu)化方案

加入購物車反饋頁優(yōu)化方案

2. 對(duì)于M站可能發(fā)生的“異常流程”關(guān)注不足

小型品牌電商初創(chuàng)之時(shí),通常不會(huì)開發(fā)原生app,而是用M站支持用戶在手機(jī)上的訪問。然而,在M站的情形下,一些意料之外的情況更容易發(fā)生。

M站的穩(wěn)定性與原生app相比稍差,更容易出現(xiàn)下單及支付流程中意外跳出的情況。

一個(gè)典型的案例是在支付環(huán)節(jié)后退時(shí)(用戶可能是想重復(fù)確認(rèn)信息、或誤操作右滑),用戶的期待是回到訂單確認(rèn)頁或待支付訂單頁,實(shí)際的結(jié)果卻是回到購物車頁面。此時(shí)用戶能看到購物車內(nèi)的商品數(shù)減少,卻不知道到哪里繼續(xù)支付。

異常流程:支付環(huán)節(jié)跳出

異常流程:支付環(huán)節(jié)跳出

最佳的解決方案當(dāng)然是用戶從“支付”頁面“后退”時(shí),能直接跳轉(zhuǎn)至“待支付訂單”。但在M站的情形下,前端對(duì)用戶“右滑后退”或“點(diǎn)擊瀏覽器后退鍵”的控制力不足。

作為一個(gè)替代的方案,我認(rèn)為可以在退回并刷新“購物車”時(shí),判斷是否有未支付的訂單,如有,給出簡(jiǎn)單的文案提示,并引導(dǎo)用戶跳轉(zhuǎn)至待支付訂單列表。

購物車添加引導(dǎo)文案

購物車添加引導(dǎo)文案

四、品牌電商的信息架構(gòu)

不同類型電商的信息架構(gòu),也會(huì)有比較大的差異,這一點(diǎn)尤其體現(xiàn)在手機(jī)屏幕上(app或M站)。

手機(jī)端電商的導(dǎo)航方式主要有兩種:底部tab導(dǎo)航和頂部的抽屜式導(dǎo)航。

底部tab導(dǎo)航與抽屜式導(dǎo)航

底部tab導(dǎo)航與抽屜式導(dǎo)航

一般來說,商品類目越復(fù)雜、用戶重復(fù)訪問的頻率越高,我們?cè)娇梢钥紤]采用底部tab式導(dǎo)航。

而輕量級(jí)的品牌電商,通常將導(dǎo)航設(shè)置在頁面頂部,主流的設(shè)計(jì)模式為:

  • 居中的品牌logo:返回首頁;
  • 左側(cè)抽屜式導(dǎo)航:商品類目導(dǎo)航;
  • 右側(cè)購物袋icon:購物車、訂單、個(gè)人中心等。

apple官網(wǎng)的導(dǎo)航模式

apple官網(wǎng)的導(dǎo)航模式

值得一提的是:apple將“我的訂單”與“個(gè)人中心”收在了購物袋圖標(biāo)之內(nèi)。這種方式其實(shí)很可能是違背用戶直覺與心理預(yù)期的,但在輕量級(jí)商城中,購物袋icon更容易被注意和點(diǎn)擊。

同時(shí),在用戶進(jìn)行購買行為時(shí),已經(jīng)探索過了購物袋區(qū)域,后續(xù)登錄平臺(tái)查看個(gè)人中心或訂單詳情時(shí),也比較容易找到。

將“我的訂單”與“個(gè)人中心”收在抽屜式導(dǎo)航中也是一種可行的方案(這兩種模式各有利弊,總體而言都行得通)。但在視覺樣式上需要與其它信息作出區(qū)分。

下圖的左邊為小度商城的抽屜式導(dǎo)航,其中“我的訂單”與“個(gè)人中心”的信息層級(jí)應(yīng)當(dāng)高于其它內(nèi)容,但目前的視覺樣式卻十分平淡,我認(rèn)為這是不利于用戶體驗(yàn)的。在優(yōu)化方案上,我建議用實(shí)心icon進(jìn)行視覺上的強(qiáng)化(登陸后,個(gè)人中心的icon可以替換為用戶的百度賬戶頭像)。

小度商城抽屜式導(dǎo)航(修改前、修改后)

小度商城抽屜式導(dǎo)航(修改前、修改后)

小結(jié)

以上,我們討論了輕量級(jí)品牌電商區(qū)別于大型商城的特征、它的用戶場(chǎng)景分析方法、購物流程設(shè)計(jì)以及信息架構(gòu)模式??梢哉f,“輕量級(jí)”不意味著“簡(jiǎn)單”,設(shè)計(jì)好一個(gè)輕量級(jí)的商城依然需要大量的思考、規(guī)范的設(shè)計(jì)流程和不懈的努力。

 

本文由 @?leadwhite 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

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