积分管理后台的产品重构与产品化设计

用户头像
东莞/UI设计师/5年前/1017浏览
积分管理后台的产品重构与产品化设计

积分管理包括线下企业落地和线上企业管理两部分,通过线上管理后台来保障企业日常管理工作的顺利进行。

积分管理平台是什么?

积分管理平台是基于积分数据为企业提供工作决策、日常工作管理的中小企业操作管理平台。以积分作为载体来解决企业实际中的管理问题,通过线上平台的积分数据为企业线下解决员工积极性、执行力、管理团队、留人才等一系列难题提供决策依据。


面对逻辑复杂、业务繁多的B端后台改版,需要设计师对公司业务拥有更全方位的认识,设计难度颇大,B端产品全新改版影响范围广、涉及业务多且复杂,业务逻辑一环扣多环,对于设计师有极大挑战,为保证改版方向不偏移,需要与业务方进行多次沟通讨论及产品汇报。

下面介绍一下积分制管理后台整体的改版设计思路。




一 确定产品方向,重建产品定位


作为设计师,工作不是从被动接受产品经理提供的文档才开始,转变思维方式,在产品设计前期主动提案,用全链路思维在0到1的过程中提出对于产品的想法,和业务方讨论业务,挖掘机会点。


1 从产品三要素出发

设计产品需要同时考虑商业价值和用户体验,提升用户体验使用户更愿意使用产品,企业从中获得商业价值;反过来,商业价值提升了,企业才能花费更多的时间和精力在提升用户体验上,因此商业价值和用户体验是相辅相成的。当然再好的用户体验也要有技术人员的配合,企业利用现有资源(技术人员、资金等),将既定计划最大化实现,因此在实际工作中,考虑实现成本(人力、时间、资源等因素)以及收益(商业价值/用户价值等),在商业、用户、技术三个角度取得平衡点。


2 结合「人员-场景」

在进行产品重构前充分了解人员-场景-产品的联系

人员:员工、管理者、老板

场景:出差流水线等多场景

产品:积分管理平台


人员和场景决定了产品的方向,因此需要结合人员和场景对积分管理平台进行全新升级,加强人员在不同场景下的使用匹配度,加速人员得到更全面的积分数据。


3 明确产品方向

与产品、运营、客服统一方向,将一个「业务全能」的核心阵地打造成「后台配置」为辅的产品,将主要阵地留在移动端。




二 明确方向后,进行产品化设计


在产品设计中,不要把自己当作目标用户随意揣摩用户使用产品时的心理,我们需要真正走到用户当中去,了解用户的情况,目标用户是什么样的?他们在使用产品时一般都处于什么场景下?他们要完成什么任务?期待达到什么效果?对竞品是怎么看的?……


传统的用研流程是从明确背景和目的、选择目标用户、确定调研方法、准备调研内容、现场调研到总结报告,整个过程基本由用研同学独立完成,在项目时间比较紧张或人员不足的情况下会受到限制,根据实际情况,我们采用敏捷用研。


1 立项规划

首先明确调研目的,针对调研目的罗列出调研大纲以及具体问题,做好展开调研前的准备工作,通过调研了解用户行为特征,挖掘行为习惯和深层痛点,发现具体场景的用户行为模式,比较不同特点用户对【新想法】的反馈及【新想法】替代传统方式的可能。


2 招募用户

目标用户需要对积分管理有一定了解,这给目标用户的选择带来一定的门槛,而且处于特殊时期,因此无法做到和大多数调研一样走出公司招募目标用户,所以选择内部+线上的方式。


选择内部目标用户

公司内部有线下到企业落地和线上协助用户制定规则的同事,两者都直接或间接地接触了大量的有效用户,是调研的不二人选,能得到最真实的使用情况。


选择线上目标用户

所谓线上目标用户,也就是已购买产品且正在使用的企业用户,通过视频连线或语音连线的线上方式展开调研。

目标用户包括员工、管理者、老板3个角色,确保访谈对象的全面性。


3 执行调研

常见调研方法大致可分为两种:定性调研、定量调研。


定性调研:用户访谈、焦点小组、卡片分类、日记记录等方法;

定量调研:问卷调查、A/B测试、眼动研究等方法。

用户访谈主要是通过问题,让用户围绕访谈主题进行表达,因此在立项规划阶段就要列出访问大纲及访问问题,在访问过程中,所有问题不必一定按照访问大纲逐一采访,机动灵活的根据受访者的回答作出提问变化,必要时,让受访者现场使用产品,观察受访者的操作方式、使用情况,发现可改善点。


4 整理分析

把访谈的笔记、录音整理成文档,分析文档挖掘痛点。

老板:日常工作是处理审批和查看管理者、员工数据。审批前后没有通知,无法查看部门的数据情况,无法查看管理者的奖扣目标达成情况;调研中发现用户在后台操作的目的感模糊,反馈到:“系统是以我的账号开通,那么我就是超管,有最大权限,但开通后该操作什么、怎么操作就不知道了”、“积分规则又要怎么建立”等问题。


