tonik 如何重新设计 Voucherify 的网站？

快速成长是每个快速成长的初创公司的诅咒和祝福。 当新功能定期推出且目标市场发生变化时，前一年发布的网站可能已经过时。

这是一个很好的迹象，但是当您的访问者看不到您在做什么时，它同样令人讨厌。 如果您不更新您的网站，他们会根据过时的宣传来判断您。

2021 年初，Voucherify 也在处理类似的问题。 该网站没有很好地解释产品，动画非常抽象，与产品无关，风格和品牌对他们试图接触的企业、精通技术的客户没有吸引力。 柔和的色彩、抽象的插图和矿工的卡通形象还不足以让穿西装的人发笑。

其次，该网站给人的感觉是拼凑而成，而不是精心打造。 单独检查时，细微的不一致、有问题的交互和缺乏整体流程似乎没什么大不了的——但它们加在一起，给人的第一印象很差。

挑战

Voucherify 联系我们帮助他们重新设计他们的网站——这样它就可以与目标群体对话——并创建一个设计系统，让团队自己推出更多的登陆页面。 但是等等，我们是谁？

我们是数字设计工作室 tonik。 大多数时候，我们与早期创业公司合作，帮助他们推出 MVP，但这并不意味着我们不与更成熟的公司合作。 Segment、Auth0 或 Chronosphere 等客户证实了我们融入现有团队的能力。

对于这个项目，我们联合了两位设计师——Mikolaj Biernat 和 Mikolaj Szymkowiak——以及作为项目经理管理这项工作的 Aga Kaczmarek。 由于两个团队都对敏捷怀有良好的感情，我们没有设定任何硬性截止日期，而是希望在几个月内完成该项目。 那么，我们从哪里开始呢？

设计过程

在动手之前，我们概述了设计过程以定义我们将使用哪些设计方法来实现目标。 它还帮助我们估计了项目的时间表、迭代次数以及我们在每个阶段需要来自客户的反馈量。 这就是我们想出的。

创建信息架构

我们通过创建信息架构 (IA) 开始了工作。 这是一个显示所有子页面（有时也包括它们的内容）之间关系的图表，这使得导航的图像变得容易。 当我们进行网站重新设计时，我们使用 IA 来了解其内容并可视化项目的范围。

设置正确的心情

客户通常对他们希望新网站的外观有一个愿景。 布置它的最佳时机是我们创建项目的情绪板时。 它是我们用来与我们正在寻找的外观和感觉对齐的视觉参考的集合。 最好的一点是我们不会浪费时间寻找合适的形容词——基准的截图效果好几千倍。

蓝图

除了纯粹的视觉重新设计，Voucherify 的团队还想更新关键页面上的内容。 您在网站上所说的内容远比其呈现方式重要得多。 这就是为什么我们首先使用线框来为内容找到正确的布局。 您可以将它们视为网站的蓝图。 它们不使用任何颜色、图形或其他视觉效果，因此更容易专注于基础知识。

一个快速的侧面演出 - 升级标志

当我们开始用正确的颜色和字体迭代线框时，我们发现了一个让 Voucherify 作为一个品牌快速获胜的机会。 他们的标志——确切地说是它的字体——感觉不平衡。 我们对其进行了一些调整，以提高易读性，而无需重新设计整个品牌。

全景图——最终设计

最后，感谢我们之前所做的所有评估，所有这些都汇集在一起​​​​。 Voucherify 的网站使用新的视觉语言进行了重新设计。 值得一提的是，我们没有闭门进行最终设计，而是与 Voucherify 的 Webflow 开发人员 Piotr 密切合作，他在我们完成设计时迭代地交付每个子页面。 与在孤岛中工作相比，通过这种方式，我们可以对我们在此过程中遇到的任何问题做出反应并更快地启动项目。

搭建乐高积木——准备设计系统

在重新设计的同时，我们正在研究为网站提供动力的设计系统。 可交付成果包含一组构建块和如何使用它们的指南，以便 Voucherify 营销团队中的任何人都可以设计（从现成的组件构建）登录页面。 在初创企业的现实中，事情发展得很快，您需要工具来快速有效地执行您的计划——设计系统必须与之同步。

每个设计元素——从包含颜色、字体和阴影信息的简陋标记到整个部分——都经过精心设计，可扩展到各种内容。 感谢 Figma 的强大功能——我们最喜欢的设计工具（至少在撰写本文时），所有元素都可以在轻松的拖放中使用。

项目的可交付成果

我们最终得到了什么？

Webflow 驱动的网站

当然，我们不是自己开发网站的——它是由 Voucherify 的前端开发人员 Piotr Gacek 完成的（干得好！）——但将设计文件列为我们合作的成果是不公平的。 毕竟，网站是互联网上的互动作品——而不是静态图像。 感谢 Webflow，Voucherify 团队可以立即构建它。

设计系统

我们创建的设计系统不仅仅是我们用来加速构思过程的设计库。 为了确保团队之间的一致性，Piotr 复制了 Webflow 中的组件。 通过这种方式，Voucherify 可以在未来无缝构建更多登录页面。 ‍

营销资产

我们特别强调插图或图标等视觉效果，以便它们可以在不同的环境中工作。 这样，新的视觉语言就不仅仅存在于网站上。 其他营销资产，如电子书，从同一设计库中提取关键元素。

“我是这次重新设计的 Voucherify 方面的项目经理。作为我们的设计机构，我非常喜欢与 tonik 合作。他们以敏捷、迭代的方式工作，我们可以在设计的每个阶段参与进来，增加我们合作的效率。他们总是乐于接受批评，并根据我们的要求多次准备新版本的设计。他们通常可以联系到并快速回复。通过 Slack 发送的每周会议和每日总结以及跟踪图表给了我一个非常清晰的工作进度图和项目的预计时间表。我非常感谢他们团队的透明性、清晰性和开放性。我们对网站的最终设计非常满意。设计系统已经提供了帮助我们将几个新的登录页面放在一起，并创建了近百个促销模型。即使对于非开发人员来说，它也非常易于使用。” – Voucherify 产品营销经理 Katarzyna Banasik。

下一步是什么？

一次成功的发布之后，我们开始与 Voucherify 建立合作伙伴关系，帮助他们和他们的客户进行所有数字设计，专注于产品和品牌。 阅读完整的公告以了解更多信息。