58PC职位详情页改版:深入用户,“职位”升级再升级

专为互联网人打造的365天成长计划,500门视频课程随便看,构建你的产品、运营知识体系。查看详情

招聘,作为58的主营业务之一,为上亿用户提供了便捷的求职服务。随着业务属性与用户需求的升级,本着给用户最佳的体验为核心,旧版的58PC职位详情页已无法满足用户的诉求,因而需对PC详情页进行功能及页面的整体体验升级。

改版背景

旧版58PC职位详情页样式比较陈旧,在业务日益升级的过程中,在原有页面中添加了许多功能及类目,使得整体页面内容拥挤、功能不突出、分类不清、逻辑相对混乱、阅读成本过高。由此,我们希望通过对业务内容的重新梳理与归类,将详情页在业务形态需要重用户体验的方向进行重新设计。

旧版职位详情页

分析用户 定义详情

在设计之初,我们需提出几个问题,来确定改版的方向和目标。用户是谁?用户想要什么?改版希望达到怎样的目的?从业务层面来讲,希望达到怎样的效果?

用户分析

通过对用户的分析及对业务需求的了解,用户大概归类为两种诉求身份,即,用户是蓝领的同时还是求职者。

  • 蓝领是指为城市日常运转贡献力量的基层工作者,包括销售、保安、美容美发师、快递员等职业人群,普遍来讲文化程度较低,对信息的接收能力相对较弱;
  • 求职者:需考虑其心理状态求职场景。求职者在面对众多职位信息的时候,可能会产生焦虑情绪与选择困难的情况。

从业务层面来讲:

  • B端用户(各招聘企业):详情页能够提升自己的品牌形象,提高对求职者的吸引力;
  • C端用户(求职者):提高用户的浏览效率,减轻阅读成本,提高转化效率

以上,我们对于设计的方向与目标清晰明了了:用强逻辑、清晰化的信息展示,重用户体验方向的设计,提升页面可读性与实用性。

设计目标

因此,我们的详情页希望做到:简单、快速、流畅

  1. 简单:简洁明了,对信息一目了然
  2. 快速:福利与薪资等用户较关注的核心信息,能够一目了然的呈现,帮助用户在选择职位时能够清晰对比,助其快速选择
  3. 流畅:操作简便,流畅,在查看繁多的信息时,无需在操作方面进行过多的思考

职位详情页优化过程

体验内容 打磨设计

职位升级,一期启用

在根据业务需求与页面信息整理后,结合用户类型及特点,整个页面通过卡片的形式将内容区分开来,将信息的划分更加清晰明确,从形式上为用户将信息逻辑梳理开来。

一期的职位详情页如下:

一期改版页面

综合对比数据反馈,明确优化目标

在第一版上线过后,通过一个月的灰度测试,数据有了非常明显的变化。

对比旧版详情页,三个核心转化的指标均有较大的提升。

一期数据反馈

根据线上数据反馈,综合对比功能可行性,深入分析了用户的浏览轨迹与除将功能优化升级的同时,对于页面整体的布局也进行了优化。

优化如下:

(1)在主要基础职位信息区域将福利icon缩小

通过上线后的数据反馈,有很多企业的福利能够到达十个,一期的icon会出现折行的情况(当时反馈十个icon同时出现的情况较少)。

(2)将次要功能弱化及归纳,为主要功能导流

一期的职位收藏功能在申请职位button旁,通过上线数据了解到,目前收藏功能位置较为核心,但用户的使用率较低,因此将收藏、分享、举报等次要功能统一归纳到了右上角部分。

主内容区优化

(3)优化地图功能
将地图功能与工作地址合并,并优化功能,可详细显示路线,并可将路线进行APP及微信引导,更加方便的为用户提供路线服务。

地图功能

(4)增加资讯(58便当)、职位问答及申请记录功能

其中,申请记录功能(即,用户可查看此职位有多少人投递及其投递状态)在新版中认为是非主要功能而去掉了。但根据数据反馈,考虑到用户心理:对于投递者较多的职位更加放心,认为此职位真实有效,因而用户对此功能产生了依赖心理。

 上线页面与设计稿的磨合

发现问题,优化设计

在设计的过程中,通常会把页面的各种状态进行预想并输出设计稿,以衡量设计是否可行。但是由于业务的复杂性,以及用户填写内容的机动性,仍有很多状态无法预估到,部分上线页面的部分状态呈现效果差强人意。

因此,通过对灰度上线的页面进行的走查,发现了一些在设计过程中的未预想到过的问题:

在设计中将每个模块分为一个卡片,能够使内容分割清晰明了。

但在上线页面中,有许多公司填写的职位描述与公司介绍非常短,导致此类别的卡片面积较小,在浏览的过程中,卡片反而喧宾夺主,分割感阻断用户的流畅阅读。因此对于此部分进行设计尝试,优化页面。

对于使用白底平铺还是色块分割进行了再次尝试。

横向对比招聘与其他业务线的详情页,如房产,招聘与其有较大区别。招聘的详情页以文字信息为主图片为辅,字段的长短无法控制,如用平铺形式则使信息呈现较为分散、混乱,无法很好的区分出信息的类别区域;而房产和二手车的详情页以图为主字为辅,块面感很强,大部分的图能够自发划分出区域。

白底平铺样式

因而在优化版面形式上,依旧延用了卡片式。但是将信息类别进行划分,同类别的信息在一卡片中,用间隔及与平台规范相符的button作为分割,这样的信息呈现则更加流畅。

优化效果示意图

目前二期页面刚上线,部分功能还在开发过程中,还未有数据反馈,我们会持续跟进页面效果。

二期优化样式

结语

职位详情页的改版优化还在继续,职位升级是我们为提升用户体验做出的一小步,深入用户是我们要持续长久做下去的事,作为能够帮助无数蓝领找到合适工作的我们,期望能够让所有复杂的内容简单化,让体验更加的简便实用,给予用户最佳的感受。我们会持续根据用户反馈,数据反馈及我们的设计师的专业技能,不断的打造出用户体验越来越好的产品。

感谢所有参与过这个项目的小伙伴们~

 

作者:温磊,UI设计师

本文来源于人人都是产品经理合作媒体@58用户体验设计中心(微信公众号@58UXD),作者@ 温磊

打赏也是一种认可
6人打赏
评论
有话不说憋着难受!
  1. icon=pc链接,分隔=m链家…….看来互联网公司都陷入了一种“养了一群小资人群”+陷入危机+创造力枯竭 的阶段了

    回复
    1. :grin: 毕竟改造比创造成本更低,创造出来的东西没人用投资人的钱打水漂

      回复
    2. 关键点是不努力,不专业,不深入。你就看这个方案,居然是两期上的……..

      回复
    3. 你真懂我意思?…..当然,对于平台来说,这里适合初级的,可能推这种文章有效一些吧

      回复
  2. …..抄的慢…………

    回复
    1. 哈哈哈哈哈,赞你

      回复
    2. 楼主回复如此偏激,顺势围观了下楼主的大作,只能说评论比创作成本更低门槛也更低吧。

      回复