首頁改版復盤 | 設計流程的那些坑
公司理財APP最近完成了一次首頁拉新頁的改版,我通過對這次改版的復盤,總結了在設計流程不夠完善的公司可能遇到的一些坑,以及應對方式,希望能夠幫助到屏幕前的你~
目錄
- 中小型公司設計流程存在的不足
- 項目復盤——遇到了哪些坑
- 如何應對這些坑
- 設計思路
- 最終效果
前言
經常能看到各個論壇或者設計交流群,有UI設計師詢問自己沒有人帶該如何提升,或者是項目配置不完善、產品的審美很不好、一直返工修改、公司的產品很難看+難用就是不改版、設計師推動力不足等等抱怨。
手上正好有一個比較典型的例子,從中遇到的種種坑大家也許也遇到過、或者正在苦惱著,希望能幫助到你。
一、中小型公司的不足主要體現在哪?
- 人員配置較少,經常沒有明確的崗位劃分。公司不會固定一個固定的崗位給你。這導致的結果是,你必須要全能,但無法專精。就拿很多公司還沒有設立的交互崗位來舉例,交互這個事,可能是產品做、設計做、還有可能是運營做,所以還有職責分工不明確的問題在。
- 研發流程不確定因素太多,很多時候根本不按正常流程來,這也是受工作較為密集的原因影響。需求往往不確定,沒有一個正常的評審流程。
- 設計師作為產品設計流程上最末尾的一環,經常還背負著背鍋的職責。
這其中也有視覺設計師自己不去思考的責任在,設計師不應該完全按照頁面原型做一個上色設計。你要記住:你也在審核這份需求,你要審核它的結構是否正確、交互是否易用好懂,符合用戶操作習慣……如果不清楚原型或者結構圖這么設計的意圖,大膽的去做溝通確認,去尋求一個更好的解決辦法。
二、項目復盤
下面,我就以這次首頁拉新頁的改版設計為例,跟大家說說我遇到的一些坑以及如何改進吧。
做了這些常規流程之外的努力之后,我順利的達到了自己的目的(首頁結構的設計按照我的想法走,愉快的通過了整個交互評審會,自己關于業務的理解也得到了肯定,整個設計的流程也很順暢),也希望能幫助到屏幕前被我的標題吸引點擊進來的你~
1. 需求坑
這次首頁拉新頁的需求是由市場部提出,在今年下半年的p2p暴雷潮之后,需要增加針對新手的關于平臺安全性、穩定性的展示,避免新手因為信息未及時觸達以及頁面設計太陳舊而流失。
收到了市場部關于需求的原型,從設計的清晰度以及排版上來說,是一份設計師看到會很開心的原型。
看起來,也就做一個入口圖,上上顏色,畫幾個icon就行了嘛。
然而站在需求層以及對比原先的首頁結構去思考,你就會發現:幾乎每一塊的結構都存在問題。
如果不認真思考把關原型的嚴謹性和合理性,設計師必然會淪為生產末期的上色工具,然后面對的是無限的返工和更改需求。
讓我們從頭開始分析這份原型:
我們這次改版目的是增加新手注冊轉化率,所以我們要做出的方向當然是跟新手需要看到的有關的。
新手想看到什么?
必然是平臺的安全性,以及自己能夠通過這個平臺獲得什么好處。
而現在用戶登錄之后的banner并不是未注冊用戶關心的和能參與的,比如【邀請好友】的banner,用戶自己都還沒注冊投錢,會去邀請好友嗎?
問題1-2:注冊立享888元紅包使用電商常見的入口圖形式
站在需求角度,這個設計是很合理的,可以吸引用戶注意,提高注冊開戶購買新手標的意向。但是從交互和視覺角度,這個結構就有待商榷了。
首先從交互上去考慮,設計這個入口的目的是什么?
是吸引用戶點擊進入新手禮的專題頁,那么,第一個banner設計的目的又是什么?
想不出來。
為什么不把入口圖直接轉化為拉新banner,而要另行卡一個入口圖在這里呢?
其次從視覺上去考慮:banner一般使用的是飽和度較高的顏色,入口圖的設計也大致如此,確實有banner跟入口圖放置在一起的成熟APP設計,但是在雙重視覺壓迫之下,用戶還能注意到下方的新手標內容嗎?
方形的banner跟橢圓形的入口圖堆在一起,下方還有一個長方形帶圓角的引導注冊主按鈕,整個頁面色彩和形狀都變得很豐富。
問題3:新手標版塊
排版很好看,幫設計師分攤了一部分工作,但是,我們還是要分析一下結構設計的合理性。
首先:我們業務上其實是有兩個新手產品的,服務期長的會比短的收益高一些。所以我們需要考慮到如果平臺兩個新手標都能購買時的展示形式。
如果我們在這個階段沒有注意到這個問題,可能面臨著設計之后,發現其實是有兩個產品需要展示,那么單純在原型上添加一個輪播指示器恐怕會讓產品的展示效率會變低。
其次:大按鈕上面的文字跟這個版塊的關聯性不大,雖然目的是引導用戶注冊,但是在標的版塊,還是放“立即投標”這類關聯性強的文字好一些。
問題4-6:版塊信息層次不夠清晰
接下來是平臺信息觸達這一塊了。所有的關于公司的信息都是用戶通過點擊一個入口,然后自己去尋覓得知的,重要的平臺數據和用戶數是通過一個副標題較弱的文字表現,信息層級顯得較弱。用戶并不能直接感受到平臺的穩定性以及用戶體量。
所以這一塊需要做的研究會很多,過程中經歷的爭執也會很多,因為每個人有自己的主觀看法,我們無法用大公司的辦法通過數據、通過用戶調研、通過灰度測試去得知我們究竟是否正確。
原型設計者也有自己的意圖和道理,我們企圖用自己的想法說服他,是否其實是自己過于主觀?
這一塊是我的感受最深的,我需要尋找一個方式,來讓大家的想法得到一個統一。
問題7:版塊意義不明
頁面最底部設計了聯系客服的功能版塊,設計者的意圖是,用戶瀏覽頁面到最后,如果有什么不懂的疑問的,可以去尋求客服的幫助。
我的想法首先是覺得奇怪,因為我使用過市面常規的APP,并沒有見過這種將客服放置在首頁并且占一個版塊的設計,所以提出了質疑,對方也很有道理,竟讓我一時之間無言以對。
這就引出我們題目中的第二個坑——流程坑:
2. 流程坑
所謂流程坑,具體指什么呢?
明顯的就是這樣一份有修改余地的交互稿,沒有經過評審,沒有進行相關的數據、用戶調研,就這么包裝成了灰度稿的模樣,試圖讓設計填個色就上線了。
那么正確的產品設計流程是什么呢?
正確的產品設計流程是:
環節缺少其中一步,必然帶來其它各個環節上的混亂,最后項目上線,反響不如預期,然后再回頭修改,互相丟鍋。
所以我試圖用自己的努力,多做一些安排之外的事情,讓整個流程回到正軌。
三、如何應對這些坑
首先:我做了一份簡略的競品分析,分析了十幾家頭部平臺的首頁拉新頁的板塊結構以及信息安排。
其實在做競品分析之前,我對拉新頁的結構設計已經有自己的想法,我需要一些論據用來一下子就說服對方,而不是通過觀點、道理說了半天也達不到想要的效果,畢竟一沒數據,二沒用戶調研,競品分析是最直接的論證方式。
正確的競品分析是你帶著自己的想法,帶著自己產品的需求去做,而不是競品做什么,我們也做吧,不去想這個設計是否真的達到了需求的目的。
競品分析只是個工具。
因為時間急迫,沒有辦法做的特別細致,我只能用最直接的方式去打動評審方。
我把自己想要放置在拉新頁面上的版塊(去掉必須放置的)和我選擇不放置但是其他平臺有此設計的版塊都統計在了一張表格上,然后一項一項的打鉤。
評審必過的我也不會去做,浪費工作精力,還可能分散對方注意力,使我的表格變成一張空乏沒有重點的分析。
因為前期調研的比較充分,我把我對于現在的原型的看法和改動意見結合競品分析以及設計想法表達了出來,也分析了很多APP拉新頁的亮點設計以及這么做的原因,大家都覺得很有道理,評審會進行的很順利,相信能減少中后期的返工和修改。
那么,我們會議上具體確定了什么?
- 跟上文問題1和2對應的,取消同步線上banner,改為主展示新手紅包banner(入口圖去掉),可能會增加展示熱門活動,先保留入口;
- 跟上文的問題3對應,同時展示兩個新手標供用戶選擇 ;
- 跟上文的問題4、5、6形式對應,平臺數據通過更直觀的形式表達,同時增加【一分鐘了解石投金融】文字鏈以及對應專題頁設計,更明顯更直觀,之前的原型稿更像一個活動頁或者是PC頁設計 ;
- 去除客服版塊設計,移入到專題頁中。
四、設計思路
接下來的工作就比較順暢了,主要面臨的是兩塊問題:
1. 對于一個上線四年的APP來說,它的視覺改版尺度把握
由于平臺設計偏老,而我們暫時只能改動這一個頁面,那么設計的風格變化肯定不能跟其他頁面的設計太過出入,然而平臺的風格又太過時,不改不行,如何既讓用戶接受,又兼顧時尚和美觀,是我接下來研究的方向。
2. 視覺改版方向
我們給這次視覺改版定了三個主要方向:
- 清晰: 用戶進入頁面,能夠直觀獲取所有信息 ;
- 簡潔: 沒有多余設計,符合金融產品干凈果斷的感覺 ;
- 特別: 不能做的跟別家同質化嚴重,這里需要增加關于品牌感的露出,要讓用戶加深對品牌的印象,只看一個頁面,也能說出這是哪家的APP。
五、最終頁面展示
(1)頁面向下瀏覽效果:
(2)設計思路:
本文由 @xll 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
這個頁面是為了提高新手注冊轉化率的,但是為什么改進后的頁面,把注冊入口的提示全去掉了
理論說服不了對方 就用數據說話 這點很棒
挺不錯的,挺有想法的
其實大公司也會有這種問題存在 感覺要解決的辦法還需要再本質一些 也求分享 我本人是業務端的 有的技術問題確實不太懂 但遇到一些看似常識性的技術問題時也很惱火
不管怎么說,本文作者的顏值還是值得欣賞的
工作態度和思維方式學習了,點贊??
其實平時工作自己的設計工作完成就不錯了,根本沒時間和精力去說服別人,不過還是向作者學習~ ?