Sean Ren AI 体验产品设计师

输入访问码

这份作品集仅供受邀查看。

跳到​案例​正文
Sean RenKP Corp访问 kpcorp.com

KP Corp一家​印刷​公司​的​网站，为​回答​新​买​家​的​问题​而​重新​设计。 2022 年​设计，至今​仍是 KP 的​网站。

kpcorp.com 的​每​一个​页​面，由​我​作为 Ten Gun Design 这个​项目​唯一​的​设计​师​完成。

角色
数字​设计​师
唯一​设计​师
时间
2022 年 6 月​至 9 月
公司
Ten Gun Design
团队
艺术​总监、项目​经理、开发、QA
工具
Figma、Adobe Creative Suite、InVision
平台
响应​式​网站

之前旧​首页

KP 的​旧​首页：轮播​横​幅、疫​情​通知、三张​文字​卡片、一段​视频、满​墙​的​信息​图​和​页​脚。

之后如今​的 kpcorp.com

KP 新​首页​的​上部：Work Smarter 和 KP 自己​的​车间、客户​标识，以及​三张​服务​卡片。KP 新​首页​的​中部：行业​列表、客户​评价​和 KP 的 LinkedIn 动态。KP 新​首页​的​下部：最新​动态、行动​号召​和​页​脚。

概​览

KP 卖​的​已经​是​数据​和​技术，网站​卖​的​却​还是​印刷。

问题
到 2022 年，KP 已经​在​向​受​监管​行业​销售​数据​驱动​的​传播​服务，而​它的​首页​上​没有​任何​内容​是​说给​这些​买​家​听​的。
设计​问题
首页​怎样​才能​回答​每位​买​家​的​第​一个​问题，让​网站​先​替​销售​代表​完成​第​一步​工作？
关键​洞察
两​类​买​家​带​着​不同​的​问题​来：因​印刷​而​认识 KP 的​团队，以及​第一次​接触​它的​技术​和​风险​团队。KP 自己​的​需求​定​下了​标准：“网站​应该​走在​销售​代表​前面。”
我的​部分
策略​团队​规划​了​受​众​和​网站​地图。设计​由​我​完成，并与​艺术​总监、项目​经理​和​开发​者​合作。

过程

首页​从​内容​区块​一路​做到​上线。

我​做了​两​个​线​框​方向，然后​是​视觉​系统​和​动​效，并​把​每​个​交互​都​画​成​状态，让​开发​和​设计​一致，QA 也有​据​可​查。

  1. 内容​区块：价值​主张、背书、行业​概​览​和​服务​概​览。

    1内容​区块

    每​个​板​块​要​说​什么，按​顺序​排列。

  2. 选定​的​线​框​图：首​屏、客户​标志、行业​列表​和​三张​服务​卡片。

    2线​框​图

    我​选定​的​方向，配​占位​图。

  3. 上线​后​的 kpcorp.com 首页：首​屏、服务​和​行业。

    3已​上线

    如今 kpcorp.com 上​的​首页。

决策

新​买​家​会问​什么，页​面​又​怎样​回答。

决策 1

KP 自家​产​线​画面​上​的​一句​承诺

“这​是​我​印象​中的​那​家​公司​吗？”

旧​首页：轮播​的​营​销​图​和​疫​情​通知。

Turned down旧​首页

它​以​一​组​轮播​的​营​销​图​开场，接着​是​一​则​疫​情​期间​运营​情况​的​公告。

Chosen如今在 kpcorp.com 上

首​屏​只​说​一件事：Work Smarter，旁边​一句​话​说明 KP 做​什么，背景​是 KP 自己​车间​和​团队​的​影像。客户​标志​紧​随​其​下。

重新​设计​的​首​屏：Work Smarter、一句​说明 KP 业务​的话，以及 KP 生产​车间​的​影像。
原因
新的​技术​买​家​需要​看到​一个​现代​的​合作​伙伴，长期​的​印刷​客户​需要​认出​熟悉​的 KP。一个​清晰​的​承诺​加上​真实​影像​能​同时​满足​两者，客户​标志​则​在​用户​往下​滚动​之前​就​提供​了​佐证。

决策 2

精简​导航​和​带​说明​的​菜单

“我​该​从​哪里​开始？”

旧​页​头：首页、数据​驱动​传播、行业、服务、解决​方案、关于​我们​和​联系​我们。

Turned down旧​页​头

顶​部​横​排​七​项，从​首页​到​联系​我们，看不出​每​一项​背后​有​什么。

Chosen如今在 kpcorp.com 上

页​头​精简​为​行业、服务、洞察​和​关于​四项，搜索​和​联系​我们​始终​触手​可​及。每​一项​都会​展开​一个​菜单，列出​所有​选项​并​用​一句​话​说明​涵​盖​内容，各​列​依次​淡​入。

原因
买​家来​的​时候，心里​想​的​要么​是​某​个​行业，要么​是​某​项​服务。更少、更​清楚​的​入口​能​把​两​类​人​都​带到​正确​的​页​面，而​一句​话​的​说明​在​销售​代表​介入​之前，就​开启​了​销售​对话。

决策 3

