天天看點

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

作者:人人都是産品經理
編輯導語:設計師在進行産品設計時,總會被問到這個設計的價值是什麼,在不同的場景下判斷的标準也不一樣,比如可以從商業價值、使用者體驗等方面衡量;本文作者對如何正确挖掘設計價值進行思考,我們一起來看一下吧。
設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

你們在日常工作中是否會有這樣的思考,設計能給業務帶來多大的價值?或者你從現在的工作中能夠感受到多少價值?難道設計的價值還隻單單停留在完成對原型稿的視覺表現,去撕逼各種産品細節的審美挑剔嗎?

答案顯而不是。作為設計師,需要在日常工作中養成系統化的設計思路,站在業務以及使用者體驗的角度去思考問題,從産品底層邏輯出發去充分了解業務,挖掘設計的機會點,通過設計的手段來助力業務的增長。本文将以58生活圈小程式從0到1的設計過程為例,來跟大家聊聊設計師如何在項目中發揮自身的價值。

為了做出貼近業務目标的設計,項目前期設計師對于産品的定位及業務底層邏輯的深刻了解很有必要,要思考我們為什麼要做這個産品?使用者又能通過我們的産品得到什麼?

如今資訊暢通的網際網路時代,各大社交電商平台不斷湧入本地生活領域,58本地服務到店業務随着方向性的調整,推出了全新的生活圈小程式。産品主要定位吃喝玩樂與生活服務的優惠折扣平台,聚合優惠活動資訊的同時引入更多優質的供應鍊進行合作,通過社交電商管道來為使用者提供優質特價的産品。

這樣一來我們就明确了生活圈産品的價值:使用者在我們的平台可以享受到各種實惠低價的商品與服務,同時也可以更新為達人使用者,實作自用省錢,分銷能夠賺取傭金。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

社交電商加私域流量是平台目前主要的營運模式:一方面通過微信公衆号向本地使用者推送文章,并在公衆号内嵌入平台,使用者可以點選跳轉至小程式内進行購買;另一方面基于達人分銷的社交分享,通過達人使用者在微信内進行裂變式的傳播,同時我們也為達人提供持續穩定的收益,激勵賦能達人。

在分享經濟的時代下,随着消費習慣的變化,并借助微信的紅利并通過裂變拉動新的增長,最終打通整個微信生态圈内流量、轉化、變現的閉環模式。微信生态無疑是一個承載社交電商的理想平台。

緊接着我們對目标使用者進行了調研分析,目前我們的使用者群體特征具體表現為:以25-39歲的新中産為主,整體趨于年輕化;高頻次交易屬性;具備高消費能力;對價格敏感度較高等等。

産品是最終服務于使用者的,不同産品面對不同人群的需求也是不一樣的,是以我們需要深入了解使用者,知道使用者真正需要的是什麼?隻有這樣才能更好地聚焦設計政策,将産品的核心價值及服務傳遞給使用者,進而提升使用者的使用體驗。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

使用者購買決策的過程看似隻是簡單的商品購買,然而其實是一個系統化的決策過程,整條關鍵路徑中從商品浏覽(資訊擷取)到了解商品(詳情認知)再到支付成功(購買決策)經曆了幾個關鍵節點,由開始到最後呈現出一個漏鬥狀的情形,轉化率越來越低。

是以在産品設計之前我們對使用者決策的關鍵路徑進行了相應梳理:主要為購買前,購買中以及購買後這幾個階段,同時圍繞着每個環節去強化使用者内心感覺,挖掘設計上的機會點。

在這幾個階段我們主要解決的問題可以歸納為以下三點:

購買前:如何讓使用者更加便捷高效地尋找到商品;

購買中:如何将産品的核心價值傳達給使用者,讓使用者購買地更順暢;

購買後:如何讓使用者買後有所保障,在複購率的提升上做些推動和嘗試。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

至此,産品整體的設計思路就已經很明确了,如果前期我們沒有對業務進行宏觀層面的拆解與分析,設計師在後期可能就會找不準設計的發力點,進而導緻設計沒有貼合實際的業務場景。

圍繞着這些背景,經過多次溝通最終設計和産品同學達成了一緻,本次的主要設計目标為:

提升使用者資訊閱讀效率;

提升使用者購買決策效率;

提升使用者服務保障感覺。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

在明确了設計目标之後,最後一部分就是就是設計落地了,正确的設計始終是圍繞着産品政策來執行的,并通過深耕設計解決方案來為使用者打造優質的購買體驗,那麼我們将從以下幾個次元來進行視覺方案的設計:

1)少即是多貫穿始終

