从HR集成管理平台看B端产品UX设计

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
2431 0 4 2019-07-15

PeopleSpheres是一款集成所有HR模块于一体的软件平台,帮助HR从同一平台管理整个公司的人力资源,同时简化员工和管理者之间的沟通和工作流程。

Image title

PeopleSpheres是一款集成所有HR模块于一体的软件平台,帮助HR从同一平台管理整个公司的人力资源,同时简化员工和管理者之间的沟通和工作流程。


从2018年初在这家创业公司实习,重新设计网站和产品功能,到后来作为自由设计师一直协助产品的设计开发。一年多以来,公司经历了战略调整,logo更换,产品升级等等,终于这款兼具Web App和手机App的产品已经逐渐成熟,是时候做一个关于HR平台的软件UX设计案例分析。

这款产品侧重于功能型,所以文章主要介绍设计和开发过程中的方法。产品界面只使用基础颜色,便于客户根据自己公司的品牌做个性化调整,所以不会在视觉方面喧宾夺主。


本文会着重介绍以下六个方面的一些成果和经验总结:用户需求研究功能设计基于角色的权限设计体验优化用户学习系统设计系统

Image title


文中选用的内容均为产品可对外公开的功能,部分更深入的功能界面和设计流程并不在文中列出。文章中所有图片版权归PeopleSpheres公司所有,未经允许,严禁商业用途使用。



00 - 从简单的介绍开始

Image title


如上文所述,PeopleSpheres是一款集成所有HR模块于一体的软件平台,管理者可以根据自己公司的需求添加不同的HR模块。通过一个中央数据库来实现通知、自助服务、报告系统、管理系统等的自动化和中心化。

Image title

平台提供Web App和功能精简化的手机App。


产品设计过程中,公司的CEO,开发部门,营销部门均有参与。经历了市场调研、需求分析、用户采访、功能分类等的前期准备,中期的用户流程设计,组件系统设计等,现在的产品每三、四个月为一周期,不断迭代更新,优化用户体验。



01 - 用户需求研究 


我们的产品的主要市场在法国,也在欧洲其他地区和美国占有小的份额。经过市场部门大量资料的收集和数据分析,我们得到令人惊讶的结果:

Image title

由于资源的分散和功能的不集中,虽然市场中的HR软件已经远远供大于求,依然不能在根本上解决公司的管理效率问题。大多数公司都在使用很多不同的软件,但数据分散,工作效率低下,HR的工作量也因此超负荷。这时候,一款连接可以连接所有HR工具的中心化平台尤为重要。


基于现有客户,为了更好地了解他们的动力和困难,我有幸参加了2018年6月的用户研讨会。一天的时间内,用户们被分成8人一小组来探讨他们目前的问题,并在引导下提出解决方案,进行总结。


Image title


我们从研讨会中总结了很多用户的痛点和期望,如下图所示:

Image title


02 - 功能设计 


>> 2.1 将用户需求转化为功能


了解用户需求后,最重要的一步就是将需求转化为实实在在的功能


例:


HR总监想要”让员工更积极,沟通更顺利“,

    转换后:"聊天系统(Chat & Chatbot)", "新闻管理(News Management)", "想法箱(Idea Box)"等等;


HR助手想要”减少重复的信息录入“,

    转换后:”自动工作流程(Workflow)“, "表单批量管理(Form Mass Edit)", "任务分配(Assignment)";


管理者想要”简化团队管理“,

    转换后:"团队管理系统(Team Management)", "自动生成报告(Reporting)";


员工想要”简化行政处理流程“,

    转换后:"自助服务(Self-service)", "自助打卡(Time tracking)", "聊天系统(Chat)".


当然,不同的功能拥有不同的管理和信息权限。HR的管理权限显然高于管理者,管理者高于员工。根据公司具体的情况,个性化的权限系统也会根据这些功能而被构建。

Image title

>> 2.2 功能框架


在信息结构方面,我们使用了分页&窗口部件(Pagination & Grid Widget)的系统,所有重要的功能通过窗口部件显示在分页上。

用户也可以根据自己的需要添加或删除部件,达到完全个性化的用户界面。这种系统也保证了不同角色界面之间设计和代码的一致性

Image title

