界面设计｜百度健康疫苗服务一站式体验搭建-技术圈

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

转自：百度MEUX

编辑：刘丽

共 3020 字，预计阅读 8 分钟

在国家推动疫苗行业发展的背景下，用户对疫苗服务的需求在不断增加，快速建设疫苗服务能力成了健康业务迫在眉睫的任务。作为设计师的我们要如何助力业务，培养和提升用户 “来百度预约优质疫苗服务” 的用户心智呢？本文 将结合百度健康的疫苗服务项目，从分析问题、确定目标、设计路径搭建、流程规范定制和沉淀 等方面去展开，同大家分享百度健康疫苗服务的体验搭建探索。

除了国家政策的扶持和新冠疫情的影响，国内疫苗市场本身就有着持续增长的商业价值。这就使 “疫苗服务” 将会是百度健康生态中的一项重要的医疗服务能力。

而在这一背景下，作为搜索起点的百度搜索结果页，整体呈现的是一个眼花缭乱、缺少重点的状态。同时，由于百度缺少相关的服务体验支撑，使得大量用户被分流到了鱼龙混杂的各类平台，这也导致了用户体验较差、缺少对平台的信赖等问题。

围绕着这些问题，我们设计师梳理了用户在百度预约疫苗的路径，将我们的设计大方向确定为：从百度搜索起点到百度健康服务终点的一站式服务体验搭建。使用户通过搜索，触达百度健康服务，实现一站式的疫苗预约。

根据用户从触达—交易—回访的路径，我们将设计目标确定为三个方面：快速触达、刺激消费、促进回访。

设计师梳理了用户在百度预约疫苗的路径，将我们的设计大方向确定为：从百度搜索起点到百度健康服务终点的一站式服务体验搭建。使用户通过搜索，触达百度健康服务，实现一站式的疫苗预约。

快速触达

1.强化 SUG 展现

SUG 页作为搜索路径的第一环，它的强化展现，对于提升卡片展现量、吸引更多用户而言，起着非常关键的作用。所以我们设计师主动发起了针对于各类型疫苗的 SUG 强化方案。经过 SUG 的强化，疫苗服务在搜索结果页的卡片展现量得到了成倍增长。

2.各类疫苗服务卡

为了使我们的疫苗服务在搜索结果页内的有着明显的服务感知，我们结合各类疫苗的自身特点（比如在颜色的选取上，针对主要接种人群为女性的 HPV 疫苗，我们使用了女性向的粉红色去进行表达）设计了多类疫苗服务卡。

刺激消费

在提升了服务入口的展现与感知后，如何能够最大化的提升用户的购买意愿、让用户的决策高效直接，是我们一直在思考的问题。

为此，我们将用户与疫苗预约服务相关的各类问题进行了梳理。最终发现，由于医疗服务的特殊性，疫苗类用户除了关注价格优惠等利益点外，权威、安全、有保障等因素都是影响用户消费决策的重要方面。

因此在本次服务搭建中，我们对用户所关心的决策信息进行了强化，同时辅以恰如其分地展示，来促进用户的消费决策。

1.善于利用利益点

a.价格对比

作为展现量极高的商品列表，在优惠价格的展现上我们尝试了多种类型的设计方案，最终选择了常规版本、以及更能凸显优惠力度的价格走势可视化版本进行了 AB 实验。最终通过实验，我们发现用户对于价格走势可视化版本的点击率要高出常规方案许多，也说明更加直观的利益点展现对于用户来说是更有吸引力的。

b.腰封强化

为了进一步突出用户关注的价格、补贴等优惠信息以及截止日期、倒计时等时间信息，我们利用腰封将其进行了突出展现。在强化利益点展现的同时，营造购物氛围，带给用户更加直观沉浸的购买体验。

c.稀缺感体现

与此同时，为了使用户产生紧迫感，我们在常规状态下在底 bar 加入了限量提示，同时在库存数量紧张时使用强气泡进行提醒，进一步催生用户购买行为的产生。

2.权威安心的感知

a.品牌、保障信息外露

由于权威、有保障的感知与对医疗类用户的成单判断起着非常重要的作用，所以在从 0 到 1 的设计搭建中，我们在将品牌外露打造用户心智的同时，也多链路的体现了保障信息，为用户提供权威安心的服务感知。