行业​内容​的​渐进​展开

“你们​了解​我​所在​的​行业​吗？”

线​框​图​备​选​方案：八个​相同​的​行业​方​块，每​个​只有​名称​和“了解​更多”。

Turned down我的​另一​版​线​框​图

八个​等​大​的​行业​方​块。扫​一眼​很快，但​每​个​只写​了​名字​和“了解​更多”。

Chosen如今在 kpcorp.com 上

行业​排成​一个​列表。展开​其中​一项，会​显示​一段​简短​介绍​和“阅读​更多”链​接，并​切换​旁边​叠​放​卡片​上​的​照片，就像​翻​阅​一份​档案。

原因
受​监管​行业​的​买​家​会问：KP 是否​了解​我们​的​要求。按需​展开、每​个​行业​一句​话​的​回答，比​八个​一​模​一样​的​方​块​说得​更多，也​让​这个​区块​保持​简短。
服务​卡片
三张​卡片​从​灰色​带​上升​起，悬​停​时​下面​像​印刷​品​一样​展开​一叠​纸，呼应 KP 的​印刷​出身。

设计​系统

一套​设计​语言，做​一次，用​在​每一​页。

品牌​简报​要求​专业、现代、可信，同时​还是​老​客户​信任​的​那个 KP。海军​蓝​和​红色​把​这​一点​延续​了​下来。

  1. 设计​语言：从 100 到 900 的​红色、海军​蓝​和​灰色​色​阶，按钮​样式，以及​字号​体系。

    设计​语言

    在 Figma 里​搭建​的​红色、藏青​和​灰色​色​阶、按钮​以及​字号​体系。

  2. 关键​组件：导航​状态、客户​标志，服务、行业、文章​和​认证​卡片，以及​页​脚。

    组件

    导航​状态、客户​标志、服务、行业​和​文章​卡片，以及​页​脚，让​新​页​面​从​现成​的​部件​开始。

  3. 在​手机​上

    行业​列表​变成​全​宽的​折叠​面板，每​张​照片​移到​文字​下方，服务​纵​向​堆​叠。这样​销售​代表​在​两​场​会议​之间​发出​的​链​接，讲的​仍是​同​一套​说法。

我的 KP Corp Figma 工作​区，打开​的是 KP-CORP 页​面：项目​简报、网站​地图、线​框​图、设计​语言​和​最终​页​面​的​画​框。其他​页​面​的​名字​做了​模糊​处理。
我的 KP Corp Figma 工作​区

扩展​性

整个​网站​都是​我​设计​的，KP 一直在​上面​继续​添加​内容。

首页、行业​页、博​客、招聘​和​联系​页，都​来自​我​做的​模板。

网站​其他​页​面​的​前后​对比

  1. 行业

    之前

    旧​的​行业​页：一​长​列​行业​内容，每行​一个 Learn More 链​接。上面​的​照片​已经​没有​存档。

    之后

    新的​行业​页：标题、每​个​行业​一张​图片​卡片、最新​动态​和​页​脚。

  2. 服务

    之前

    旧​的​服务​页：九​个​方​块，每​个​只有​一个​产品​名。上面​的​照片​已经​没有​存档。

    之后

    新的​服务​页：三项​服务，每​项​配​照片​说明，然后​是​认证​和​最新​动态。

  3. 博​客

    之前

    旧​网站​的​信息​图​页​面：一​排排​信息​图​缩​略图。

    之后

    新​博​客：筛选​和​文章​卡片​网​格。

  4. 关于

    之前

    旧​的​关于​页：一大​段​文字，旁边​是​很​长​的​网站​地图。

    之后

    新的​关于​页：介绍​和 KP 的​员工、价值​观、管理​团队​和​办公​地点。

旧页面来自 Wayback Machine，它没有保存每一张照片，所以有些地方是空白的。

我的​模板，旁边​是 KP 用​它们​发布​的​页​面

  1. Figma 里​的​行业​页​模板：标题、优势、认证、相关​内容、行动​号召​和​页​脚。

    在​我的 Figma 文件​里

    行业​页​模板

    占位​文案，交付​时​就是​这样。

  2. kpcorp.com 上​的 Healthcare 页​面，用​的是​行业​页​模板。

    在 kpcorp.com 上

    Healthcare

    我​文件​里​的​八个​行业​之一。

  3. kpcorp.com 上​的 Utilities 页​面，用​的是​同​一个​行业​页​模板。

    在 kpcorp.com 上

    Utilities

    我的​文件​里​没有​这​一​页。KP 几年​后​用​同​一个​模板​加上​了​它。

成果

2023 年​上线​至今，还​经历过​一次​平台​更换。

平台​迁移
页​面、设计​语言​和​交互​都​一起​搬到​了​新​平台。
KP 的​后​续​扩展
选举​和​公用​事业​这​两​个​我​文件​里​没有​的​行业，一个​会议​落地​页，以及​更多​文章。
我​学​到​的
我​刚​毕业​就​直接​做​企业​级​设计，能​感到​肩上​的​责任。所以​我把​自己​放在​创始​人的​位置​上，给​了 KP 一个​看待​自己​品牌​的​全新​视角。
探索