我的产品设计总结

原创文章 分类: 经验/观点 版权:
11938 104 328 19
更新于:2018-07-31
首页推荐



16年底到17年下半年,我在KnowYourself(下简称KY)工作了10个月。


KY是一个泛心理学内容平台,没错,它很有名。如果你是一线城市的互联网从业者,微信搜索这个公众号,你至少有100个以上的共同好友在关注它。


我在KY的主要职责是产品设计,也就是产品+所有设计一体的这样一个职位,十个月时间主要做了两款基于微信wap页系统、一次超大型视觉包装、和一个从0到1的app。app由于公司原因搁浅了,在此就不做展示;主要展示两个wap页产品:


PART 1 - 基于微信端的KY咨询师黄页系统


Image title


好,先来说说这个项目故事是怎样的。


KY之前有很多的已入驻心理咨询师资源,这些已入驻咨询师全部都是我们验证过的国内外很专业很靠谱的咨询师,大约有一两百位,之前KY的做法是在公众号下方有一个专门的链接,链接指向是一个“咨询师名+简介+联系电话”这样的表单,KY用户如果有想要进行心理咨询的,可以自己手动翻找适合自己的咨询师并自己联系。

但是我们发现这个事情用户要查找一两百个咨询师,效率太低了。而且真实的用户情景是,很多有心理咨询需求的小伙伴不是很清楚自己的症状是否需要马上就诊,也很难下定决心拨通咨询师的电话,我们认为这样的方式对于有心理疾病的用户来说,联系成本也太高了。


所以我们基于此,打算设计一个基于微信wap端的心理咨询系统,目的是满足咨询师和来访者双端用户,来访者端的用户可以直接在系统内预约咨询师,咨询师端的咨询师可以直接处理预约订单。并且内置一个来访者和咨询师可以实时沟通的IM系统。

Image title


需求背景就是上述那样,我在思考的过程中发现,我们需要设计产出的系统实际有五个部分:

第一是需要设计一个咨询师端wap系统,它需要完成功能:
a、方便来访者快捷筛选寻找咨询师
b、来访者和咨询师的IM模块
c、来访者可以方便的预约咨询师、并且有后续评价系统。


第二是需要设计一个来访者端wap系统,它需要完成功能:
a、咨询师可以便捷的通过绑定微信登录自己的账号
b、咨询师可以便捷的处理自己形成的订单
c、咨询师和来访者的IM模块
d、咨询师可以设置自己的free time供来访者参考


第三是需要设计一个网页端的外来咨询师入驻申请系统,它需要完成功能:
a、外界有资历的咨询师,可以通过微信扫码进入一个资历填写表单
b、咨询师填写上传自己的资历之后上传等待审核
c、审核通过则可直接通过绑定的微信登录系统,审核不通过则提醒修改。


第四是需要设计一个咨询师管理后台,它需要完成功能:
a、审核新入驻咨询师
b、管理现有咨询师资料。


第五是需要为现有的这一两百位咨询师设计一个快速入驻通道,它需要完成功能:
a、让现有的我们已经认证的咨询师绑上微信,这样他们就可以直接使用系统。
b、让现有的咨询师如果有新的履历,可以更新一下。


好,既然已经明确了要求,先总体说说我在这个产品设计过程中的工作流程顺序:


Image title


我们在设计这个系统的过程中,有一些难点,最核心的难点有两个:


第一是由于微信的桎梏,一个基于微信的wap系统是没办法做推送和push的,所以我们想了短信和邮件两种通知办法去解。


第二是由于这是一个纯公益的项目,我们不像传统的接单产品那样在产品内有金钱的流动,所有的心理咨询费用全部是由双方商谈然后线下结清,所以既然没有金钱的参与,我们到底应该如何判断这一单已经成了,就是一个很大的问题。而且我们设计只有双方都有沟通意愿才会开启IM通道,所以如何判断这一单成没成,以及如果没成是因为什么原因,这就是一个很复杂的判断逻辑。


所以我们创新的设计了一个wap页内每次打开产品的模态push,去验证成单和评价状况:


Image title

Image title


难点疏通之后,其他的就是常规的原型 - 过审 - UI - 切图的阶段了,就没啥好说的了,基本上就是很常规的设计。最后的产品图如下所示,大家也可以去体验线上版本,在公众号KnowYourself,点击下方的“心理咨询”-“咨询求助”里;


下图两张是最后的UI稿,在色彩上,尽量显得严肃和干净;在UI上:

1、因为是一个微信内wap端的产品,所以拒绝一切滑动交互,一律采用最简单的点击交互。

2、由于是咨询平台,所以UI上不做过多花哨的渐变样式修饰,只用轻微Box shadow属性。

3、能用Native的控件一律使用Native控件。


Image title

Image title


PART 2 - 基于微信端wap的KY BBS系统 

Image title

这个系统其实没啥难点,就是做了一个传统意义上的版聊+IM的BBS,为了验证KY粉丝的社交需求,上线之后发现需求确实比较强烈,所以现在已经从线上撤出进行重构。没有体验过的小伙伴可能是看不到这个版本了,由于比较简单,逻辑也很清晰,所以我只放几张图就好:


Image title

Image title

Image title


在之前的工作中,其实我们有对KY的用户颜色进行过一次划分,我们会发现,在KY平台上有社交需求的,无非有三类大用户群:

第一是看了KY的文章有些感悟,想要寻找志同道合朋友的社交需求。

第二是类似于粉丝征集栏目里的粉丝想要倾诉自己故事的“讲故事欲”。

第三类是经常留言问KY发不发小姐姐和小哥哥的期望脱单的用户。


所以在产品设计中,我们主要划分了三个频道,分别用不同颜色去承载这三个频道,频道之间相互独立,但是又一个“全部”大类方便用户浏览所有。


Image title


在第一版UI出来之后(下图左),我们自己和同事会发现颜色用少了,由于我们的频道是按照颜色去区分的,所以对于新用户来说,更加希望他不需要教育成本,一点进来就看到他所在的频道,最好能在第一时间就形成颜色和频道的关联记忆,所以改成了上线的版本(下图中)。


Image title

Image title


PART 3 - KY自我探索嘉年华主视觉设计

Image title


这是一个纯视觉项目,比较大型,千人级别线下场馆。

前前后后设计了无数个版本,都在UI中国我的作品集里面发过,大家可以点击跳转观看:


前期版本:2017KY嘉年华前期视觉提案 


最终上线以及现场效果视频:KnowYourself Carnival 2017 系列




PART 4 - 唱吧v8.6


2017年9月,KY搬家去上海,我也离开了KY加入到唱吧大家庭,担任UX设计师。

唱吧app作为一款全民级唱歌社交产品,在亿级体量面前,用户跨度极其巨大。所以唱吧UED团队之前的用户分层结构上,采用的UI设计策略秉承的观点是中性为主,既要满足年轻用户也满足中年用户。


我入职唱吧几个月时间,从信息架构到功能布局到交互和动效上都进行了梳理,提出了一些自己的一些想法和建议,也初步制定了交互框架。这些建议会在唱吧未来的版本中慢慢的得到体现,大家如果是唱吧的用户,可以期待一下唱吧年前的一个全新的8.6版本。


这部分总结内容请点击下图移步:

Image title

点击上图查看





PART 5 - 写在一年末尾的话


我习惯用自己工作的上线作品做总结、甚至于我的简历里,也全是上线作品。我认为那是一种态度,哪怕有时候由于各种原因,上线版本不一定符合你心目中的样子,但是作为设计师,起码应该有自己的思考,并在工作之余自己去优化到你认为最佳的状态。


当然这样的前提是,你要爱设计这件事情。


我的设计师朋友私下开玩笑的时候,有很多设计师不愿意用现在工作的项目放在自己简历里,笑称万一哪天心情不好离职了呢。其实离职这件事吧,为了自己的个人发展,跳槽啦,离职啦都是正常的事情,但是我觉得这是你不用上线作品做简历的原因。用自己的工作产出做简历,起码能够体现的是你在你工作这段时间,你的思考和专业度对公司的价值。


我们设计师,尤其是视觉设计师和大多数小公司的UI,在工作中总是被当做执行部门,所以久而久之,也就没有话语权,自己的想法也得不到施展。


我的公众号下面经常有人会跟我抱怨这个抱怨那个,要么是需求方(运营、市场)怎么怎么没有审美,要么是这个产品那个产品怎么怎么傻逼。


但是我经常会觉得,设计的魅力有些时候不是说有一个多么多么好的产品、UI或者交互的idea,设计的魅力有时候也不是说要去做一个多么多么震撼的视觉。


设计是优雅的解决问题的的方式。


只要是解决问题,那就一定是带着镣铐跳舞,你会遇到种种桎梏,需要多方平衡。你的设计稿是否影响了运营团队的KPI?你的UI稿是否太过于追求形式感让用户迷失?你制定的新的交互逻辑会不会影响公司的营收?你新归纳的信息架构是否会让用户感到不适?


你是否知道,不同量级的产品有不同的设计和迭代方法,如果是一个用户量很少的刚创业的产品,找方向的阶段完全可以说改就改,敏捷开发,如果被骂了,说明该功能是用户刚需,再去好好研究如何设计就好。但是一个大量级产品,改一小点都牵连甚广兹事体大,必须心存敬畏战战兢兢,最好是修改之前能提出相应数据变化和理论支持。


马上是新的一年,马上是新的开始。


我一个90后,从2012年搜狐的UI/视觉设计实习到今天,貌似产品设计什么都粗略会点儿的5岁设计师。仔细想来,这几年也是全凭着爱设计这这件事情才一步一步自学走到今天。


明年就6岁了,可以上一年级了。


“嘀,小学生卡~”


微信公众号:Seanydesign

Seany

5348粉丝/143关注

2017年度最佳作品集TOP50得主
App的视觉美成因分析从交互维度量化用户体验

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN