KP Corp2022
为数字化转型中的 KP Corp 重新设计官网
KP Corp 正从商业印刷转向数据驱动的传播业务，而它的网站还没跟上。在 Ten Gun Design，我是这个项目唯一的设计师，重新设计了整个网站，从线框图到视觉系统、响应式布局，以及滚动和悬停交互。它至今仍是 KP 的线上官网。 访问 KP Corp 现在的官网 （在新标签页中打开）
- 已上线
- 用户体验设计
- 视觉设计
- 网页
- 角色
- 数字设计师 唯一设计师
- 时间
- 2022 年 6 月至 9 月
- 团队
- Ten Gun Design 艺术总监、项目经理、开发、QA
- 平台
- 响应式网站
- 工具
- Figma、Adobe Creative Suite、InVision
- 这个项目唯一的设计师
- Ten Gun Design，2022 年 6 月至 9 月
- 至今仍在线上 （在新标签页中打开）
- kpcorp.com 仍在使用这套设计
- 年收入 8,000 万至 1 亿美元 （在新标签页中打开）
- 来自 KP 2023 年的业务通报
背景
KP 正在转向数据驱动的传播业务， 它的网站看起来却还像一家印刷厂。
KP Corporation 靠商业印刷和邮寄起家。到 2022 年，它已经在向受监管行业销售数据驱动的多渠道传播服务，但首页仍以一组营销轮播图和一则疫情通知开场，业务也分散在七个菜单项里。
这次改版由 Ten Gun Design 承接，我是这个项目唯一的设计师，从最初的线框图到视觉系统和每一个交互，都由我完成。
被这次改版取代的首页。
目标用户
两类买家， 一个像销售代表一样工作的网站。
受众规划列出了两类人：一类是早已因印刷业务认识 KP 的生产、传播和采购团队；另一类是第一次接触 KP 的技术、数据、治理和风控团队。客户用一句话概括了需求：“网站应该冲在销售代表前面。”
买家需要找到什么
- 01
这是我印象中的那家公司吗？
新买家期待一个技术合作伙伴，老客户期待他们熟悉的 KP。
- 02
我该从哪里开始？
买家带着某个行业或某项服务而来，而七个菜单项说不清哪个是哪个。
- 03
你们了解我所在的行业吗？
受监管行业的买家在联系之前，想先确认 KP 了解他们的要求。
- 04
你们具体做什么？
业务如今从印刷延伸到数据，需要读起来是一个完整的范围。
- 05
这看起来像一家技术合作伙伴吗？
简报要求专业、现代、可信，而旧网站的每张图都在说“印刷”。
- 06
在手机上也好用吗？
销售代表发出的链接，往往是在两场会议之间用手机打开的。
设计决策
开篇一个承诺， 每个区块回答买家的一个问题。
受众规划和网站地图来自策略团队。在此基础上，我设计了每一个页面，从线框图到视觉系统及其动效。在定稿视觉之前，我把首页从内容区块推进到两个线框方向。凡是我放弃过某个方向的地方，都可以切换两个方向来对比。
01内容区块：每个区块要说什么
02线框图：我选定的方向
03上线：今天的 kpcorp.com
决策 01: 这是我印象中的那家公司吗？
开篇只讲一个承诺，并展示真实的生产车间。
我的选择
首屏只说一件事：Work Smarter，旁边一句话说明 KP 做什么，背景是 KP 自己车间和团队的实拍影像。客户标志紧随其下。
我放弃的方案
旧首页以一组轮播的营销图开场，紧接着是一则疫情运营通知。
原因
新的技术买家需要看到一个现代的合作伙伴，长期的印刷客户需要认出熟悉的 KP。一个清晰的承诺加上真实影像能同时满足两者，客户标志则在用户往下滚动之前就提供了佐证。
决策 02: 我该从哪里开始？
四个入口，点开之前就讲清楚。
我的选择
页头精简为行业、服务、洞察和关于四项，搜索和联系我们始终触手可及。每一项都会展开一个菜单，列出所有选项并用一句话说明涵盖内容，各列依次淡入。
我放弃的方案
旧页头横排七个项目，从“数据驱动传播”到“解决方案”，看不出每一项背后是什么。
原因
受众规划显示，买家要么按行业来，要么按服务来。更少、更清楚的入口能把两类人都带到正确的页面，而一句话的说明在销售代表介入之前，就开启了销售对话。
决策 03: 你们了解我所在的行业吗？
一次展开一个行业，配图放在一叠卡片上。
我的选择
行业排成一个列表。展开其中一个，会出现一段简短介绍和“了解更多”链接，旁边一叠卡片上的照片也随之切换，整个区块像在翻阅一份档案。
我放弃的方案
我的另一版线框图给八个行业各做了一个方块。它便于快速浏览，但每个方块只有一个名称和“了解更多”。
原因
受监管行业的买家会问：KP 是否了解我们的要求。按需展开、每个行业一句话的回答，比八个一模一样的方块说得更多，也让这个区块保持简短。
决策 04: 你们具体做什么？
三张服务卡片，悬停时浮起成一叠。
我的选择
三张卡片从一条灰色色带中升起。悬停其中一张，它会浮起，下方展开一叠像印刷纸张一样的页面，并显示这项服务的内容。
我放弃的方案
备选线框图把服务做成左右交替的长条，每条附一份清单。
原因
KP 的业务必须读起来是一个完整的范围，从印刷到数据。三张等宽的卡片一次呈现全部，叠放的纸张则不着痕迹地呼应了 KP 的印刷根基。
决策 05: 这看起来像一家技术合作伙伴吗？
会动的设计语言：海军蓝与红色、圆角边缘、会自己画出来的线条。
我的设计
我建立了从 100 到 900 的红色和海军蓝色阶、贯穿完整字号体系的单一字体、胶囊形按钮，以及圆角卡片和圆角区块边缘。页面滚动时，标题和正文依次升起，区块之间有一条细线横向画出；悬停时，箭头线会朝目标方向伸长。
原因
品牌简报提出了三个要求：专业、现代、可信。沉稳的配色、舒展的字体和克制的动效让网站显得现代，而海军蓝与红色保留了客户早已信任的 KP。
01滚动时：文字升起，区块之间画出一条线
02我在 Figma 中建立的设计语言
决策 06: 在手机上也好用吗？
在手机上，以单栏讲同一个故事。
我的设计
在手机上，行业列表变成全宽的折叠列表，每张照片移到文字下方，服务以卡片堆叠。页面讲述的顺序与桌面端相同。
原因
销售代表发出的链接，往往是在两场会议之间用手机打开的。保持讲述的顺序，买家在任何屏幕宽度下都能看到同一个故事。
结果
2023 年上线， 至今仍是 KP 的官网。
仍是线上官网
kpcorp.com 仍在使用我设计的页面、设计语言和交互，现在已经是第二个平台了。
为 KP 团队的持续扩展而建
页面由共用的区块和卡片组成，所以 KP 能在同样的模板上继续增加文章、落地页，以及 Elections 和 Utilities 这样的新行业。
更大转型的一部分
在 2023 年的业务通报中，KP 报告年收入达 8,000 万至 1 亿美元，客户群持续扩大，业务不断向数据驱动的传播转型。
我无法获取网站的分析数据，所以说不清改版对流量或销售线索带来了什么变化。收入数字反映的是整个业务，而不只是网站。
接下来要验证的
新的技术买家能在联系销售之前，找到他们需要的证明吗？
为什么重要
网站本应“冲在销售代表前面”：对新买家来说，它就是第一次销售对话。技术和风控团队在联系之前，需要看到安全认证和系统集成的证明。如果找不到，他们要么离开，要么打电话问一些基础问题，销售代表的时间就花在了重复网站内容上。
假设从所在行业进入的技术和风控买家，能在两次点击之内找到安全认证和相关案例研究，并能用一句话说清 KP 做什么。
- 怎么测
- 五位来自技术和风控岗位的买家完成同一个任务：判断 KP 能否满足他们的合规需求。我观察他们看哪里、点哪里，结束后请他们描述 KP。
- 怎么算成功
- 大多数人不用搜索就能找到安全认证和本行业的案例研究，并且描述 KP 时不只说它是一家印刷公司。
- 可能在哪里失败
- 折叠列表一次只展开一个行业。我会观察买家是否会展开第一个之外的行业，还是完全错过了自己的行业。
如果有分析数据，我还会对比改版前后联系表单线索中的问题。
它有什么不同
旧网站罗列 KP 做什么， 新网站回答买家问什么。
我的工作方式
我如何与团队协作
把动效设计出来，开发就不必去猜。
作为这个项目唯一的设计师，我与艺术总监、项目经理、开发和 QA 一起工作。我在 Figma 里把每个交互都画成不同状态：静止、悬停和展开，让实现与设计一致，QA 也有据可查。
我如何搭建系统
组件只做一次，每个页面都能用。
我先设计组件：导航状态，服务、行业和文章卡片，按钮以及页脚。网站的页面模板都由它们组装而成，这也是 KP 团队能在没有设计师的情况下持续扩展网站的原因。
过程
我是怎么走到这里的。
故事背后的工作记录：路线图、业务背景、受众规划与用户路径、网站地图方案，以及线框图。
展开完整过程
01路线图
02业务背景一次需要由网站来讲清楚的业务转型。
03信息架构把受众的优先级转化为页面层级。
04设计过程把需求转化为界面和视觉系统。
参考材料：客户提供的四版网站结构
我在设计界面时参考并解读的规划材料。展开即可比较各结构及其取舍。