b.建立主图模版

为了保证视觉的展现更为专业，以及同资源方之间的合作效率更高。我们将商品主图内所需展现的信息类型进行梳理排布，建立了疫苗服务专属的主图模版。整体的模版在设计的定义中采用了套入式，可以根据不同的活动，搭配与之匹配的主图边框及腰封，更换十分灵活。

3.便捷高效的使用

以搜索结果页为例，为了保证用户的使用便捷，我们设计同学主动发起了原方案内没有的将商品列表前置于搜索结果页的方案。通过这一方案，在缩短用户使用路径的同时，也提升了商品展现量。

连接情感

在提升了服务入口的展现与感知后，如何能够最大化的提升用户的购买意愿、让用户的决策高效直接，是我们一直在思考的问题。

作为医疗服务类产品，我们希望可以不止关注于营销，也可以关注情感方面的关怀。最终，我们经过多轮讨论，确定了用原始的情感传递方式—贺卡，在建立同用户之间情感连接的同时，也进一步促进用户的回访。

设计之初，最先对于项目的整体调性进行探索。经过与业务方的讨论以及设计师组内分析，我们得出以下结论：

1.设计过程

a：场景化插图

如何设定主视觉塑造信任感，建立用户同产品的情感连接呢？

针对 hpv 疫苗不同年龄段女性，我们通过五个系列的主题插画，来体现百度健康 “关爱” 的主题；通过场景化的插图，统一和谐的色彩，传递给用户信赖、温暖的视觉感受，在传递温度的同时赋予了产品与用户情感化的连接。

b：信纸元素

作为医疗服务类产品，我们希望可以不止关注于营销，也可以关注情感方面的关怀。最终，我们经过多轮讨论，确定了用原始的情感传递方式—贺卡，在建立同用户之间情感连接的同时，也进一步促进用户的回访。

我们在用户完成购买后，为用户提供生成贺卡入口。用户点击后则可在当前页调起写贺卡浮层。

通过合理的布局，将浮层内的信息进行模块划分，保障后续的整体拓展性。

c：独特的红包设计

区别于一般的红包的设计，将花朵与红包进行了创意融合，赋予红包新寓意，传递女性健康的同时增加了一丝人文气息 “赠人玫瑰手有余香”。

2.统一的设计认知

通过连贯的设计语言达成视觉的统一，增强品牌的认知。

我们从 “构图” 、 “用色” 、 “字体” 三个角度提炼设计语言, 以 “优质，安全” 为出发点，用 “爱” 为主线贯穿整个产品页面，创意从 “花、关爱、信任” 中提取元素作为品牌温度的支撑点，用鲜明的色彩与表现手法凸显HPV所代表的女性群体，营造与HPV主题相契合视觉氛围。

3.全场景覆盖

结合百度 app 的资源优势，我们在多种推广渠道都进行了情感化的设计，结合产品特性，定制专属展现位置，丰富用户视觉感受，扩大影响力。

写在最后

自百度健康上线 HPV 疫苗现货预约代订服务以来，日成交额（GMV）突破 2000 万，同时 HPV 疫苗科普及预约月服务超 1.5 亿人次。我们从前期发现问题、沟通思考、确定目标，到逐步将设计落地。不仅实现了疫苗服务的建设、为其赋予了情感化的含义，也对商业带来了超预期的营收，实现了设计的商业赋能。

以上就是百度健康疫苗侧一站式体验搭建的全过程，让设计赋能产品，产品实现服务转化，从而强化品牌感知，守护健康的同时，为社会贡献一份力量，从而打造一个安全、优质、权威的医疗电商。

🙋 我们一起聊设计 🙋‍♂️

微信行业交流群

期待与更多优秀设计师一起成长

🤩

PS：欢迎大家关注三分设，每天早上9点，准时充电。分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。添加小小虫微信号【 Lil_Bug 】，备注【 三分设 】加入！（只面向星标了公众号三分设的粉丝）

推荐课程

星标公众号方法

点开下方公众号 ➡️ 点击右上角【...】 ➡️ 设为星标