▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們
本文共 4164 字，預(yù)計(jì)閱讀 11 分鐘
TCC 情報(bào)局的 第 106 篇 干貨分享
2022 年的 第 4 篇
TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是李澤慧。BimaPe是一款一家印度的保險(xiǎn)科技行業(yè)的初創(chuàng)公司。他們的產(chǎn)品非常具有創(chuàng)新性并且對(duì)用戶來(lái)說(shuō)非常有用。但很多時(shí)候一些網(wǎng)站上的功能和福利用戶并不能發(fā)現(xiàn)或者不會(huì)使用，這就像在我們?nèi)粘５脑O(shè)計(jì)中，雖然作為設(shè)計(jì)師我們?cè)O(shè)計(jì)了很多功能，但是用戶根本不能理解到功能到底是什么，如何使用，那這無(wú)疑就是很大的敗筆。作者在本文中不僅分享了設(shè)計(jì)流程，同時(shí)也分享了設(shè)計(jì)決策和背后的邏輯，而這往往也是我們做設(shè)計(jì)最重要的支撐。那就讓我們一起來(lái)閱讀學(xué)習(xí)一下吧！
在這個(gè)案例研究中，我將闡述再設(shè)計(jì) BimaPe 網(wǎng)站登陸頁(yè)面的過(guò)程。在下面將分享整個(gè)設(shè)計(jì)流程、設(shè)計(jì)決策和背后的邏輯。
BimaPe登錄頁(yè)重設(shè)計(jì)
1. 免責(zé)聲明
1. Disclaimer
該項(xiàng)目是10K 設(shè)計(jì)師 頂點(diǎn)項(xiàng)目[1] 的一部分。
( [1] 頂點(diǎn)項(xiàng)目（Capstone Project）: 是美國(guó)中學(xué)或高校階段針對(duì)臨近畢業(yè)的高年級(jí)學(xué)生開設(shè)的一種綜合性課程。這是一種讓學(xué)生整合并充分利用所學(xué)領(lǐng)域的知識(shí)，同時(shí)培養(yǎng)相關(guān)技能和態(tài)度的課程。又稱為頂點(diǎn)單元、頂點(diǎn)體驗(yàn)或高級(jí)研討會(huì)。這類課程一般開設(shè)在實(shí)用性很強(qiáng)的專業(yè)中。)
2. 關(guān)于 BimaPe
2. About BimaPe
BimaPe 是一家印度的保險(xiǎn)科技行業(yè)的初創(chuàng)公司。他們的產(chǎn)品非常具有創(chuàng)新性并且對(duì)用戶來(lái)說(shuō)非常有用。該產(chǎn)品可幫助用戶管理現(xiàn)有的保險(xiǎn)單、簡(jiǎn)化保險(xiǎn)流程并找到隱藏的可獲取的保險(xiǎn)福利。
3. 為什么選擇 BimaPe
3. Why BimaPe
1. 我發(fā)現(xiàn)這個(gè)產(chǎn)品很有趣。
2. 我意識(shí)到 BimaPe 網(wǎng)站有可改進(jìn)的空間。
3. 我在保險(xiǎn)行業(yè)有一些經(jīng)驗(yàn)，所以我對(duì)這個(gè)重設(shè)計(jì)的例子很感興趣。
4. 問(wèn)題陳述
4. Problem Statement
經(jīng)過(guò)一些訪談?wù){(diào)研，我發(fā)現(xiàn)人們并不完全了解 BimaPe 網(wǎng)站是做什么的。即使他們知道 BimaPe 的大致功能，但仍不知道它可以幫助自己完成怎樣的事情，所以再設(shè)計(jì)的 BimaPe 網(wǎng)站 可以幫助用戶更好地了解網(wǎng)站的定義。1.“BimaPe”這個(gè)名字讓人摸不著頭腦。如果你屬于這一類人，讓我來(lái)告訴你，Bima = 保險(xiǎn)。（也許你和我的年紀(jì)差不多，在家里可能聽爺爺奶奶的談起過(guò)，但大家不知道 Bima 的意思也不足為奇。）2. 人們也許將“BimaPe”誤解為PhonePe、BhimPe、Gpay（支付）之類的東西，即屬于金融科技的公司，因?yàn)樗哪┪彩恰癙e”。3. 針對(duì) BimaPe 設(shè)計(jì)的可用性，我們經(jīng)過(guò)用戶訪談并與內(nèi)部設(shè)計(jì)師進(jìn)行討論 ，得出的結(jié)果是用戶很難理解 BimaPe 到底是做什么的。
圖片大致意思是在網(wǎng)上有很多人不是非常了解Bima是做保險(xiǎn)的大家對(duì)以前從未聽說(shuō)過(guò)或從未遇到過(guò)的東西存在誤解是可以理解的。??所以現(xiàn)在的目標(biāo)是讓用戶充分了解 BimaPe 的功能。用戶在閱讀或查看新事物之前通常不會(huì)考慮太多。他們?yōu)g覽屏幕的時(shí)候，只是想了解“這里將會(huì)發(fā)生什么”、“這是我要找的東西嗎”、“這個(gè)網(wǎng)站是否能夠滿足我的需求”。??所以我們重設(shè)計(jì)的目的是 在用戶帶著問(wèn)題瀏覽頁(yè)面時(shí)幫助用戶集中注意力，確保他們充分地了解產(chǎn)品。有時(shí)我在想，我到底是一個(gè)設(shè)計(jì)師還是一個(gè)心理學(xué)學(xué)生，但這并不重要，因?yàn)檫@只是一個(gè)設(shè)計(jì)師必須要扮演的另一個(gè)角色。說(shuō)完了我的想法，讓我們開始吧！5. 信息架構(gòu)
5. Information Architecture
在當(dāng)前實(shí)時(shí)登錄頁(yè)面中，一個(gè)令人困惑的部分是 —— 主頁(yè)對(duì) BimaPe 網(wǎng)站功能的暗示很微弱，但隨后在網(wǎng)頁(yè)的第三部分，它才闡述了網(wǎng)站的主要功能，回答了用戶這幾個(gè)問(wèn)題：據(jù)統(tǒng)計(jì)，40% 的用戶不會(huì)忽略網(wǎng)站首圖上的內(nèi)容。即使他們跳過(guò)了，也已經(jīng)消耗了大量的精力，當(dāng)他們?yōu)g覽到第三部分遇到最重要的信息時(shí)，（再次遇到需要解釋的內(nèi)容）可能會(huì)使他們感到困惑。我們重設(shè)計(jì)的 3 個(gè)目標(biāo)是——我決定通過(guò)重新排版來(lái)解決這一問(wèn)題，如下圖的信息架構(gòu)所示。
6. 網(wǎng)站首頁(yè)
6. Hero Section
我喜歡網(wǎng)站原本的字體和配色方案，并決定繼續(xù)沿用原有字體和配色方案。它的外觀給用戶一種簡(jiǎn)約的感覺，并且這種配色方案有助于建立用戶對(duì)網(wǎng)站的信任。1. 刪除了導(dǎo)航欄中的“開始”行動(dòng)按鈕。在首圖中，你可以看到 3 個(gè)將用戶帶到同一個(gè)屏幕的行動(dòng)按鈕，這并沒有什么問(wèn)題，但由于所有行動(dòng)按鈕都導(dǎo)航向同一個(gè)頁(yè)面，因此刪除后會(huì)讓用戶不那么困惑。2. 將 AIDA 原則[2] 應(yīng)用于網(wǎng)站首圖的排版布局，并添加了更多有趣的內(nèi)容。([2] AIDA是四個(gè)英文單詞的首字母：A為Attention，即引起注意；I為Interest，即誘發(fā)興趣；D為Desire，即刺激欲望；最后一個(gè)字母A為Action，即促成購(gòu)買。AIDA模式也稱“愛達(dá)”公式，是艾爾莫·李維斯Elmo Lewis 在1898年首次提出總結(jié)的推銷模式,是西方推銷學(xué)中一個(gè)重要的公式，AIDA模型可以看作是用戶做購(gòu)買決策的整個(gè)行為過(guò)程，從引起注意到最終的購(gòu)買行為的過(guò)程。)3. 為了明確意圖，舊版網(wǎng)站聲明“為每個(gè)人簡(jiǎn)化保險(xiǎn)”并描述了 BimaPe 功能所帶來(lái)的便利。我通過(guò)列出這些福利，并在網(wǎng)頁(yè)的后半部分滾動(dòng)鏈接到那些獲取福利的功能，使之在視覺上更加清晰和容易理解。4. 明確地告知用戶擁有的資源以及能通過(guò)BimaPe獲得的福利非常重要，因?yàn)?BimaPe 仍是一家新的初創(chuàng)公司，它仍在為產(chǎn)品和更好的業(yè)務(wù)建立自己的受眾群體。
7. 了解你的保險(xiǎn)
7. Know Your Insurance
1. 舊版網(wǎng)站通過(guò)表格分節(jié)視圖對(duì)這一功能進(jìn)行了解釋。我決定給它們歸納成一個(gè)單獨(dú)的部分，以便用戶能夠清楚地注意到它們，也知道它是如何工作的。
4. 作為用戶，常常會(huì)猶豫是否要通過(guò)互聯(lián)網(wǎng)上傳他們的私人文件，顯示該功能工作的步驟 / 流程將有助于消除用戶對(duì)產(chǎn)品的所有疑慮，幫助用戶建立信心并讓用戶感覺一切都在自己的掌控之中。
8. 錢包
8. Wallet
1. 舊版網(wǎng)站同樣頁(yè)通過(guò)表格分節(jié)視圖對(duì)此功能進(jìn)行了解釋。我也決定給它們歸納成一個(gè)單獨(dú)的部分進(jìn)行描述，以便用戶能夠清楚地注意到它們。3. 與首頁(yè)保持一致的 CTA 文案，即“成為會(huì)員”4. 通過(guò)更好的 高保真讓用戶更真實(shí)地了解 APP。錢包是為上面稱為“管理您的政策”的福利服務(wù)的功能。9. 發(fā)現(xiàn)福利
9. Discover Benefits
1. 舍棄那令人困惑和自信的文案“您已經(jīng)投保”，取而代之的是“您可能已經(jīng)投保了，進(jìn)來(lái)看看其他的福利”。它為用戶創(chuàng)造了新的刺激和希望，并獲得了用戶的關(guān)注。2. 社交和工作證明是網(wǎng)頁(yè)上最常出現(xiàn)的內(nèi)容之一。在這里沒有太大的必要顯示，所以去掉了它，而且我們?cè)谇懊娴氖醉?yè)部分已經(jīng)清楚地提到了它。3. 舊版網(wǎng)站沒有告知用戶在哪里和如何發(fā)現(xiàn)福利，所以我添加了不同領(lǐng)域的卡片，為用戶提供更多的細(xì)節(jié)。10. 評(píng)論
10. Reviews
我喜歡舊版網(wǎng)站中評(píng)論卡片的制作方式，簡(jiǎn)單明了。但我想給這個(gè)部分一個(gè)更簡(jiǎn)約的視圖，以使其與我的設(shè)計(jì)版本保持一致。
1. 在屏幕上一次 保留 1 條評(píng)論以獲得更多負(fù)空間。2. 舍棄了底部的灰色滾動(dòng)條。它不是很明顯，因?yàn)樗雌饋?lái)像一個(gè)分區(qū)分隔符，一些用戶也將它誤解為加載欄。增加了帶有顏色的虛線滾動(dòng)指示器，以帶來(lái)更好的美感并讓用戶更易理解。3. 原始設(shè)計(jì)中的卡片不使用鼠標(biāo)水平滾動(dòng)，只能通過(guò)觸控板和水平滾動(dòng)條滾動(dòng)，增加了兩側(cè)的箭頭按鈕來(lái)滾動(dòng)瀏覽卡片。11. 常問(wèn)問(wèn)題
11. FAQ
我喜歡常見問(wèn)題解答的設(shè)計(jì)，它簡(jiǎn)單、易于瀏覽且極簡(jiǎn)。這完全是我的設(shè)計(jì)風(fēng)格，并且與我當(dāng)前的版本很相配。所以我決定通過(guò)改變背景的顏色來(lái)推進(jìn)這部分。12. 最終的 CTA 和按鈕導(dǎo)航
12. Final CTA and Botton Navigation
1. 喜歡標(biāo)題的文案，所以保持一致，但添加了一個(gè)子標(biāo)題，以表明 BimaPe 只是一個(gè)增強(qiáng)體驗(yàn)的工具，但控制和管理保險(xiǎn)的真正權(quán)力仍然在于用戶。這給了用戶很大的信心和控制感。2. 一個(gè)更好的布局頁(yè)腳是考慮到保持一致性。將上圖的漸變添加到頁(yè)腳，以便將頁(yè)腳的那部分微妙地包含在網(wǎng)站的頁(yè)腳中，因?yàn)槲蚁Ｍ弦?guī)要求的內(nèi)容以不同的方式看待。為什么？為了給合規(guī)機(jī)構(gòu)或其他關(guān)注的人提供一個(gè)清晰而獨(dú)特的視角。
13. 網(wǎng)站圖標(biāo)
13. Favicon
如果你也把它讀成“Fevicol”，來(lái)?yè)魝€(gè)掌。抱歉，無(wú)論如何，我知道這很糟糕。瀏覽器上有太多活動(dòng)標(biāo)簽，很難找到BimaPe 網(wǎng)站的標(biāo)簽。清晰獨(dú)特的網(wǎng)站圖標(biāo)可以幫助用戶快速找到標(biāo)簽以獲得更好的體驗(yàn)。在當(dāng)前的圖標(biāo)圖標(biāo)中很難閱讀“BimaPe”，我建議使用用于郵寄的相同圖標(biāo)（沒有那個(gè)鼠標(biāo)）。14. 如何做的更好？
14. What could I have done better?
1. 如果我對(duì)具體業(yè)務(wù)方向更了解，我可以進(jìn)行更好的研究。2. 如果我是 BimaPe 團(tuán)隊(duì)的一員，我將能夠根據(jù)業(yè)務(wù)需求和數(shù)據(jù)做出更好的設(shè)計(jì)決策，以滿足業(yè)務(wù)目標(biāo)。3. 總是有更好的美學(xué)空間可以發(fā)揮，用戶喜歡更美的東西。
原文：https://uxplanet.org/ui-ux-case-study-bimape-landing-page-redesign-fe4d2f613f20本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
- 設(shè)計(jì)師自習(xí)社區(qū) -TCC 設(shè)計(jì)情報(bào)局歡迎小伙伴加入，一起交流設(shè)計(jì)知識(shí)，了解全球設(shè)計(jì)資訊，鍛煉英文能力，發(fā)掘更多可能性～
