▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 4164 字，预计阅读 11 分钟
TCC 情报局的第 106 篇干货分享
2022 年的第 4 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。BimaPe是一款一家印度的保险科技行业的初创公司。他们的产品非常具有创新性并且对用户来说非常有用。但很多时候一些网站上的功能和福利用户并不能发现或者不会使用，这就像在我们日常的设计中，虽然作为设计师我们设计了很多功能，但是用户根本不能理解到功能到底是什么，如何使用，那这无疑就是很大的败笔。作者在本文中不仅分享了设计流程，同时也分享了设计决策和背后的逻辑，而这往往也是我们做设计最重要的支撑。那就让我们一起来阅读学习一下吧！

在这个案例研究中，我将阐述再设计 BimaPe 网站登陆页面的过程。在下面将分享整个设计流程、设计决策和背后的逻辑。

BimaPe登录页重设计

1. 免责声明

1. Disclaimer

该项目是10K 设计师 顶点项目[1] 的一部分。

( [1] 顶点项目（Capstone Project）: 是美国中学或高校阶段针对临近毕业的高年级学生开设的一种综合性课程。这是一种让学生整合并充分利用所学领域的知识，同时培养相关技能和态度的课程。又称为顶点单元、顶点体验或高级研讨会。这类课程一般开设在实用性很强的专业中。)

2. 关于 BimaPe

2. About BimaPe

BimaPe 是一家印度的保险科技行业的初创公司。他们的产品非常具有创新性并且对用户来说非常有用。该产品可帮助用户管理现有的保险单、简化保险流程并找到隐藏的可获取的保险福利。

3. 为什么选择 BimaPe

3. Why BimaPe

1. 我发现这个产品很有趣。

2. 我意识到 BimaPe 网站有可改进的空间。

3. 我在保险行业有一些经验，所以我对这个重设计的例子很感兴趣。

4. 问题陈述

4. Problem Statement

经过一些访谈调研，我发现人们并不完全了解 BimaPe 网站是做什么的。

即使他们知道 BimaPe 的大致功能，但仍不知道它可以帮助自己完成怎样的事情，所以再设计的 BimaPe 网站 可以帮助用户更好地了解网站的定义。

1.“BimaPe”这个名字让人摸不着头脑。

尤其是那些不了解“Bima”一词含义的人。

如果你属于这一类人，让我来告诉你，Bima = 保险。

（也许你和我的年纪差不多，在家里可能听爷爷奶奶的谈起过，但大家不知道 Bima 的意思也不足为奇。）

2. 人们也许将“BimaPe”误解为PhonePe、BhimPe、Gpay（支付）之类的东西，即属于金融科技的公司，因为它的末尾是“Pe”。

3. 针对 BimaPe 设计的可用性，我们经过用户访谈并与内部设计师进行讨论，得出的结果是用户很难理解 BimaPe 到底是做什么的。

图片大致意思是在网上有很多人不是非常了解Bima是做保险的

大家对以前从未听说过或从未遇到过的东西存在误解是可以理解的。🚩所以现在的目标是让用户充分了解 BimaPe 的功能。

用户在阅读或查看新事物之前通常不会考虑太多。他们浏览屏幕的时候，只是想了解“这里将会发生什么”、“这是我要找的东西吗”、“这个网站是否能够满足我的需求”。

🚩所以我们重设计的目的是 在用户带着问题浏览页面时帮助用户集中注意力，确保他们充分地了解产品。

有时我在想，我到底是一个设计师还是一个心理学学生，但这并不重要，因为这只是一个设计师必须要扮演的另一个角色。说完了我的想法，让我们开始吧！

5. 信息架构

5. Information Architecture

在当前实时登录页面中，一个令人困惑的部分是 —— 主页对 BimaPe 网站功能的暗示很微弱，但随后在网页的第三部分，它才阐述了网站的主要功能，回答了用户这几个问题：

据统计，40% 的用户不会忽略网站首图上的内容。即使他们跳过了，也已经消耗了大量的精力，当他们浏览到第三部分遇到最重要的信息时，（再次遇到需要解释的内容）可能会使他们感到困惑。

