新氧保险详情页-体验设计升级

背景

新氧保险是新氧在2019年推出的互联网保险平台。为填补保险市场对医美用户保障的空白，新氧保险联合国内多家知名保险公司专注为医美用户提供更优质、更具性价比的保险产品以及更便捷的综合保险保障服务。

一、明确现存问题

1、前期要贴合新氧主站的设计风格和大众化保险产品的交互逻辑（求同），一方面没有形成自己的品牌特色（存异）；

2、另一方面，医美保险既是医美产品，又是保险产品，对用户来说更容易把它理解成医美产品，所以之前用大众化保险思路来设计，也让用户在体验过程中思考成本过重。

3、各产品定制化太强，为支持每款产品快速上新，没有形成统一、可复用的页面模板，导致重复设计开发、效率低下。

 

二、制定设计目标

💡优化交互逻辑：

详情页是用户获取产品信息最直观的路径，针对这个场景，我们希望无论从视觉层面还是交互逻辑，都能给用户传达更清晰的信息。

🚀提升品牌识别度和记忆度：

优秀的品牌可以在整个品类中定位清晰，占据用户心智，形成自己的优势。

👬提升合作效率：

为了满足保险产品的自定义配置，大程度的减少后期上新的压力；基于此次C端保险产品详情体验升级，后台也同时上新了“产品工厂”项目。

三、定位设计关键词

通过对设计目标的理解，定位设计关键词。关键词可以更好的在设计落地起到主导作用。

四、多维度渗透落地

A、UI设计

1、页面布局

产品详情页是用户获取产品信息最直观的路径，针对这个场景，我们围绕无障碍、舒服的“清晰”设计关键词，利用卡片化的设计，增强内容的连贯性，使之可以较好地聚合各类信息，更加有利于信息流内容的清晰展现。

为使整体视觉风格轻量化，背景底色采用了带有品牌倾向的灰色以及品牌性的圆角设计，在达到明确边界的同时，使整个卡片与背景有即清晰又相对统一的视觉效果。

2、整体架构优化

上面说到，新氧保险是带有保险和医美双重属性的产品；面对的更多的是年轻的用户群体。为了节省用户的思考成本，本次升级我们优化了详情页整体架构。

1、删除了首屏“保障计划”模块，（该模块专业术语会对保险小白用户带来困扰）；替换成“适用机构”模块，方便用户更便捷的获取有效信息。

2、通过用户反馈，将“用户评价”模块删除；

3、同时，将投保信息模块做成下一步跳转页，减少当前页的信息承载量，让用户更聚焦信息填写

3、内容信息分层

在多文本区域，本次升级简化了一些“不必要”的设计（这些设计不能帮助用户进行浏览或筛选，反而会造成视觉干扰）；更加注重文本间“大小/重量/间距”之间的关系，平横体验感的同时，让用户更加便捷的获取有效信息。

在图文详情区域，沿用此次升级的整体风格，聚焦“高级”“清晰”的关键词；更好的统一视觉语言，传递更加一致的体验感。

B、视觉识别

1、色彩元素

色彩是用户感知产品最直观的方式；好的色彩搭配能够占领用户心智，从而产生联想，其重要性不言而喻；在这次详情页改版的颜色选用上，我们采用了莫兰迪色（高级灰），尽量削弱色彩对用户情绪的影响，反而给用户一种治愈的力量，也符合医美+保险的属性。

2、辅助图形

辅助图形作用主要是传递产品定位，提升用户认知；（新氧保险的产品定位是 “医美+保险”）

从用户感知的角度，盾牌和雨伞是目前保险产品常用的图形符号，但是因为过于具象，加之大众对保险的偏见，反而会落于下乘；另一方面，考虑到平衡画面和适配不同场景，复杂的图形也没有那么好的延展性；圆形本身带有完美，安心的意义在，三个通过黄金比例变形的辅助图形，更加有规律性，贴近于新氧保险想传递的医美+保险的属性；也能更加适合不同的场景应用；

3、图标符号

结合每款保险产品的内容及特点，给每款产品设计出其独特的，贴合特性的图标符号；风格上以纯色的线形为主，更加简约，有记忆感。

C、设计规范

为了满足保险产品的自定义配置，大程度的减少后期上新的压力；基于此次C端保险产品详情体验升级，后台也同时上新了“产品工厂”项目。

1、C端商详模版

2、B端后台辅助

总结

😊以详情页到下单页到转换数据来看，这次体验设计升级从数据反馈上来看也起到目标的效果；