案例复盘!用药助手9.0 升级背后的设计思路

文章详细讲述了用药助手9.0升级改版项目从前期准备到设计执行,设计验证的整个过程。

一、项目背景

用药助手运行多年来,为超过千万人次提供了药品查询服务,致力于帮助医生实现「一站式解决临床决策问题」。用药助手已不仅仅是一款药品查询工具,我们希望用户逐渐感知到产品的变化,提升用户对用药助手的认知。

用药助手拥有大量数据,数据查询和展示是用药助手体验设计的重点和难点。旧版本存在样式不统一,浏览体验不佳,交互不一致等易用性问题亟待解决。

品牌设计方面,产品没有形成完整的视觉识别体系,存在颜色,图形等使用无序的情况。

由此,我们确认了我们的升级方向:强化定位、设计增值。

案例复盘!用药助手9.0 升级背后的设计思路

二、关键目标

根据升级方向,我们确认了本次的具体关键目标:

  • 增加功能模块和内容曝光,提升用户自发的内容输出和互动,从而提升活跃和产品认知。
  • 解决目前存在的不统一,不一致等易用性问题,让产品操作效率更高,浏览更加舒适。
  • 为用药助手升级视觉体系,包括Logo,颜色,图标,纹理,插图,组件库等。

案例复盘!用药助手9.0 升级背后的设计思路

三、升级方案

全面升级整个产品是个庞大的工程,我们按照功能模块,梳理了产品所有界面。从业务方向,易用性,品牌感出发,深入到改版方案的方方面面。

案例复盘!用药助手9.0 升级背后的设计思路

1. 强化产品认知,提升易用性

我们针对用户常用关键性页面,借助数据分析,帮助决策设计方案。用药助手是一款成熟的工具型产品,大部分用户已养成使用习惯,我们需要尽量在不影响原有用户的使用习惯的基础上,进行优化改进,帮助强化产品认知,提升易用性。因篇幅有限,将选择部分页面举例说明。

例1:首页优化

首页模块分为:主搜索,功能区,热门推荐,TabBar。

案例复盘!用药助手9.0 升级背后的设计思路

主搜索:根据对以往页面PV,UV数据发现,绝大部分的用户会在首页使用主搜索。主搜索一直以来都是用户最常使用的绝对优势功能,因此首页需在不改变主搜索的主导位置的情况下,进行优化。

功能区:功能区承载了用药助手提供给用户的更加多样化的各类数据服务,帮助医药工作者更好的进行临床决策,我们加高了区域的高度,并重设计了图标,希望以此提升用户对功能区的关注度。功能区图标保持原有的位置,色调,避免影响用户的查找效率。

热门推荐:区域名称在旧版中为「用药经验」,其实,模块中包含了专题,问答,经验,学术等多种文章类型。因此,在新版中,我们更改模块名称为「热门推荐」,并且对展示样式进行了优化。考虑到文章标题长度,阅读流畅度,以及图文,收藏量,分享量的呈现更有利于吸引点击,热门推荐模块改成统一的图文列表样式进行展现。

TabBar:新版本我们交换了「用药分类」「用药指南」的位置。用药助手拥有5,000+权威指南,用药指南在现阶段是比用药分类更加需要突出的功能模块,希望通过位置的调整,增加用药指南的使用率。

例2:用药指南改版

用药指南模块分为:标题和搜索,最新指南,科室分类查找,制定者分类查找。

案例复盘!用药助手9.0 升级背后的设计思路

标题和搜索:根据分析观察以往数据发现,用户习惯使用搜索查找指南,因此保持搜索的主导位置。新版增加了空间利用率,并在主标题旁边加入简明扼要的功能介绍,帮助用户理解功能点。

最新指南:旧版最新指南使用了彩色卡片,横向滑动形式展示,不利于内容展示,阅读,查找。新版设计梳理并统一了整个产品中指南列表样式,方便用户阅读查找。