我们重设计的 3 个目标是——

我决定通过重新排版来解决这一问题，如下图的信息架构所示。

6. 网站首页

6. Hero Section

我喜欢网站原本的字体和配色方案，并决定继续沿用原有字体和配色方案。它的外观给用户一种简约的感觉，并且这种配色方案有助于建立用户对网站的信任。

我将做如下更改：

1. 删除了导航栏中的“开始”行动按钮。在首图中，你可以看到 3 个将用户带到同一个屏幕的行动按钮，这并没有什么问题，但由于所有行动按钮都导航向同一个页面，因此删除后会让用户不那么困惑。

2. 将 AIDA 原则[2] 应用于网站首图的排版布局，并添加了更多有趣的内容。

([2] AIDA是四个英文单词的首字母：A为Attention，即引起注意；I为Interest，即诱发兴趣；D为Desire，即刺激欲望；最后一个字母A为Action，即促成购买。AIDA模式也称“爱达”公式，是艾尔莫·李维斯Elmo Lewis 在1898年首次提出总结的推销模式,是西方推销学中一个重要的公式，AIDA模型可以看作是用户做购买决策的整个行为过程，从引起注意到最终的购买行为的过程。)

3. 为了明确意图，旧版网站声明“为每个人简化保险”并描述了 BimaPe 功能所带来的便利。我通过列出这些福利，并在网页的后半部分滚动链接到那些获取福利的功能，使之在视觉上更加清晰和容易理解。

4. 明确地告知用户拥有的资源以及能通过BimaPe获得的福利非常重要，因为 BimaPe 仍是一家新的初创公司，它仍在为产品和更好的业务建立自己的受众群体。

7. 了解你的保险

7. Know Your Insurance

1. 旧版网站通过表格分节视图对这一功能进行了解释。我决定给它们归纳成一个单独的部分，以便用户能够清楚地注意到它们，也知道它是如何工作的。

2. 改进了 描述该功能的文本。

3. 添加了 更多的空白以更好地浏览。

4. 作为用户，常常会犹豫是否要通过互联网上传他们的私人文件，显示该功能工作的步骤 / 流程将有助于消除用户对产品的所有疑虑，帮助用户建立信心并让用户感觉一切都在自己的掌控之中。

8. 钱包

8. Wallet

1. 旧版网站同样页通过表格分节视图对此功能进行了解释。我也决定给它们归纳成一个单独的部分进行描述，以便用户能够清楚地注意到它们。

2. 同样地，改进了描述该功能的文本。

3. 与首页保持一致的 CTA 文案，即“成为会员”

4. 通过更好的 高保真让用户更真实地了解 APP。

钱包是为上面称为“管理您的政策”的福利服务的功能。

9. 发现福利

9. Discover Benefits

1. 舍弃那令人困惑和自信的文案“您已经投保”，取而代之的是“您可能已经投保了，进来看看其他的福利”。它为用户创造了新的刺激和希望，并获得了用户的关注。

2. 社交和工作证明是网页上最常出现的内容之一。在这里没有太大的必要显示，所以去掉了它，而且我们在前面的首页部分已经清楚地提到了它。

3. 旧版网站没有告知用户在哪里和如何发现福利，所以我添加了不同领域的卡片，为用户提供更多的细节。

4. 将 CTA 文案更改为第一人称。

10. 评论

10. Reviews

我喜欢旧版网站中评论卡片的制作方式，简单明了。但我想给这个部分一个更简约的视图，以使其与我的设计版本保持一致。

所以我决定：

1. 在屏幕上一次 保留 1 条评论以获得更多负空间。

2. 舍弃了底部的灰色滚动条。它不是很明显，因为它看起来像一个分区分隔符，一些用户也将它误解为加载栏。增加了带有颜色的虚线滚动指示器，以带来更好的美感并让用户更易理解。

3. 原始设计中的卡片不使用鼠标水平滚动，只能通过触控板和水平滚动条滚动，增加了两侧的箭头按钮来滚动浏览卡片。

11. 常问问题

11. FAQ

我喜欢常见问题解答的设计，它简单、易于浏览且极简。这完全是我的设计风格，并且与我当前的版本很相配。所以我决定通过改变背景的颜色来推进这部分。