在界面方面,分页&窗口部件系统也满足了一下的几点优势:

→ 模拟手机和电脑桌面,减少了学习成本

→ 用户可以根据自己的需求调整在每个页面的Widget

→  Responsive Widget系统,有利于保持手机App和Web App的一致性

Image title


03 - 基于角色的权限设计


>> 3.1 角色


大范围来说,一个基于角色的权限系统 (Role-Based Access Control, RBAD) 有以下几种管理角色:

→ 超级管理员(Super Admin):掌管企业软件全部权限;

→ 普通管理员(Admin):管理范围为特定组织部门或子公司;

→ 业务角色(Business Role):有其特定的业务权限,是软件中必须自带的基本业务角色,在不同企业之间通常没有太大的差别;

 组织管理(Organizational Role):权限范围仅限于自身所处的组织,例如在组织A的不能访问组织B的资料。


>> 3.2 权限


在为角色设置权限时一般考虑以下因素:

 → 准入权限:进入权限、时间限制、设备限制、地理位置限制等;

→ 使用权限:增加、删除、修改、查看、其他附加功能;

→ 数据权限:包扩数据的创建人和数据流通过程中所涉及的各类角色的权限。



在这里就暂不列出项目的详细角色权限设计了,但分享一个角色权限设计的表格,希望有所帮助。

Image title


04 - 体验优化


我们从用户目的出发,改进功能流程图来优化体验。从用户目的出发可以帮助我们了解用户在实际应用过程中的困难,达成目的的过程是否合理、是否过于复杂等等。我们可以列出很多用户目的的实例:

- Manager想要对员工进行年度绩效测评

- Manager想要访问某员工的完整信息

- HR想要购买一个用于管理会议的HR模块在系统中

- HR想要发表一条仅部分用户可见的新闻

- 员工想要向他的上级提交一个假期请求

- 员工想要询问HR为何没有收到他的培训证书


在检查功能流程是否合理时,个人总结出了以下的准则:

Image title

利用这个准则,下面一个体验优化的实例:

→ 用户目的:HR想要购买一个用于管理会议的HR模块(Module)在系统中


原功能流程图如下:

Image title


原来的版本只有一个功能入口,易发现性不强。并且在确认信息(Confirm information)之后,如果自己无法独立完成初始化过程,不能及时求助客服

为了解决这些问题,我们加入了从搜索栏直接进入添加Module的选项,并且在完成信息确认后可以直接联系客户,这就基本涵盖了用户流程中的所有可能性

Image title下面的15s操作动效就显示了修改后的交互过程。

Image title


05 - 用户学习系统


Onboarding Guide就是帮助新用户学习软件的一个过程。根据用户目的和角色的不同,学习过程也各不相同。我们分别设计了手机端和Web端的学习系统。


以员工身份Web端Onboarding Guide为例:

Image title

Image title完整版本可以查看以下链接

→ https://yifan-ding.com/psps-onboarding.pdf


总结起来,一个合格的onboarding process的dos and don'ts如下:

Image title


06 - 设计系统


对于B端软件的设计系统Design System,从原子结构的图标和颜色,到分子结构的输入框的类型、状态、反馈等,再到Pattern结构的列表、窗口、模态等等。


我个人认为做产品组件设计最重要的两点就是:

 → 要让如何重复使用设计组件的规则一目了解;

  要列出动态元素(按钮、表单、图标、鼠标、链接等)的各类状态 (active/inactive/focus/click...).


下面列出了产品的组件设计系统的一部分:

Image title

Image title

Image title

Image title




首次做职业B端软件设计,有很多地方有待提高,也总结了以下一些经验。


- 前期的准备一定要充足,保证对市场、用户和使用背景有很深的体会;


- 测试同类产品,从中搜集灵感,帮助对功能的理解;


- 使用二到三个月的Design Sprint, 每阶段都要进行功能流程的检查,体验的优化和最终的用户测试;


- 对于产品的权限和办公自动化设计,一定要做好相应的功能流程图,将相应的人员和功能列清楚;


- 做B端软件,工程量巨大,一定要做好设计软件(Sketch)的组件同步,设置自己的Symbol库,做好Auto layout工作可以节省大量时间。



Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票