Rebuild Oracle AP Invoices Process Experience

重构应付账款发票处理体验

AP Invoices Creation Page is the main workplace for AP Users to create and process invoices. Along with Oracle‘s new design system, we got a chance to revisit this 20-year-old product. It was initially a simple ask to reskin the page with new visual styles, however, we leveraged it up to a redesign project to deeply reconsider how we can make the current creation experience better.

In this project, I delivered end-to-end workflows of 8 critical features in collaboration with Devs and PMs. Also, as someone who has been on the product for the longest time, I onboarded other designers to make sure the project moved forward smoothly during resource reorganization.

应付账款发票工具处理页面是企业用处理发票的主要工作区。借由Oracle品牌重塑的机会，我们得以能够重新审视这款已有 20 年历史的产品。最初这只是一个简单的视觉项目，即把新的视觉样式应用在原本的页面上，但是我们以此为契机，重新深入考虑除了更好看的视觉效果之外，我们还能如何使当前的发票创建体验更好。

在这个项目中，我与程序员以及产品经理合作交付了 8个关键功能。同时，作为在该产品上工作最久的人，我帮助其他设计师了解整个产品的设计历史和工作流程，确保整个项目在组内资源重组的状况下也能平稳进行。

My Role 工作内容

Duration 项目时长

Aug 2020 - Feb 2021 (7 months)

Outcome & Impact 结果&影响

Design Context 设计情景

AP Specialist creates and processes 200-360 invoices per week on average. Among all kinds of invoices, paper-based invoices, which require manual entry, enriching, and correcting are still a persistent reality for most organizations.

After receiving invoices from the scanning team, AP Specialists would start to process invoices. First, they need to create invoices by entering details into the system. Then they can validate invoices and investigate issues if necessary.

每个 AP 专员平均每周需要创建和处理 200-360 张发票。在各类发票中，需要一定程度的人工录入、丰富和更正的手动发票，对于目前大多数企业来说仍然是一个持续存在的现实状况。

在收到扫描团队的发票后，AP 专员将会开始处理发票。他们需要首先通过将发票的详细信息手动输入系统里来创建发票，然后他们可以对发票进行验证。如果出现异常，他们需要对发票做出修改和调整，使其通过验证。

Design Goal

How might we empower users to process invoices easier and faster?

我们如何才能让用户更轻松快速地创建发票？

Research 调查研究

What slows down the current experience？

是什么减慢了当前的发票处理速度？

Before jumping into the design, we conducted research via various approaches to understand what slows down the current experience, including user interviews, hands-on experience, and heuristic evaluation.

在直接进入设计过程之前，为了了解当前发票处理速度减慢的原因，我们进行了多种调研方法，包括用户访谈，上手训练体验以及启发式评估等。

From the research, we found out the 3 most important reasons which slow down the whole experience: disorganized Information Architecture, overwhelming dialogs, and hidden critical information. We proposed specific solutions to each problem as follows.

从调研中我们发现了3个减慢发票处理体验的原因，分别是杂乱的页面信息架构，干扰性弹窗的过度使用，以及被隐藏的重要信息。我们针对每个问题提出了针对性的解决方案。

Redo the Information Architecture

重新梳理信息架构

Primarily, Information Architecture is disorganized. Features are either redundant or not put in the right places. Therefore, we redo the whole IA according to their categories or sequence.

首先，整个页面的信息架构不够清晰。有的功能彼此重复，或者没有设置在最合理的地方。因此，我们根据功能的类别和使用顺序来重新梳理了信息架构。

Standardize UI Patterns

规范界面元件

Also, dialogs have been excessively used on the page for various reasons. To make the experience smoother, and also standardize UI patterns, we proposed a specific solution for each scenario and cut the number of dialogs by 50%.

弹出框也被过度使用在完全不同的场景。为了让体验更加流畅，并且规范界面元件的合理使用，我们对不同的功能情景都设计了相应的解决方法，并将弹出框的使用数量减少了50%。

For searching purchase order numbers, users used to search in a separate dialog and then enter the number in the field. We combine these 2 steps together in the new design so multiple clicks are saved.

在搜索采购订单编号时，用户过去常常需要在单独的弹出框中进行搜索，然后在表格中输入。我们在新的设计里将这两个步骤结合在一起，以节省多余的点击。