不要想着做一些不必要的改变

12. 最终的 CTA 和按钮导航

12. Final CTA and Botton Navigation

1. 喜欢标题的文案，所以保持一致，但添加了一个子标题，以表明 BimaPe 只是一个增强体验的工具，但控制和管理保险的真正权力仍然在于用户。这给了用户很大的信心和控制感。

2. 一个更好的布局页脚是考虑到保持一致性。将上图的渐变添加到页脚，以便将页脚的那部分微妙地包含在网站的页脚中，因为我希望合规要求的内容以不同的方式看待。为什么？为了给合规机构或其他关注的人提供一个清晰而独特的视角。

13. 网站图标

13. Favicon

如果你也把它读成“Fevicol”，来击个掌。抱歉，无论如何，我知道这很糟糕。

浏览器上有太多活动标签，很难找到BimaPe 网站的标签。清晰独特的网站图标可以帮助用户快速找到标签以获得更好的体验。

在当前的图标图标中很难阅读“BimaPe”，我建议使用用于邮寄的相同图标（没有那个鼠标）。

14. 如何做的更好？

14. What could I have done better?

1. 如果我对具体业务方向更了解，我可以进行更好的研究。

2. 如果我是 BimaPe 团队的一员，我将能够根据业务需求和数据做出更好的设计决策，以满足业务目标。

3. 总是有更好的美学空间可以发挥，用户喜欢更美的东西。

原文：https://uxplanet.org/ui-ux-case-study-bimape-landing-page-redesign-fe4d2f613f20

作者：Jeevanshu Narang

译者：刘昱茜

审核：吴鹏飞、李泽慧、张聿彤

编辑：孙淑雅

本文翻译已获得作者的正式授权（授权截图如下）

往期精选文章：

添加小助手微信，备注「社群」，即可加入读者群。

研究案例 | BimaPe 登陆页面重新设计

本文共 4164 字，预计阅读 11 分钟
TCC 情报局的第 106 篇干货分享
2022 年的第 4 篇

1. 免责声明

1. Disclaimer

2. 关于 BimaPe

2. About BimaPe

3. 为什么选择 BimaPe

3. Why BimaPe

4. 问题陈述

4. Problem Statement

5. 信息架构

5. Information Architecture

6. 网站首页

6. Hero Section

7. 了解你的保险

7. Know Your Insurance

8. 钱包

8. Wallet

9. 发现福利

9. Discover Benefits

10. 评论

10. Reviews

11. 常问问题

11. FAQ

12. 最终的 CTA 和按钮导航

12. Final CTA and Botton Navigation

13. 网站图标

13. Favicon

14. 如何做的更好？

14. What could I have done better?

十个技巧帮助你设计一款在线学习 APP

这些 色彩心理学知识教你如何传递信息

案例研究｜康奈尔大学副业社区网站设计

网页设计师能从日式美学中学到什么？

案例研究｜一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集，这里有一份完整的指导手册

如何做好用户体验项目？从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求：回归本质，打磨信息架构

TCC 视野｜2021 年用户体验设计趋势分析

研究案例 | BimaPe 登陆页面重新设计

本文共 4164 字，预计阅读 11 分钟TCC 情报局的 第 106 篇 干货分享2022 年的 第 4 篇

1. 免责声明

1. Disclaimer

2. 关于 BimaPe

2. About BimaPe

3. 为什么选择 BimaPe

3. Why BimaPe

4. 问题陈述

4. Problem Statement

5. 信息架构

5. Information Architecture

6. 网站首页

6. Hero Section

7. 了解你的保险

7. Know Your Insurance

8. 钱包

8. Wallet

9. 发现福利

9. Discover Benefits

10. 评论

10. Reviews

11. 常问问题

11. FAQ

12. 最终的 CTA 和按钮导航

12. Final CTA and Botton Navigation

13. 网站图标

13. Favicon

14. 如何做的更好？

14. What could I have done better?

本文共 4164 字，预计阅读 11 分钟
TCC 情报局的第 106 篇干货分享
2022 年的第 4 篇