彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

VTM项目总结

沉淀与总结才能让项目高效的交接下去,同时也能使自己收获更多。

VTM项目算是自己参与的一个相对比较完整的项目,在项目里主要负责设计,交互还有前端实现方面的职责。最近得闲,把一直没空整理的东西好好的做个记录,写下自己的收获与感想,也方便团队其他成员执行。

项目流程

市场行情的调研——需求收集整理——草图交流——低保真原型图——评审确定完整的交互流程,业务元素——效果图设计——前端实现——配合后端修改——测试——项目上线。

VTM市场定位

客户角度:便利的各类自助业务。通过视频的方式,减少排队等待,能满足任何时间点,任何地方(不需要营业厅)即可办理原需要去营业厅才可以办理的例如开卡,产品购买,贷款等业务。

银行角度:减少营业点的开设,减少柜员人员开支从而降低银行成本,还可以推送一些理财业务,提高银行收益。

VTM需求收集

1、通过各种渠道,查阅基本信息概念;

VTM不仅能够查询、存钱、取钱和转账,而且还能够进行发卡、销户、挂失、存款证明开具等传统的银行柜面业务。同时,通过VTM上的视频会议系统,用户能够和银行客服人员进行对话沟通。银行客服人员也能藉此对用户的身份进行判定,并为用户提供贴身一对一的可视化服务。

VTM在国外,其多被称之为VideoTeller Machine。而在国内,除了将其简称为VTM外,中文我们一般将其称为远程柜员系统或者虚拟柜员系统。

通过用户和远程银行柜员之间的远程音视频通话和桌面共享,VTM设备可以帮助用户实现对公对私、国际国内、本外币、金融理财等全方位金融服务;此外,像身份信息采集、资料扫描、票据收纳、回单打印盖章等等,都可以通过VTM自动化引导流程帮助用户完成。在使用时,用户仅需填写业务申请、提交相关单据就可以自助完成交易。

2、实际体验。去有上线VTM软件的各大银行实际操作,拍照记录,并总结分析。

图1:中国银行VTM主页

3、产品经理提供各类产品文档,分析与该软件相关的业务文档,综合分析。主要目的是了解业务场景和一些业务规范,加深对这个新产品的印象。

草图交流

由于当时交流的草图没有拍照,所以没有图片

低保真原型图

内部讨论期,我们的通常做法都是先确定首页风格,所以其他逻辑只是文档解决,设计这块主要是以定首页为讨论标准。

图2:内部交流期首页低保真原型图



评审确定完整的交互流程,业务元素

当时我们确定了以下几个主要的业务流程,其中的一些元素涉及到具体业务,故省去。

一、开卡

插入身份证——身份审核——阅读协议——填写信息——申请表拍照——客户拍照——密码设置——凭证领取——取卡

二、取现 

插入卡片——卡片验证——输入密码——选择金额或者输入金额——交易处理中——提现——是否打印凭条——取卡——取现

三、改密 

插卡——卡验证——输入密码——重置密码——确认密码——交易处理中——交易结果——打印凭条动画提示——取卡

四、查询 

【流程1】插入卡片——卡片验证——交易处理中——查询结果——取卡【流程2】插入卡片——卡片验证——输入密码——交易处理——账户明细——取卡

五、转账 

插卡——卡片验证——输入密码——输入卡号——确认卡号——输入金额——交易处理中——交易结果——打印凭条动画提示——取卡

六、网银签约 

 插卡——输入密码——插入身份证——选择业务——填写信息——设置密码——Ukey发放

效果图设计

图3:首页设计




图4:二级页面




图5:三级页面




前端实现

当时我负责前端静态页面和前端效果编写。

按照客户的要求,首页要求有3D旋转的效果,我当时是引用了一个网上一个开源的特效插件来写的。当时遇到的一个问题就是因为该框架提供的接口比较少,无法实现定制化,而改框架压力比较大。最后与客户沟通,客户最终放弃定制,取比较折中的方案。Ps:当时我采用的一个小技巧就是把代码给客户演示,让客户体会到天马行空的想法实现成本很高,不划算,客户最后主动提出放弃。

首页效果动图以及具体代码demo请见:https://github.com/ColourCloudSky

项目中遇到的问题及解决方案

1、前期对界面需求不明确,甚至没有见过类似软件的时候怎么去设计?

当时是先在网上大量的搜集资料,途径包括使用百度,谷歌去翻阅相关的图片和文档,甚至是各个相关的论坛都会去看,同时对比较类似的产品ATM资料也进行了搜集,比较业务流程上的区别。让自己对VTM有了一些深入的了解。

