交互学堂
专注分享专业知识

重新设计拉勾APP (附Axure交互原型源文件)

起点学院

因360关闭影响更新了新下载地址:链接: https://pan.baidu.com/s/1nuUWbK9 密码: hvp6

从15年9月中旬选定拉勾APP作为重新设计的对象,到今年3中旬刚刚完成了交互原型,耗时3个多月(中间家里有事回去了2个多月),终于完成这个面试作品——Redesign拉勾APP。

本次Redesign拉勾APP,主要是尝试交互设计之父 Alan Cooper 的目标导向设计并结合自己的理解来进行的。通过这次的Redesign,深深地感到要想设计出一个优秀的产品,其背后要做的和要思考的东西非常多,优秀的产品设计出来并不容易(难怪试用竞品的时候,发现有那么多如此糟糕的APP,以至于作者都有种想吐的感觉!)。

设计不是一蹴而就的,是一个不断改进的过程,时间关系,前阶段的成果可能有部分需要更新的没有改过来,不过总体的思路方法还是不变的。

最终的交互原型先睹为快请点击:
(1)浏览器查看交互原型(下载解压后点击“index.html”这个文件进入浏览器查看即可):https://yunpan.cn/cY66LpgXIbzxI  访问密码 59c2     (2)Axure交互原型源文件:https://yunpan.cn/cY66YZvuFCEeW  访问密码 b112

因360关闭影响更新了新下载地址:链接: https://pan.baidu.com/s/1nuUWbK9 密码: hvp6

好了,以下是正文,欢迎大家讨论交流,共同进步,如有不对的地方,欢迎指出!

注:点右键“在新标签中打开链接”可以查看高清大图。另,因为本文有很多高清大图,可能遇到图片加载很慢的情况,请耐心等待一下,不要太着急哦。

1.产品定位

拉勾的口号是:专业的互联网招聘平台,专注互联网职业机会。应用商店的介绍文案是:专为拥有3至10年工作经验的资深互联网从业者,提供工作机会的垂直招聘平台。然而,APP却是针对有不同工作经验的人设计,因此宣传文案有问题。另外,从虎嗅网发表的文章中了解到: 从拉勾网建立的第一天开始,马德龙要求所有产品的设计和服务都是围绕着求职者来展开的。

综上,拉勾的定位应该是以求职者为中心、不限制工作经验、专注互联网领域的招聘平台。(应用商店的宣传文案应该改过来,以免“吓跑”很多潜在用户)。

lagou1

lagou2

lagou3

lagou4

lagou5

lagou6

 

2.竞品研究

拉勾APP是互联网垂直招聘平台,作者试用了互联网类垂直招聘APP和其他APP,希望在需求/功能层面和展示/操作层面取其精华去其糟粕。

互联网类垂直招聘APP——内推APP,哪上班APP,周伯通招聘APP,电猴APP;

其他APP——智联招聘APP,前程无忧APP,赶集工作通APP,58同城APP,大街网APP,领英APP,猎聘同道APP,途盯招聘APP,找啦APP,小职了APP,BOSS直聘APP。

【内推APP】

总结:交互问题很多,基本没有借鉴的价值。

eg:简历动态消息查看不直观快捷,信息提供不够充分,内容布局无重点;职位详情页内容没有统一规范,不便阅读;不能查看公司等等。

【哪上班APP】

总结:交互问题也很多,基本没有借鉴价值。

eg:搜索结果有大量不相关的职位;多余的搜索页面转场;搜索结果没有筛选项;缺乏重要的信息(如公司地址,薪资);简历动态消息隐藏太深,订阅推送占用了重要的位置;等等。

【周伯通招聘APP】

总结:需求/功能层面、展示/操作层面基本无借鉴价值。

需求/功能层面——虽然周伯通APP也是主打互联网招聘,但是跟拉勾APP还是不同的。前者是招聘+职场社交+求职,太复杂,而拉勾APP只专注于招聘。

展示/操作层面——没什么亮点和可以学习借鉴的地方,首页卡片的左滑不感兴趣、右滑喜欢,貌似用不上。

【电猴APP】

总结:交互问题很多。基本没有借鉴价值。

eg:导航不合理(资讯和找工作放在同类)重要内容(找工作隐藏在二级页面)没有突出;强制用户提前填好筛选信息;公司简介缺少地址;等等。

【智联招聘APP】

教训:

职位类别要经常更新检查(职位类别竟然没有热门的“交互设计”);

考虑借鉴:

需求/功能层面——1.对于急招的,用“急”角标突出;2.筛选 (地域/地标,地铁的 ,学历 ,发布时间 ,公司性质 ,公司规模 ,工作类型(全职/兼职/实习) );3.“附近职位”的功能;4.投递反馈增加“投递成功”的状态项,让求职者更放心。 系列文案为“投递成功,已被查看,对我有意,邀请面试,暂不合适”

展示/操作层面——1.右滑同级切换;边缘右滑返回上一级;2.列表页可以收藏职位;

【前程无忧APP】

考虑借鉴:

需求/功能层面——1.筛选条目标明了数量;2.关键字排除筛选;

展示/操作层面——填写信息时,有一条浮动工具栏(上一项/下一项,收起键盘)

【赶集工作通APP】

总结:需求/功能层面、展示/操作层面基本无借鉴价值。

【58同城APP】

总结:需求/功能层面、展示/操作层面基本无借鉴价值。

【大街网APP】

教训:

1.手机号、验证码、密码应该在一个页面,减少跳转;

2.填写当前公司、当前职位以筛选显示不妥(要考虑到想换职位的人)。

【领英APP】

总结:需求/功能层面、展示/操作层面基本无借鉴价值。

【猎聘同道APP】

考虑借鉴:

需求/功能层面——1.地图模式查看公司位置;2.可以私信;3.可以看同道er;

展示/操作层面——1.浏览过的职位变灰(全系统);2.非边缘滑动即可返回。

【途盯招聘APP】

总结: 很多问题,无借鉴价值。

【找啦APP】

总结:很多问题,无借鉴价值。

【小职了APP】

总结: 很多问题,无借鉴价值。

【BOSS直聘APP】

教训:

1.(要填写的信息太多)应该可以保存未完成的信息;

2.要筛选职位时需要填的信息太多了(要先填写微简历)。

 

3.用户建模

【目的】

将海量的用户和潜在用户浓缩简化成一个or几个人物角色,作为设计产品的根据,方便设计,方便团队交流达成共识。

【方法】

实际工作中主要有2种方式来进行用户建模:

(1)有时间和资源的话,专门进行用户调研收集大量数据资料(条件好的公司有专门的用研人员),然后根据这些调研结果来建立人物角色。这个方式最有效,最可信,同时成本也最大。

(2)没有时间和资源的话,就只能凭行业经验 or 收集研究相关的资料 or 访谈有相关经验的人 or 小范围用户调查了 or 设计人员自己的推测来建立了。

当然,方式(1)和方式(2)可以一起使用。

由于时间和资源关系,作者本次是通过自己的推测简单建立的人物角色,严格说来是固定型(有效度方面:人物角色>即兴人物角色>固定型)。

【人物角色】

陈莉:

22岁,女,应届毕业生,电子商务专业大四学生。

张磊:

23岁,男,是一家科技公司的iOS工程师,刚入行不到1年。

吴欣:

25岁,男,是一个有2年经验的交互设计师。每天坐车上下班,朝九晚六,周六日偶尔加班,工作上的事基本都能胜任,工作比较稳定。对于现在的工作还算满意,但是有机会的话,他想换个更理想的工作。

王晓燕:

28岁,女,是一个有3年产品经验的产品经理。

胡力:

30岁,男,互联网资深从业者,是一家移动互联网公司的技术总监。

每个人物角色的目标、痛点、行为习惯等都不同,投射到产品上就会各有侧重,由于产品的定位是覆盖不同工作经验的群体(ps:这样的定位大大增加了产品设计的难度),因此作者认为在设计中应尽量取几者的交集,适当兼顾并集。

一方面作者觉得几个人物角色的交集很大,另一方面作者对其他人物角色暂时不太了解,于是接下来的阶段主要以人物角色吴欣为对象进行分析和设计,并适当兼顾其他几个人物角色。

 

4.定义需求

大体分为5个步骤:步骤1——创建问题综述和前景综述;步骤2——头脑风暴;步骤3——确定人物角色的期望;步骤4——构造情景场景剧本;步骤5——确定需要。步骤3~5可能反复循环。

【步骤1:创建问题综述和前景综述】

问题综述:

目前的拉勾App(v1.1.0,iOS),在需求/功能层面和展示/操作层面都有不少待优化改进的地方。

前景综述:

根据产品定位,从起点开始重新设计,并结合现有拉勾App优点,以求在需求/功能层面和展示/操作层面都更好地满足目标用户群。

【步骤2:头脑风暴】

注:头脑风暴越多人参与越好,目的是以开放自由的方式探索尽可能多的用户的目标、使用情境和解决办法。条件有限,此处为作者一个人头脑风暴。

头脑风暴-Redesign拉勾App-显示2级:

头脑风暴-Redesign拉勾App-显示2级

 

头脑风暴-Redesign拉勾App-显示全部:

头脑风暴-Redesign拉勾App-显示全部

 

【步骤3:确定人物角色的期望】

