营销设计

落地页的“打怪升级之路”

(A)

在诸多众筹项目的推进中,众筹落地页设计始终是重要的一环(落地页的一般目标是将网站访问者转化为销售或线索),一个精心设计的的落地页可以展示项目的真实性和可行性,让支持者更容易相信项目的价值和潜力。随着不同的客户提出越来越多的要求,我们也在与时俱进迭代我们的设计与流程。

(B)

从一开始的纯粹满足客户需求,到通过内容管理系统(CMS)设计固定板式并为所有设计师提供教学,最后 实现在客户 Shopify  内嵌页面。我们从纯粹帮助用户实现理想到为企业提供品牌新助力。

(C)

- 2019-2020.

什么是落地页?

首先,让我们来了解一下什么是落地页。落地页是指用户通过点击广告、邮件或其他渠道进入的特定网页,用于推广和引导用户进行特定的行动,例如购买产品、注册会员或填写表单等。在网络营销中,落地页起着至关重要的作用,它能够提高转化率和用户体验,从而增加销售和潜在客户。

V 1.0 Instapage

作为海外市场验证的先行者,我们不断探索,最终找到了一款非常适合公司业务的登陆页工具——instapage。无论是客户是小型企业还是大型机构,Instapage都是一个强大而灵活的工具,能够满足企业的各类需求。
在一个平台上实现自动化、登陆页面、网络研讨会、电子邮件营销等。
[图 1]
作为一个落地页的 Web 端工具,它有很多优点。

首先,Instapage 具有直观页面编辑器。无需编写代码,我们只需利用拖放功能将所需的元素(如文字、图片、视频或表单)放置在页面上,并通过简单的设置进行自定义。这使得即使没有编程经验的视觉设计师也能轻松创建出专业的落地页。此外,Instapage提供了丰富的模板库,你可以根据自己的需求选择适合的模板,从而节省时间和精力。

其次,Instapage 具备响应式设计功能。如今,越来越多的潜在客户也在使用移动设备查看各种网页,因此确保落地页在各种屏幕上都能良好展示至关重要。Instapage 的响应式设计功能确保你的落地页能够适应不同的设备和屏幕尺寸,提供无缝的用户体验。我们可以在设计页面时,通过预览功能查看页面在不同设备上的显示效果,并进行相应的调整。

第三,Instapage 提供了强大的跟踪和分析工具。通过集成 SEO、Google Analytics 和Facebook pixel 等工具,Instapage 能够实时跟踪和分析登陆页的流量、转化率和用户行为等重要数据。这些数据为设计与市场部门提供了深入了解用户喜好和行为模式的机会,从而优化营销策略和页面设计。
[图 2]
[图 3]
[图 4]
最后,Instapage 还提供了A/B测试和热图功能。A/B 测试是指面对不同用户展示两个不同版本的页面,然后比较它们的性能与转化指标,以确定哪个版本更有效。这种测试方法可以帮助我们优化页面设计,提高转化率。而热图功能则可以通过记录用户在页面上的点击行为,绘制出热点图,帮助我们了解用户的兴趣和关注点,进一步优化页面布局和内容。

尽管在 2020年第一季度 Instapage 的收费模式转为按流量收费,导致我们的使用成本飙升。我们团队仍然认为它是一个不可或缺的工具,特别适用于关键项目。我们也开始寻求均衡成本的登陆页开发模型之路。

V 2.0 Webflow CMS

我们的团队选择使用 Webflow 来构建落地页,取代了原先对 Instapage 的依赖,这样我们不仅降低了成本,而且也拥有了更大的自由度和灵活性。
在画板编辑器中控制 HTML、CSS 和 JavaScript。Webflow 生成简介有效的语义代码,可以直接发版或交给开发人员。
[图 5]
基于我们的实际需求,我们发现 Webflow 的强大功能非常适合我们的业务。我们利用 Webflow 制作了公司的官方网站、项目页面、众筹工具箱等多个网站。尽管 Webflow 可以不使用代码来设计,但它涉及到 CSS 和 HTML 的设置,对于一些用户可能会感到繁琐。因此,我们设计了一个基于内容管理系统(CMS)的登陆页面,以便视觉设计师和营销人员能够更便捷地使用。
整个系统分为基础设置、内容页和感谢页三个部分。