有了比较深入的认识之后,再寻找实际产品进行体验,写出体验总结并于产品经理进行交流,确定大致的设计方向。

之后在纸上快速的画出自己所设想的原型,每画一个版本就与团队进行沟通,直至最终确定1个方案。

在确定方案草图后我这边就开始做执行,我会做3套方案然后发邮件出来进行沟通(发邮件的好处是便于对比方案,查看历史)

2、在前端实现时期所遇到的问题以及学习到的经验?

【尺寸问题】页面大小为1920px*1080px。

    VTM客户端的机具是定制的,尺寸不会变化,所以暂时不需要考虑适配问题。

【标注问题】由于设计和实现都是我这边来做,所以并不用去标注。上线后才根据实际情况进行了适当标注和设计规范整理,这样做的好处是方便团队设计师。

【代码注释】有相同结构的代码要记得注释好,方便前端和后端复用和修改。

【特殊效果】在当时遇到一个很尖锐的问题就是,客户提出一个很高难度的特效,自己开发写的话很有难度。这个时候可以去网上翻参考,通过搜索特效相近的关键词,比如客户当时要求3D旋转效果,自己开发比较费时间就可以直接去网上找类似的开源库来修改套用,可以很快实现客户需要的效果。

3、客户现场被客户要求反复修改怎么处理? 

开始到客户现场设计时,由于客户的想法非常之多,他还用PPT罗列了10多个布局版本要我选其中几种来设计。由于是在客户现场,所以我用了最快的速度在1天之内做了3个版本给客户看。但是做的过快带来的效果非但没有得到客户的好评,反而让客户觉得实现这个设计的成本非常之低,所以开始对我进行“折磨”,他们想要看到更多版本,期望进行对比来选出最终的效果。经过半个月的折腾,改了不下几十个版本,最终又改回到第一个版本。我当时的内心其实是崩溃的!

通过这次经历让我意识到几点:

(1)在客户现场设计不要太快,要求精,客户希望看到的一个优质的设计而不是一个过快粗糙的设计。

(2)让客户认识到你的设计成本,主动去平衡设计与项目周期。

(3)善于沟通。好的沟通有时候可以省很多个版本的修改,加速项目推进。

(4)在团队内部设计概念版的时候需要快,可以快速迭代设计。而在客户现场则不宜过快,是2种不同的工作方式。

4、如何与团队进行高效的工作对接?

 在工作的时候,我会随时准备一份exl表格,记录下当天遇到的问题待解决的问题,然后每完成一条写上当前问题状态,量化自己的工作,保持高效的处理方式。尽量避免口头表达问题不记录的情况,因为很容易会忘记而造成二次发现问题。

5、设计文件如何保存?

由于更改的情况非常频繁,如果没有很好的管理,要找到其中某一个版本的文件非常困难。建议新建文件夹的时候按照日期+项目名称来写,举例:20150828 VTM首页源文件

各个时期所充当的职责

需求分析——设计规划——设计实施——前端开发——项目跟进——成果检验

该项目是从入职开始接手的第一个真正意义上的完整项目,我参与了从0到1的过程,在这里学到了很多东西,一直来不及做总结,因为断断续续的项目后期跟进以及多版本的改动让我无法及时沉淀,现在转交给其他同事终于可以回顾下自己的工作。

对自己的成长主要分为项目管理,技能管理以及自身综合能力的提高。

项目管理:任务优先级,时间节点的把控,产品沟通,技术沟通。高质量产出,确保端上效果与设计稿基本一致。问题的记录与交接方式。

技能管理:有关设计的一切多去看,多去想去思考为何这么设计,这样做的利弊。采集好的设计,勤做练习,专业度的提升。

自身综合能力:产品思维,运营知识,时间管理。

跟客户的沟通不能停留在界面美不美的问题上,而是要始终围绕产品目标来进行设计,以目标为导向的设计才是最合理的项目推进方式。由于设计师的审美与客户往往不在一个层面上,而客户往往是在他业务领域的专家,如果设计师不综合客户的意见仅仅去考虑设计规范以及美丑的话,就很容易导致争吵和无休止的改稿。 

结语

再忙碌也需要停下来进行总结,总结项目的得与失,这样才能从项目中吸收经验并运用到下一个项目中去,才会让经验变得更有价值!

在设计的过程中,视觉层只是一个表层的东西,需要去思考场景,使用人群,功能拓展,产品的是否解决用户问题,流程是否合理,业务是否创新等等很多其他问题。

以前的成就感可能来自于设计了一个漂亮的界面,而现在的成就感更在于用设计解决了产品当中的问题。

评论
热度 ( 4 )

© 彩云Sky | Powered by LOFTER