科室分类,制定者分类查询:新版设计重新规划了模块位置,把搜索,科室分类查询,制定者分类查询放在同一区域,方便用户从不同维度快速找到需要的指南。

2. 品牌设计

品牌色

品牌设计之初,我们首先升级了品牌色,我们从场景提取色调,结合情绪板,最终提炼并定义了我们的品牌色「皇室蓝」。新的品牌色相对之前的颜色,更加明快,会给人「新」的感觉,并且用户通过相关场景的联想,很容易与品牌色建立联系,加深品牌印象。

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

品牌标志

用药助手从开始运营至今,一直采用 「药」字形结合丁香园花瓣元素,识别性较强,和丁香园品牌延续较好。我们继承了这个设计点,在此基础上优化升级。从产品出发,提炼关键字 「端正」「有力」作为设计方向,对字体进行了重设计。

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

APP 品牌基因

用药助手拥有大量的药品数据,我们联想到药物常见的分子结构-苯环,由此提取了「六边形」这一基础图形进行延伸,并结合 「端正」「有力」构建我们的视觉语言。

案例复盘!用药助手9.0 升级背后的设计思路

用药助手产品页面中,到处可以看到 「六边形」这个视觉语言的融入,从图标,按钮,组件,背景纹理,插图等,都采用统一的,成体系的视觉表达。

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

设计规范

在项目全面开始设计之前,我们在丁香园 DUI 组件库的基础上,制定了拥有用药助手品牌特色的组件库,以此来保持设计过程中的统一性以及提高团队之间的协作效率。

本次升级,很大一部分工作量是视觉和交互的调整,涉及到所有列表,搜索样式,文章展示等 ,我们推动开发团队在搭建页面时,建立通用开发组件库,从而提升后续的开发效率和走查效率。

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

设计验证

对本次关键改动点进行数据埋点,验证改版效果。如:用药指南查询效率对比,下载落地页转化率等。我们还在上线后做了产品满意度调查,用于验证改版效果接收用户反馈。

例1:整体满意度调查

我们通过调查问卷的方式,调研用户对用药助手整体满意度评分,量表为1-5分,用户对旧版本整体满意度均分为4.26分,对新版本的整体满意度均分为4.35分;用户对旧版本打5分比例为34.89%,新版本为42.24% ,结合其他反馈,总体来说,用户对新版本的满意度较高且相比于旧版本有所提升。

案例复盘!用药助手9.0 升级背后的设计思路

△ 注:本次问卷调查共有4072人次参与,其中完成人次3206人。本次参与调研的用户主要为有浏览用药经验文章习惯的用户,且存在部分用户选择版本与其本身使用版本不符的情况。调研结果仅供团队内部参考。

例2:用药指南改版前后查询效率对比

我们对比了8.5/9.0版本从临床指南页面点击「科室」、「制定者」的平均时长。由数据结果易知,9.0版本相比8.5版本从临床指南页面点击「科室」、「制定者」所花费的平均时长均明显缩短。本次改版用户查询指南的效率明显提高。

案例复盘!用药助手9.0 升级背后的设计思路

案例复盘!用药助手9.0 升级背后的设计思路

写在最后

项目启动到顺利上线,得到了来自产品,设计,开发,测试,数据分析师同事的全力支持和配合。设计的全面升级,很多情况下是低优先级的需求类型,这次升级的顺利推动,除了项目本身升级目标以外,还得益于团队内部对产品体验的重视和认同。

本次升级不尽完美,还有很多需要完善的地方,我们将关注改版后的反馈和数据,持续迭代,给医药工作人员提供更好的产品体验。

案例复盘!用药助手9.0 升级背后的设计思路

欢迎关注作者的微信公众号:「花厂设计招待所」

案例复盘!用药助手9.0 升级背后的设计思路

「优秀团队的改版设计案例」

收藏 36
点赞 4

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。