案例研究：能够提高转化率的邮件设计系统—Naukri设计项目
UI & UX
Article：2022/06/30
欢迎来到「NEW案例三分钟」栏目~「NEW案例三分钟」是由美国交互设计资讯连载的关于交互设计的案例分享栏目，每周为大家更新不同类型的UI&UX设计案例，希望大家在阅读案例的研究过程有所收获~
今天分享的案例来自产品设计师Sheya Basak，是此项目中唯一设计工作贯穿始终的设计师。此项目为印度最大的求职招聘网站Naukri.com创建邮件设计系统：
为什么我们需要邮件
· 在所有社交媒体营销工具中，电子邮件是最受欢迎的、预算友好且投资回报率最高的工具
· Naukri India上的大量流量来自邮件发送者
· 它可以是一个再次将“死用户”转换为“活跃用户”的很好的工具
为什么我们需要邮件设计系统
1.与任何其他设计系统一样，邮件设计系统为任何业务增加了灵活性和可扩展性；
2.通过编写常见的电子邮件组件、提高电子邮件的一致性以及指导团队如何创建适当的电子邮件来节省时间和金钱；
3.一些电子邮件营销计划将其电子邮件的制作分散开来。这意味着多个团队可能会处理一封电子邮件。这创造了一个电子邮件可能如此的环境：
· 因为没有共享的电子邮件设计记录，而导致设计的不一致和非品牌性。
· 因为需要花费大量时间重新创建相同的组件，而导致制作成本高昂。
· 因为没有人专门处理电子邮件，信息经常是破碎的，人们不确定自己是否“做得对”。
为什么需要一个新的邮件设计系统
到目前为止，Naukri有一个基于组件的设计系统，该系统在产品改造之前运行良好。为什么需要一个新的呢？
由于与 Naukri.com 相关的最新设计系统和品牌标识，我们必须重新审视旧的邮件设计系统，并引入对新的设计系统的需求！
基于Naukri以前的邮件设计系统的邮件
Naukri 的新邮件设计系统是 Naukri 新品牌标识的延伸，这是一个从一开始就重新审视一切的好机会！组件、内容结构、整个理念都可以重新设计！听起来是不是很刺激？让我们开始吧！
1 初步研究
· 首先了解现有邮件的概念、其中的内容、发送时间以及结构，以了解差距。
· 查看其他各种公司的邮件，知道他们正在做些什么来使他们的邮件更具互动性。列出了这些元素并进行了编译。
· 阅读了大量邮件的最佳实践，并列出与此项目相关的内容。
· 在整个过程中，充分参考了像realgoodemails和goodmailcopy这样的网站，以获得很好的参考和想法。
以下是5大亮点：
1.针对移动设备进行优化：67% 的电子邮件都是在移动设备上打开的。理想的主题行长度、按钮大小和 CTA 位置对于创建在移动设备上呈现良好的电子邮件至关重要。
当CTA在邮件的第一部分位于顶部时，通常在第一个滚动的主标题之后，点击率会高得多
2.为每封电子邮件设定目标：创建清晰、引人注目的 CTA
3.让用户感觉良好并展示您的关心：邮件是一个可以为每一点添加个性化的很好的空间，根据用户体验定制您的消息可以激发他们的兴趣，并建立对您的产品的信任。
4.不要让您的订阅者不堪重负：没有人有时间阅读冗长的电子邮件
5.保持简单：并非每封电子邮件都需要用惊喜来包装。在处理交易电子邮件时，最好保持透明。
2 组件构建
从之前的分析中可以清楚地了解到需要哪些组件。使用新的Naukri设计系统构建组件。
当在设计实际邮件发送程序时发现新的需求时，组件库就会扩展。
组件库概览
3 建立风格指南
从设计师个人的经验来看，这是一个不断发展的步骤。你可以在一开始就像我一样有一个关于如何去做的初步想法。从Naukri的设计系统中，我知道要使用什么颜色和排版。
但是，为了真正制定使用颜色和排版的指南，我们必须开始设计邮件，看看它是如何结合在一起的。这样做后，就为邮件设计系统制定了以下指导原则。
版式指南示例
4 布局和间距
布局和网格在开始邮件程序之前确定的，但间距是在完成一些邮件程序后才确定的，这有助于我们确定某些组件和用例之间的正确间距。
任何事先做出的决定要么来自最佳实践，要么来自我们之前的经验教训
5 定义邮件结构
这是最有趣的部分。对于流程中的这一步，设计师使用了多个来源来找出表现良好的邮件程序的模式。对于 Naukri 的邮件程序，我们遵循包含三个部分的基本邮件程序结构。
第一部分
第一部分太重要了。它可以帮助用户决定是否要继续阅读完整的邮件。
1.邮件的主标题（H1）
邮件标题应给出邮件的完整描述，然后是基于该标题引导的特定操作的CTA。
2.开场插图
是否具有插图取决于邮件的性质。使用相关插图是为了唤起各种用户情绪，如满足感、错失恐惧，并吸引用户的注意力。
3. 主要 CTA
开头部分具有最明确的行为号召，它指定了用户所需的主要操作。理想情况下，文案应具有可操作性和精确性。建议CTA文案尽量精简。
第二部分
这部分详细说明了邮件的主要用途。具体而言，目的是说服用户充分执行上述操作。
第三部分
基本上，本部分包含了所有有用的信息。第三部分也可以是专业提示或你知道吗。根据邮件的性质和要传达的信息，这也可以省略。
邮件标题
不要低估一个好标题的力量！标题是第一印象（也可能是最后一个）。在许多方面，电子邮件标题比电子邮件正文更重要。
当每天我们都会收到大量电子邮件时，标题中的几个关键词可以帮助我们确定电子邮件是否值得打开。
编写标题时要记住的3点建议
1.保持简短和重点突出，并在开头包含最重要的关键词。
2.参考成功的电子邮件标题示例。
3.对标题进行A/B测试。这种方法总是很有效，并能准确地告诉您什么适合您的用户。
技巧
找出正确的标题是一项具有挑战性的任务！所以设计师分享了一个“标题选择器”技巧，每次对其都有帮助！
设计师选择正确标题的诀窍
· 列出了能想到的所有有趣的标题，并从中选出前5或前6个。
· 把这些标题放在手机屏幕上，看看有多少内容被截断了。
· 写下那些被截断的标题，并提及从这些字符中引发的情感。
· 用颜色对这些情绪进行分级，最强烈的是深红色，强度较低的是浅红色。
这使设计师更容易做出决定，并将这些选项呈现给其他设计师。
让我们来看看成果！邮件是使用新的邮件设计系统制作的：
Naukri 的欢迎邮件示例
改造后产生了什么影响
· 第一部分的顶部CTA上有了84%的点击率。
· 总体而言，点击率提高，退订率下降了8-10%。
最后我们一起来看看设计师的回顾吧~
定义整个邮件设计系统从一开始就是一个有良好影响的旅程。在这个过程中，我们能学到很多东西，例如：
1.了解了邮件设计系统本身的重要性，以及创建适当的设计指南的重要性。
2.学到了一个好的标题的重要性，以及如何仅用几个字符帮助用户决定是否要点击打开邮件。
3.了解了邮件的很多约束条件，例如：
· 渐变、阴影不会在所有客户端中呈现
· 图片/插图需要花费大量时间来渲染，我们可使用替代文本来使图片/图标易于理解
· 并非所有客户端都支持GIF，因此如果没有重要信息，则应谨慎使用
对于初级设计师来说，积累知识与个人实践项目是现阶段最重要的。除了自己结合系统与碎片的学习之外，更需要实战来产出作品~美国交互设计资讯在7月-9月为设计师们推出了交互设计1.0实战营，一起来搞创作！
（部分图文来自网络，若有侵权，请联系删除。）
加入UI&UX交流社群~
设计资源/书籍资源/知识互动
还有更多神秘福利！
一起创作更好的设计~
往期推荐 | Read More
不止于设计！U Design Week！2022 U设计周今日开票，大会全攻略出炉！
心动！「拿捏」交互设计1.0实战营重磅来袭！4周入门交互设计！6周搞定实战项目！
写给交互设计初学者？来看看12个设计创作方向和10个Ui基本元素！
文字丨Jelly
编辑丨Jelly
如果觉得我们做的还不错点个赞和在看吧！：