When typing in Key Flex Fields, which are multi-segment values, users need to separately enter each segment into different fields, while in the new experience, users can finish it in one field.

当用户需要输入Key Flex Fields（多段值）时，在当前的设计里他们将每个段分别输入到不同的输入框中，而在新体验中，用户可以在同一输入框中完成。

We also standardized the usage of panels, which replace the previous dialogs.

For disputes, we proposed the side-by-side panel since users need to refer to invoice details when resolving disputes. For adding and editing line items, the overlay panel is better as users could focus on the subtasks in the panel.

我们还标准化了面板的使用，来取代了以前的对话框。

当用户需要解决异常时，他们往往需要参考发票的详细信息，因此我们提出了并排面板的设计，方便他们来回对照。 而对于添加和编辑明细，我们提出了覆盖面板，以便用户可以专注于面板中的子任务。

When uploading attachments, users used to upload files one by one by browsing in the finder. We proposed a new attachment component with batch operations as well as drag and drop.

在以前，当用户需要上传附件时，他们需要在文件浏览器里找到相应的附件并一个一个上传。我们在新设计中提出了一个新的附件组件，可以允许用户进行多文件上传和拖拽操作。

Critical Information at a Glance

让人一目了然的关键信息

Meanwhile, users have to play Scavenger Hunts on the page as some critical items are hidden at the bottom. For example, invoice status is invisible unless the little blue link is clicked at the right top corner. As a result, we redesign the entire page header.

同时，由于一些重要的功能被隐藏在深处，用户需要多次点击才能找到他们所需要的内容。例如，用户无法在页面上直接浏览到发票的验证状态，由此我们重新设计了页头栏。

We conducted usability testing with some key screens and flows among 6 participants. Overall, participants showed their appreciation towards the new design, while they also provided feedback on the accessibility, discoverability, and efficiency of the UI.

我们对 6 位参与者进行了一些关键屏幕和流程的可用性测试。总体而言，参与者对新设计表示赞赏，同时也对 UI 的可访问性、可发现性和效率提供了反馈。

Step 1. Enter or verify invoice header

步骤1. 输入/验证发票标题信息

Users can directly create invoices from the landing page. Once they type in the Purchase Order Number, most fields in the invoice header and line items section will be automatically pulled out.

用户可以直接从登录页面创建发票。一旦他们输入采购订单编号，发票标题信息和行项目部分中的大多数信息将被自动输入。

Step 2. Enter or verify line items

步骤2. 输入/验证发票明细行

Users can easily add other PO-Matched Lines to the invoice. The smart search bar allows users to quickly find the line which they want to add.

用户可以轻松地将其他采购订单的匹配明细行添加到发票中，其中智能搜索栏能让用户快速找到他们想要添加的项目。

When users are editing PO-Matched Lines, they can do it inline with reference information popping up. They can also drill down to the detail panel to edit additional information.

当用户编辑采购订单匹配明细行时，他们可以在弹出参考信息的情况下直接在表格内编辑数据。同时，用户也可以还可以深入到详细信息面板来编辑其他信息。

Step 3. Identify and calculate taxes

步骤3. 确认和计算税费

Tax is automatically calculated based on the invoice detail. Users can refer to the tax information when they are focusing on the tax rate cell.

根据发票信息，税费将会自动被计算。当用户聚焦在税率时，他们也可以看到其他附加信息以作参考。

Step 4. Enter or verify payment information

步骤4. 输入/验证支付信息

Users can go to the Installments tab to check the detailed payment information.

用户可以去分期付款的标签栏下查看具体的支付信息。

Step 5. Attach invoices

步骤5. 上传发票

Users can click to upload or drag and drop invoices and other documents to the invoice page as attachments.

用户可以通过点击或者拖动将发票等文件作为附件上传到发票页面。

Step 6&7. Validate invoice & resolve disputes

步骤6&7. 验证发票和解决异常

Once users hit “Review“ button, the Disputes panel will automatically pop up, where users can resolve and add disputes.

一旦用户点击“评论”按钮，争议面板将自动弹出，用户可以在其中解决争议。

Redesign Oracle AP Invoices Landing Page

应付账款发票工具到达页再设计

Restyle Oracle OTBI Dashboards

视觉重塑智能数据分析面板