其實設計師往往被要求在僅限的頁面空間裡盡可能展示更多資訊,然而在這樣的訴求下我們的界面常常會失去很多留白空間,導緻資訊密度會很大,這樣反而會影響使用者的閱讀效率,甚至降低使用者浏覽欲望。

是以在首頁的設計政策上我們對各子產品内容之間保持充分的留白空間,簡化分割線的運用,讓界面更加簡潔清爽;

而對于資訊傳達的效率而言,我們運用了卡片化的設計來組織各子產品的功能結構,卡片使頁面資訊更加聚焦,能幫助使用者在浏覽中更快更高效地識别有效資訊;同時配合使用大圓角的設計語言,讓頁面視覺上更具有親和力,也符合我們年輕的使用者基調。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

2)頁面層級化繁為簡

使用者擷取資訊的效率主要由層級關系間的秩序來主導的,我們依托于卡片的基礎架構,通過對不同圖形、顔色,字型,字号的運用,對首頁各功能子產品進行優先級的區分,為使用者打造不同的閱讀感受。金剛位圖示統一采用漸變色的填充樣式,提高色彩飽和度,搭配輕質感風格,使核心業務功能更加突出,便于使用者快速識别到有效資訊。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

3)大圖突顯内容品質

由于經常産品對于頁面空間利用的苛刻,我們的圖檔比例常常會被壓縮得很小很窄,進而犧牲了圖檔品質。那麼為了更好地幫助使用者去閱讀圖檔的資訊内容,我們統一對清單頁瀑布流的圖檔設計坑位進行了擴大展示,來突出圖檔的品質和吸引力。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

1)強化關鍵内容資訊

詳情頁是商品價值與資訊的窪地,使用者需要在衆多内容中做出決策,那麼對詳情頁重要資訊的突出則是提升使用者決策效率的關鍵。在套餐商品詳情的設計政策上我們主要做了以下幾件事:

強化價格資訊的視覺重心,重點突出折扣價對比;

在價格下方同時露出立減金額的标簽,同樣是1000元的商品,直降100元和打9折在數額上雖然沒有任何差別,但是使用者會覺得直降100元的優惠力度更大,更好地提升使用者的感覺價值;

增加使用者購買記錄的氣泡提示,給使用者一種值得買的心理暗示,利用從衆心理去刺激使用者下單購買;3.底部新增分享賺錢懸浮按鈕,對使用者進行利益引導,刺激使用者行為。

而話費充值詳情在設計上也是采用了相同的政策,強化突出價格内容。此外我們增加了限時限量标簽訓示,短時效的限定會給予使用者更強烈的緊迫感,讓使用者産生機不可失時不再來的氛圍,讓使用者對商品産生稀缺的感應,利用搶購心理,促使使用者快速地決策。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

2)簡化支付行為路徑

當支付流程的路徑相對較深時,可能會導緻使用者産生操作效率較低的認知,容易中斷操作流程,從導緻使用者的流失。

是以在産品設計上我們借助微信生态便捷支付的屬性,減少了頁面之間過多的層級跳轉,以達到簡化支付路徑的目的,讓使用者的購買行為更加地順暢,進一步提升使用者決策效率,下圖主要以套餐商品的支付流程為例說明。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

1)增強服務保障體驗

售後服務體驗的好壞在一定程度上影響着使用者留存以及複購意向,當使用者下單後遇到問題需要進行退款時,産品能做的就是提供及時的糾錯措施,讓使用者可以快速地解決問題,提升購買後的服務保障感。

為了增強功能操作的簡潔度,整個退款流程頁面我們延續了卡片式的視覺容器來承載内容資訊,保證視覺體驗一緻性,使使用者認知減負。

設計師的價值在哪裡?從0到1的項目中,去挖掘設計背後的價值01 寫在前面02 項目前期03 設計目标推導04 設計方案落地05 寫在最後

以上就是58生活圈從0到1的産品設計背後的思考過程,從項目前期的分析到設計目标的确認,再到後續拆分到不同次元去進行功能設計的落地,最終完整地呈現在使用者面前。

作為設計師,我覺得最重要的就是跳出畫圖仔的桎梏,拓寬自己的邊界,将設計從表現和執行抽離往前後延展,在整個設計過程過中,往前深挖需求和業務目标,往後做到把控和沉澱,發揮設計師最大的價值,做出對業務和使用者體驗都好的設計。

作者:胡希,視覺設計師

本文來源于人人都是産品經理合作媒體@58使用者體驗設計中心(微信公衆号@58uxd),作者@胡希

題圖來自pexels,基于cc0協定

繼續閱讀