header_v1.7.39

滴滴代驾司机端B面UI升级

242天前发布

原创文章 / UI / 观点
井井jingjings 原创,如需商业用途或转载请与井井jingjings联系,谢谢配合。

站在司机用户的角度了解他们的真实需求,提升ui升级,这次系统改版对自己来说也是提升。

其实早在去年的年底,已经对司机端B面的个人中心和更多页面进行了改版设计,但是改版的目的就是纯视觉改版,改版的目的并没有考虑到司机群体的操作习惯和使用场景,所以并没有解决到相关的体验。问题依旧存在。。。



什么是司机端B面

What?

滴滴代驾司机端是一款针对平台代驾司机的app,主要用于帮助他们完成接单、抢单、接送乘客的日常工作流程。而司机端的b面,查看司机所有跟“个人”相关的信息,及钱包、订单、等级等。


写在前面

Who?Where?

他们是一群穿绿背心的代驾司机,在此之前,他们可能是企业的司机,可能是快递员,可能是一个普通的公司职工,也可能是快车司机......他们穿梭在夜间的城市道路中,服务于我们的代驾的乘客们。

但他们也是一群需要被关怀的群体,他们除了“上班”正常的接单外,他们在:“下班”状态下,更关心的是什么?当前页面的设计结构否满足用户的使用需求?



可用性测试

DIY Test

什么是DIY 可用性测试?

DIY 可用性测试绝对是定性的,通常DIY test 只需要3-5位真实用户即可。它不是要证明什么?而是要让我们倾听用户的真实感受,确定要修复的问题及如何修复他们。


调研目的 — 视觉设计

针对司机端B面“更多”和“个人中心”的板块,从视觉设计的角度出发, 找到用户在体验中遇到的问题,并为此研究视觉上可优化的方向。



用户选择 


通过APP叫单的方式,找到5名代驾司机


提问环节





界面浏览 — 更多页面/个人中心


目的:让用户判断我们的框架时候合理?视觉入口是否明显?用户能不能快速查找他们所需的相关内容。


界面浏览结论 — 更多页面


目的:用户在测试环境下浏览界面,从上至下浏览,逐个内容进行点击,查看关注相关内容,或直接点击头像进入“个人中心”页面。页面结构比较散,用户浏览不到重点内容,用户只能地毯式搜索或者凭页面的熟悉程度进行查找。


界面浏览结论 — 个人中心


目的:用户首先点击头像查看等级和经验值,未看到相关信息后在进行查找,相关的文字和icon。新手司机和老司机对个人中心页面关注查找的侧重点有所不同,新手司机更关注客人评价。




情绪板

moodboard

什么是情绪板?

情绪板是一种启发式和探索性的方法,可以对如下问题进行研究:图像风格(photography style),色彩(color palettes),文字排版(typography),图案(pattern)以及整体外观以及感觉。视觉设计和人的情绪紧密相连,不同的设

计总是会引发不同的情感。情绪板也可以作为可视化的沟通工具,快速地向他人传达设计师想要表达的整体。


关键词

结合上文的分析,司机端B面一般是在司机“下班”的状态下使用,在产品的设计上要传递给用户关键词定义为



情绪板建立

基于体验关键词创建情绪板



情绪板关键词提取

总结:moodboard引申出的设计元素会运用到整体页面的视觉优化上,提升品牌感。


情绪板设计元素的提炼


视觉优化方向

Vision Design


根据上述可用性问题调研,总结以下视觉可优化方向


框架结构:优化布局 主次分明


a.调研更多页和个人中心页面的结构布局,增加页面的主次感觉,提炼用户常用模块,让新老用户都能快速找到对应入口。 

b.优化个人中心卡片设计,不改变操作流程,提前露出埋藏较深的入口。


视觉体系化:规范图标 统一设计样式


a.根据moodboard设计元素的提炼,整合优化icon设计

b.优化个人中心卡片设计,不改变操作流程,提前露出埋藏较深的入口。视觉优化 统一子页面设计样式。


线上品牌理念: 品牌辅助体验


a.引入线上品牌理念,建立端内品牌DNA,品牌辅助体验,提要用户对平台的归属感。


UI体系优化 — 更多页面/个人中心/等级体系

Redesign


根据调研报告,对司机端B面的主页面“更多页面”“个人中心”进行UI视觉优化。


页面整合 — 高效浏览 卡片重组

1.重新整理 “更多页面”和“个人中心”页面,梳理框架结构。“等级”、“钱包”、“订单”是司机常用且较关心的业务入口,露出且放大常用入口。重组卡片信息,让内容的层次分明,引导用户快速找到对应的入口。



2.突出“我”页面的等级氛围。在“我”页面,整和了“更多页面”和“个人中心”的重要点击入口,在院线的版本中,青铜、白银、黄金、铂金、钻石 5个司机等级除了文案,没有其它的设计区分,并且司机需要二次点击查看“距离下一等级”相关信息,加强等级入口,重要信息提前露出。



3.等级进度可视化。司机等级通俗来说是区分“好司机”和“普通司机”的重要手段,但在之前实际的运行过程中,发现有一定差异。重构等级体系,让它变得更加合理,为了适配新的等级规则,将等级模块进行可视化视觉设计,在满足功能的基础上,更加强化了司机更关心的功能细节和等级的氛围区分。




视觉体系化 — 规范升级 体验优化


好的设计是高效的,让开发能够高保真还原视觉效果,减少沟通成本,完成快速上线在改版后,升级视觉规范,建立段内的品牌DNA,品牌辅助体验。


1.icon的重新定义。在情绪板提炼出了线和面的元素,可落地在icon的优化设计上,图标作为产品的服务以及品牌传播的视觉表达应具备的一致性。所以在icon的设计上简单、易懂。能让司机准确理解icon的表意。




规范的重新定义。重新定义了B面的设计规范:颜色、字号、icon、列表样式等。



总结


Conclusion


这次版本的更新对自己来说最大的收获是能站在全局、站在用户的角度思考问题,从问题的调研到将发现的问题总结落地到UI上,从整个框架的调整到结构信息的整理。给用户丰富但结构简明的视觉认知。

项目完成并最终落地时,我们看到了代驾司机端使用体验满意度明显上升。但是目前仅是进程的开始,我们的工作并没有结束。比如后续设计需满足更多不同群体司机师傅们的需求,我们将更继续努力基于数据、反馈来定义更好的用户体验。


最后的最后 感谢我的小魔女007( http://jingwli.zcool.com.cn)一起脑爆、一起用研。收获满满  比心 :heartpulse:





1056

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功