基础设置: 包括域名设置、搜索引擎优化、首图、CTA 和页脚。这些设置可以帮助页面提高可见性、引导流量,以及提供清晰的用户导航和呼唤行动。

内容页面: 包括五种经过测试的高转化页面布局,分别是独立图片、独立视频、分栏以及富文本。设计师和营销人员可以根据需要选择合适的格式进行设计,并将内容作为 CMS 项目插入到基础内容中。

感谢页面: 是客户在主页注册邮件后跳转到的页面,客户可以在这里预订、加入 Facebook 群或提出问题。
所有页面都经过响应式设计,适应不同的终端。一旦项目上线(例如在 Kickstarter 上线),整个页面将被重定向至 Kickstarter 以引导流量。
[图 6]

结论

通过使用 Webflow CMS,我们不仅提高了页面设计的效率和质量,增加了页面的灵活性和可扩展性,更重要的是不会使用到紧缺的技术资源。
[图 7]

V 3.0 Shopify & shogun

Shopify 是一个知名的电子商务平台,为企业提供了构建在线商店的功能,而 Shogun 是一款在 Shopify 上使用的页面构建应用。Shogun 的出现为在 Shopify 上建立落地页提供了全新的解决方案,它能够帮助用户轻松构建页面,并且具有许多优势和特点。

As more and more companies require the use of Shopify to build landing pages for brand promotion, the limitation of Webflow not being able to be embedded into other platforms has become increasingly prominent. However, the emergence of Shogun has solved this problem.
更方便使用视觉页面编辑器设计博客文章,产品页面,落地页和主题部分。
[图 8]
我们帮助越来越多的众筹项目上线,公司业务的也在快速发展。这是一个机遇,也是一个挑战。在某个项目中,客户要求我们在他公司的 Shopify 上建立一个落地页,这样可以在预热产品时增加他们的电商网站流量。这是一个非常好的方案,但很快问题就摆在我们眼前。虽然 Shopify 有许多可用的模板,但我们的落地页面只能通过开发完成。Webflow 也无法内嵌到其他平台,而开发人员需要集中精力完善新项目(一种可以集成数据分析和优化的工具感谢页面,称为病毒式营销),所以只能靠我们自己了。我们最终选择使用 Shogun 进行页面设计和开发,我们成功地完成了客户的要求。
[图 9]
Shogun 提供了一个直观的可视化页面编辑器,用户可以通过简单的拖放元素的方式来设计页面,从而快速完成页面布局和设计。这种可视化的设计方式使得用户可以更加便利地进行页面编辑和构建,提高了设计效率和质量。

在使用 Shogun 构建页面的过程中,它还提供了快速的页面设计功能,用户可以在短时间内创建出符合品牌风格的页面。同时,Shogun 也能够解决一些常见的页面开发问题,让用户能够更加轻松地完成页面设计和开发工作。

到此,我们的设计与开发能力以足够全方位满足个人/企业用户的产品与品牌宣传需求。

后记:设计指南

经过多个项目的设计经验,在2020年第四季度,我总结设计了 Shopify shogun 与 Webflow 的UI设计指南,并对其他视觉设计师进行了培训。我的目标是让其他设计师也掌握构建页面的技巧,团队可以共同进步。

这套设计指南适用于 webflow 和 shogun。这两个工具需要手动设置它们的 Html 和 CSS 来逐步构建整个页面,并使用不同的 CSS 设置来保持桌面端和移动端的响应式设计。
[图 10]
下一个项目