管理者:管理者是后台的主要使用群体,基本每天都会进入后台操作,日常工作是处理审批、查看下属数据以及为下属录入积分。用户反馈:“管理者无法查看其他部门成员的积分情况,没有部门之间的比对数据”、“自己有奖扣目标也不知道”等问题。


员工:日常工作是申请积分和查看排名,调研发现互联网行业的员工比制造行业的员工使用后台的频次更高,但总的来说,员工的整体使用频次是偏低的。


5 结果推动

基于用户行为及诉求,制定设计目标及策略,得出结论:积分管理后台只针对企业高层开放,整合为一个版本。


设计目标:帮助企业更快的建立属于自己内部的积分系统,提高执行力。


设计策略:

a 精简化:信息架构场景化,内容模块调整;

b 数据化、个性化:提供多维度数据统计,满足用户查看数据的同时也支持自定义维度;

c 互动性:快捷入口调整,增加使用说明、提示向导。




三 细化工作场景,构建信息架构


1  导航分类场景化

统一工作场景分类认知,减少界面中分类层级,将相关模块整合起来。在导航区域核心体现四大工作场景,包括工作台(奖扣分等主要功能)、考勤(考勤管理)、统计(数据统计)、设置(系统设置)

工作台:和积分挂钩的全部可操作功能

统计:通过工作台中的功能进行奖扣的积分数据以图表形式形成多维度的积分统计

考勤:复杂的考勤管理自成一个独立模块

设置:系统所需配置在此模块一步到位


2 功能地图轻量化

功能入口众多,为方便用户查找及使用,对功能地图重新进行了分类归纳,将过多的横向的入口(广度)转为纵向的层级数(深度),保持深度与广度的平衡,建立不同层级间的联系。


3 区域内容模块化

以首页为例,主要作用是集成到达其他核心工作场景的快捷通道,又不乏提供数据统计及操作引导。




四 从原型开始,落实设计方案


一个产品进入视觉设计之前需要有原型作为支持,产品原型可以概括的说是整个产品面市之前的一个框架设计,信息架构、页面流程这些前期的交互设计流程图之后,就是原型开发的设计阶段,简单的来说是将页面的模块、元素、人机交互的形式,利用线框描述的方法,将产品在脱离皮肤状态下更加具体生动的进行表达

作为后台产品,因其偏重操作,在原型设计前,需要进行更深层次的再思考:如何实现用户体验更优化?


1 确定设计尺寸

你可能会问:为什么画原型要先确定设计尺寸?

考虑到项目时间及进度,使用sketch画原型,这样能和UI同学达到协同办公最大化,因此在画原型时,都尽可能的规范。


根据statcounter平台统计,桌面屏幕分辨率使用情况如下图:

从统计数据来看,目前国内PC端用户屏幕分辨率排名前三的分别是1920*1080、1366*768、1440*900;以处于中间位置的1440作为设计尺寸,上下响应适配的相对误差最小,从而达成用户体验的最大公约数。


2 确定布局框架

根据导航位置可分为三种布局框架:上下布局、左右布局和混合布局


上下布局:顶部为导航,导航个数往往不超过7个,下面为内容区;其优点是遵循用户从上而下浏览页面的习惯,缺点是导航层级较深时,交互效率不够理想。该布局适合那些导航层级较少,内容展示充分的后台系统。

左右布局:导航在左侧,内容区在右侧,其优点是侧边可以容纳可拓展的多层级导航,可以灵活的收起展开,缺点是多层级的侧边栏导致右侧内容区域空间会被挤压,相比上下布局,左右布局的内容区域空间会比较小。该布局多用于工具型的后台系统。

新版积分后台以配置为主,主要是以初始设置和数据查看,模块不多且模块之间的关联性不强,因此采用混合布局。


3 建立栅格系统

利用栅格系统实现响应式设计,是为了在不同分辨率屏幕上都能有最佳的用户体验,相对于12栅格系统,24栅格系统变化更加灵活,更适合内容比较多样复杂的场景。


4 以首页为例

导航优化:将过多的文本描述转移到内容区,或用图标代替;相比五花八门的企业LOGO,只显示企业名称,能更好的在有背景色的顶部导航显示。


信息重组:重要内容以独立模块展示,比如开通正式版,与其只提供客服联系方式以‘高冷’姿态等待用户联系,不如让用户提供联系方式,我们主动联系,如此一来,用户由主动联系转变为被服务方,大大提升了用户意愿度。


化繁为简:提升效率是B端产品的设计核心点,通过优化任务路径、减少操作选项、保留用户的高频行为使用户做更少的操作,花更少的时间完成用户目标。



5 原型

4
举报
|
8
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
高级感金属拟物 UI设计组件库
森系3D渐变流体抽象矢量UI背景图
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI界面 组件
UI应用平面图标
UI通用设计素材1
手表表盘UI系列
户外旅行飞机情侣假日出行
【新年UI图标】美食icon
新拟态风格 UI设计组件库
【新年UI图标】旅行icon
【新年UI图标】积分icon
【新年UI图标】体育icon
【新年UI图标】相机icon
钱包ui模板
【新年UI图标】银行卡icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新能源APP应用UIKit
【新年UI图标】活动icon
UI 登录界面设计模板包
盲盒APP UI设计
3D渐变流体抽象矢量UI背景图
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册