最美UI

360借条(安心贷)设计总结

360借条上线一周年,平台的搭建、经历借条APP从0到1的过程。 获得经验教训及一些自己的想法和设计总结。还在路上,与君共勉。

预告: 10月份360借条品牌升级啦!改成360安心贷。

一、项目介绍

360借条是360集团旗下授权金融服务平台。额度高(最高20万),放款快(3分钟到账)利率低(1千用1天最低只需3毛钱),操作简单为主要特点。主要满足用户从注册授信、完件、借钱、还钱主要流程功能,并辅以个人中心、借还记录等其他功能

二、设计前期/项目调研

了解贷款行业,竞品分析,观察核心功能以及业务流程,体验好的地方,收集问题、分析 、研究思考竞品主要功能,业务流程和信息布局,以及网上和现实用户对借钱的一些痛点,视觉风格、当下流行的视觉风格以及行业风格

三、借条V1.0(初期阶段,能用)

一个字,快!快! 先完成后完美, 从2016.5月份开始搭建借条APP,经历4个月。于2016.9.10上线,搭建主要业务模块,小步快跑从两星期一迭代,变成一星期一迭代。项目时间很紧,当时采用的方法:

1.拆分需求,排列优先级

把大需求拆分成小的,分批设计提交给开发,采用瀑布流式的工作节奏,一边做需求,一边做设计,一边做开发.这样就大大节省了时间。

2.明确设计交付时间

在规定时间下完成设计方案,设计评审、标注切图、交付给开发大哥、视觉还原跟踪、测试、上线

3.根据用户反馈快速迭代优化

 快速上线,快速验证,快速迭代。主要从两方面发现问题,客服的用户反馈、数据反馈、主动发现。

 

比如:当时刚上线一段时间,就出现用户在授信的刷脸环节通过率较低,同时客服扑火,反馈用户咨询较多的问题汇总。出现以下问题,根据这些找出问题的本质:

1.刷脸10次超时,没有详细指引原因反馈

2.保持光线充足下刷脸

3.近视眼看不清刷脸时屏幕下方的图像指引和提示语

4.脸部没有对准识别框

找到问题本质进行优化,同时考虑用户的使用场景,符合心里预期

设计优化:

1.刷脸在第1次失败的时候,就提示指引详情。正确的刷脸教程

2.屏幕上的人脸识别框放大,只突出识别框。旁边的模糊

3.刷脸屏幕下方的人像指引,提示语放大。并语言提示声音调到最大

迭代上线观察数据,转化率明显上升

借条V1.0 总结

1.在多个项目同时进行,项目时间紧急,拆分需求排列优先级

2.控制管理好设计交付时间,及时视觉跟踪

3.在竞争激烈的行业的初期阶段,快速上线快速验证快速迭代,先完成后完美。

四、借条V2.0(好看好用)

用户群体开始稳定,逐渐增加产品形态,这次改版主要是视觉层、交互层

改版主要原因


1.设计风格过时,重新定义视觉风格

2.关键页面交互优化,更多的思考。比如“首页、借钱页面、还钱页面、个人中心”

3.突出核心功能、信息层级,强弱关系

4.视觉规范一致性

了解我们的用户



从用户画像来看,借条的目标用户:来自二三四线城市22-35岁男性偏多。用户特征可以概括为:年轻化、朴实。 结合线上贷款行业的特点以及360品牌安全的特点,我们得到一些视觉设计方向:

一、根据设计关键词,重新定义了色彩和图标风格、设计的整体视觉风格

1.重新定义主色,强调品牌色,搭配辅色平衡视觉,明确色彩层级

通过讨论品牌还是为绿色,延伸360品牌。相比之前明度上有调整,改成更轻盈的绿色,绿色代表安全、安心、活力、轻快的感觉。

这次减少了品牌色的大片使用、只有在关键的指引按钮、文字才出现,突出色彩层级。增加辅色,平衡整体视觉。

2.图标风格扁平化、统一规范化

整理APP内的图标分类(运营ICON,功能性ICON,辅助性ICON)、以简洁、增加识别性的原则,探索图标风格,制定规范。

二、关键页面交互优化、设计优化

主流程关键页面:首页、借钱、还钱 。不断尝试优化关键页面、调整过N稿,经过谨慎考虑,考虑用户场景,把交互视觉做到极致。

设计效果图的时候会思考以下几点:

1.页面突出主要核心功能,当用户处于主流程下时,能快速找到目标入口,满足用户需求、提供快速导流。

2.通过品牌绿色的按钮、文字引导、字体大小颜色对比,突出信息层级,强弱关系。加强信息对用户的传达理解。

3.适当的留白,保持简洁清爽的视觉风格

4.视觉规范的统一性,字体、颜色,按钮的一致性

5.屏幕适配的差异思考

6.符合用户预期的跳转交互流程

借条V3.0 (丰富产品形态、加入产品运营、用户喜欢)

用户群体逐渐稳定增长,放款量蹭蹭往上涨。少不了产品运营、铺渠道、做福利活动。提升注册、促完件、授信、促动支等等。丰富产品形态,一边不断优化产品体验,一边不断运营活动。两手抓!

产品迭代项目:大额增信贷款、主流程不断优化、分期商城、网赚、零钱包等等

运营活动:提额免息、贷中提额、邀请送现金、借条福利周、借条合伙人、PC钱包、马甲等等

借条V3.0 总结:

1. 定期活动总结,通过活动数据越来越了解用户,定义下次活动优化方向

2.配合运营活动,不断丰富产品功能。

3.不断迭代优化产品活动

4.对比行业竞品,不断完善优化产品体验

关于项目跟进心得:

1. 设计稿交付以后,进入视觉走查,开发完成到测试环节开始视觉走查,及早发现问题、修改问题、问题较多的时候,我一般会整理个修改文档,以免漏掉. 确保上线前大部分还原设计稿。

2.最近和设计同事、前端团队分享并使用了一款产品协作平台,觉得非常好用。它可以上传PSD和Sketch文件。可以自动标注和切图.为设计节省了大量时间,对前端同事也十分高效,点击可以查看标注,还可以复制前端代码,方便项目管理。这样就能节约更多的时间放在思考优化交互设计上。说了这么多,它就是:!!(没有拿广告费)

3. 建立公共组件库,提升开发复用率,保持样式统一

比如:按钮样式、弹框(有标题、无标题)、控件元素、图标、状态页、公共面板等

4. 制定APP视觉规范,方便跨部门合作

视觉规范包括、颜色、文字大小、控件标注。设计规范也在不断更新完善

思考:

1. 很幸运能完整的参与整个产品从0到1的过程,和优秀的同事团队共事,从需求分析、设计实施、跟踪设计、成果检验。在这个过程中提升了我的设计能力以及锻炼产品思维和沟通协调能力。

2.作为一名UI设计师,给自己定个更高的要求,不仅设计出漂亮的视觉设计。还要从用户角度考虑问题,对产品的了解,多参与需求分析阶段,培养产品经理思维,做设计的时候才能考虑更全面。

3.学而不思则罔 思而不学则殆。多思考 多总结 Think more!

预告:

10月份品牌升级啦!360借条正式更名为“安心贷”是不是更贴切了我们的产品,做一款安心、有温度的、行业领先的线上现金贷产品。

产品将迭代个新版本,随着新业务拓展同时提高用户体验、品牌形象。需要重新梳理产品结构,并且收集了一些问题,讨论需求,确认设计目标。敬请期待!

分享设计师:Daisychen311

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
24个容易忽略的App设计细节
下一篇
如何快速制作更有效的UI设计规范