理想的情况下,是根据前期的用户调研数据,来推测确定人物角色的期望(有的访谈者不方便告诉调研者自己的目标,有的访谈者自己也描述的不全面不准确,因此主要靠调研者根据用户的行为来推测用户的期望or目标)。

现在作者主要是根据自己的期望(自己也是求职者)+同理心推测来确定人物角色的期望。(头脑风暴时已经为本阶段做了很多铺垫,剩下只是再一次梳理确认了)

人物角色总的期望是尽快找到自己满意的工作有一个更好的发展。更具体的可以分为以下几个方面:

#想掌握现有情况

1.关于工作:

1.1.想了解所有现有的机会;

1.1.1.薪资,行业薪资;

1.1.2.职位描述,职位要求;

1.1.3.团队成员(跟自己直接相关的人,跟自己间接相关的人,团队氛围);

1.1.4.环境(工作环境,地址,上班路上要多久);

1.1.5.未来发展(公司融资情况,公司自我介绍);

1.1.6.了解职位的竞争状态;

1.1.7.其他(经常加班吗?其他福利待遇如何?);

1.1.8.信息的真实性;

1.2.想随时随地掌握新出现的机会;

2.关于自己:

2.1.是否胜任;

2.2.现在不胜任,未来一段时间后可以胜任,希望还有机会;

#想很好地展示自己

想充分展示自己,扬长避短地展示自己

#想快速做出决策

想快速知道HR对自己的态度,以便自己快速做出决策。

#其他

1.不想让某些企业知道自己正在找工作;

2.特殊情况也能处理好:eg:发现问题时能修改简历;不小心点错了可以撤销;投了之后后悔可以撤销;等等;

3.能够联系HR:eg:有些关于公司的疑问想了解一下;想知道为什么未通过;能够答复HR对简历的一些疑问;

 

【步骤4:构造情景剧本】

以下为主要的情景剧本:

剧本1:

吴欣上班途中,在公交上,突然来了一条拉勾推送消息,是新增了12个他关心的职位(之前他已经设置好了),他点进去,看了看职位描述、职位要求公司的介绍、团队成员等,还看了看求职者的评价,都还不错,于是投了简历了。

剧本2:

吴欣想看附近的工作机会,于是他切换到了地图模式,发现附近有几个机会,同时发现通勤耗时才半个小时左右,非常高兴,点进去详细了解后,有几个满意的,于是投了几个简历,然后继续看更远一点的工作机会。

剧本3:

一天中午,吴欣手机振动了一下,一看是拉勾的推送消息,原来是之前投的简历刚被HR查看了,吴欣开始有点兴奋,又有些期待。过了一段时间,又来消息了,是进入了通知面试阶段,不久后有人打电话过来了,是刚才的HR通知面试,吴欣很兴奋,接完电话后,将这个面试添加到了面试日程里。

剧本4:

吴欣打开拉勾一看,发现又有3家公司向他发出了面试邀约(之前吴欣开启了拉勾Plus功能),他逐个看了一下面试公司和面试职位,看了一下待选面试时间,应邀了其中1家公司(选定了面试时间,等HR确认),另外1家由于时间冲突再另约面试时间。对于不感兴趣的那一家,吴欣直接拒绝了。

剧本5:

吴欣如约去到了一家公司面试,前台接待很漫不经心,爱答不理的感觉,水也没喝上,面试过程感觉面试官有种高高在上的样子,让吴欣感觉很不爽。面试回家途中,果断打开拉勾App,对这个公司吐槽了一番。

剧本6:

晚上吴欣查看了一下面试日程,明天还有3个面试,后天有2个,星期六还有2个。根据面试时间,他计划好了自己的行程。到第2天出发时,他打开拉勾,再次确认了一下坐车路线。面试结束后,他要赶去下一个面试,于是他再次打开拉勾确认了坐车路线。

剧本7:

吴欣听说某家公司很不错,他想看这家公司在招交互没,于是搜索了一下,查看了公司招聘职位,发现还没招交互,但他对这家公司很满意,于是关注了这家公司。之后的某一天,吴欣收到了拉勾推送消息,一看,原来这家公司开始招交互了,于是吴欣赶紧投了简历。

剧本8:

拉勾App上吴欣突然收到了一个HR的私信,说在线作品链接打不开,吴欣赶紧查看了一下果然打不开,于是更新了原来的链接,并给HR发了一个新的链接过去。后来吴欣在检查自己的简历时,又发现有一处错误,于是赶紧修改了。但是刚才已经投出去了几份简历。吴欣赶紧看了一下简历状态,有的简历还没有被查看,于是撤回了,重新投递了新的简历。

剧本9:

