案例研究：能够提高转化率的邮件设计系统—Naukri设计项目

欢迎来到 「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点建议

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

如果觉得我们做的还不错点个赞和在看吧！ ：