研发预算管理系统

2018年|类型:平台产品|标签:设计系统|角色:交互设计

R&D BMP是什么?

基于OA搭建一套研发预算管理系统,将研发预算的录入、审批的全部流程迁移至线上,包括预算编制、预算滚动、预算分析等功能。现阶段需求涉及范围仅为预算编制模块。项目负责人可以通过该系统录入下一年度的项目预算。项目预算经过BU财务、BG财务确认汇总后,以BG维度进入审批流程。

问题与解决

现状与问题

通过与产品负责人沟通,我们了解到产品负责人在制作 demo 的时候遇到了一些状况,demo 如下:

p1-2

产品提供的功能图

我们发现 demo 有如下问题:

  • 信息架构不合理:网站导航与企业组织架构混淆。
  • 角色任务未厘清:界面操作繁多、内容过载。
  • 框架布局难拓展:网站初期就已经无法承载更多的产品功能。

设计任务主要解决两个问题:

  1. 如何解决网站的信息架构问题。
  2. 如何解决用户主次任务的问题。

如何解决网站信息架构的问题。

Demo中,顶部导航为面包屑,右侧导航为内容导航。都没有很好的告知用户整个网站的组织架构。这对于之后新增的功能有非常强烈的局限性。同时,现阶段由于系统其余部分内容的匮乏,不同角色进入本系统使用到的功能非常有限:一个是创建项目(提交单据),一个是通过、审批两种流程。为此,信息架构和界面的布局须同时考虑到网站的可拓展性以及可能新出现的不同层级的内容和功能。

我们的设计需要满足一定的可拓展性,帮助用户明确所在位置,聚焦当前任务。基于另一个项目 DCSM 使用的框架模型,在 RDB 中进行验证与拓展。

框架的复用

如何解决用户主次任务的问题

Demo中,我们发现有页面的问题大致有以下四类:

  • 按钮非常多,拥有更多的按钮意味着容易失焦;
  • 步骤比较碎,”创建“和”提交“是同角色连续操作、但是却是单独提交的;
  • 信息组织超负荷,概览和明细的阅读成本颇高;
  • 不同任务的界面内容混合,界面相似度过高,容易造成用户迷路;

了解使用企业组织架构的诉求,厘清网站的核心用户是谁。通过梳理核心流程所涉及的角色以及任务,明确场景。

p3-2

预算审批的分析

设计需要明确告诉用户需要做什么,在哪里做,怎么做,以及更低门槛的理解整套业务。

  • 为不同角色明确各阶段的用户任务,并引导用户去完成该任务;
  • 降低次级的操作入口的重要性,聚焦主要操作的入口;同时,缩短预算编制的流程;
  • 通过卡片展现概览数据,帮助用户快速理解;同时,通过明确操作引导用户;
  • 通过模块化组合的设计,提高界面的一致性;同时,区分不同的模块;

核心界面

设计的进一步思考

在实际执行过程中,除了满足业务场景的目标,也为了将 DCSM 这套解决复杂系统的思路在更广的尺度上进行引申,设计从上至下的框架模型、从下至上的内容信息、以及中间过程的各用户任务以及用户沟通进行思考,进一步实现界面解耦与器物分离。

框架模型:App Shell + Content 模型

基于 IDC 的案例,沿用了导航,并将 Content 做预加载处理,进一步结构化。

预加载

内容信息:结构与样式

原方案数据冗杂。新方案通过增加交互操作,实现数据的渐进式呈现。进而帮助用户逐步聚焦界面核心信息。

渐进式呈现

用户任务:分步

运用模态,帮助用户聚焦当前任务。

使用模态聚焦任务

用户沟通:成长

在内容编辑上,基于平台品牌的目标,建立文风指南,并提供相应的口吻与调性。平台与用户的沟通将遵循这一标准。

用户参与

© 2024 Xiang PENG. All Rights Reserved.