吴欣又看到了一个不错的职位,看了一下系统的通勤估算时间(之前已经设定好住址了),1个小时,还算满意,但是今天的投递次数已经满了,于是收藏了等第二天再投递。

剧本10:

吴欣收到一个面试邀请,他点进去查看后,发现有面试评价说公司给的薪资跟描述不符,吴欣担心是否真的给不了那么多薪资,于是他给HR私信问薪资能否给到描述的那么多,不能给到那么多就不去面试了,免得浪费彼此时间。后来从HR的回复后得知不能给到那么多时,吴欣就放弃了这家公司的面试机会。

剧本11:

晚上,吴欣看拉勾上一篇写某个公司的文章时被文章打动了,感觉这个公司很棒,同时发现这家公司刚好有自己想要的职位,于是打算投简历,但是想到今天晚上可能有不少求职者也投了简历,他不想自己的简历被这么多简历压在下面,于是他选择了定时投递(选择了他满意的10:30)。

 

【步骤5:确定需要】

本步骤目的是根据上一个步骤来提炼出相关的需求,然后根据这些需求来定义相关的功能元素、数据元素、技术要求等等。这个应该就是传说中需求文档的主要内容了,需求文档作者还没尝试过,以下是作者习惯用的思维导图的方式,尝试将所有的需求/功能逐级梳理出来。

需求/功能梳理图-Redesign拉勾App-显示2级:

需求/功能梳理图-Redesign拉勾App-显示2级

 

需求/功能梳理图-Redesign拉勾App-显示全部:

需求/功能梳理图-Redesign拉勾App-显示全部

 

5.信息架构图、流程图、线框图

这3个图的产出不是固定的先后关系,有时有的部分要等其他2个图确定了才能定。

信息架构图

上个阶段的需求/功能梳理图为这个阶段的信息架构图做了很多铺垫,这个阶段只要在需求/功能梳理图调整组织结构,完善相关的信息即可,有暂时不能确定结构关系的,等流程图/线框图确定了再来调整。

信息架构图-Redesign拉勾App-显示2级:

lagou11

 

信息架构图-Redesign拉勾App-显示全部:

信息架构图-Redesign拉勾App-显示全部

 

流程图

主要任务流程图:

主要任务流程图

 

主要页面流程图:

主要页面流程图

 

线框图

以下是作者的手绘草图,在此阶段并没有什么细节,重点是放在页面间的流程和大概的页面框架上。

lagou14

360云盘分享地址:https://yunpan.cn/cY66vGNiiI49Q  访问密码 2677

 

验证检查

在基本的线框图出来后,最好做一下全面的检查,防止在交互原型阶段出现重大漏洞(交互原型阶段有很多细节,改动成本远远比线框图大)。作者觉得再写验证性情境剧本来检查很费时间,于是仍然用思维导图的形式,逐级展开,不断质疑。

验证检查-显示2级:

验证检查-显示2级

 

验证检查-显示全部:

验证检查-显示全部

 

6.交互原型

本次的这个交互原型主要以文字说明的形式,同时做了基本的简单的页面跳转&简单的交互动效。作者做的过程中发现,有的地方直接跟工程师口头说or找个示例给工程师看会高效很多(因为有的交互效果文字说明不好表达or做出来比较费时)。

lagou17

360云盘分享地址:

(1)浏览器查看交互原型(下载解压后点击“index.html”这个文件进入浏览器查看即可):https://yunpan.cn/cY66LpgXIbzxI  访问密码 59c2

(2)Axure交互原型源文件:https://yunpan.cn/cY66YZvuFCEeW  访问密码 b112

7.其他

以下记录了这次对现有拉勾App的主要优化和新增以及相应的思考。

对现有拉勾App的优化和新增-显示2级:

对现有拉勾App的优化和新增-显示2级

 

对现有拉勾App的优化和新增-显示全部:

对现有拉勾App的优化和新增-显示全部

 

8.完

虽然原型完成了,但作者认为在实际工作中还有很多事情要做——完成的设计需要听取用户的反馈然后不断改进(没有100%了解用户的神,因此我们要多了解用户,让自己的设计逼近100%);业务目标变动,市场变动时也需要相应地调整设计;产品设计人员自己还需要对产品全局不断地走查,不论是查漏补缺 or 完善流程 or 优化细节,而这些都是需要花费大量的时间和精力的。

一切才刚刚开始。。。

————————————————————

我的新浪微博:行者小一2008

我的简书:行者小一2008

我的LOFTER:http://xingzhexiaoyi.lofter.com/

欢迎关注,欢迎学习交流。

未经允许不得转载:IAMUE_专业交互设计平台 » 重新设计拉勾APP (附Axure交互原型源文件)

交互设计问答社区

寻找答案发起提问