Redesign Oracle AP Invoices Landing Page

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

AP Invoices Landing Page is aimed to help AP Users to manage all the invoices they need to process during their shifts. However, most users actually leave the Landing Page without even touching it. We started this project from here.

I led the design process in collaboration with other designers, PMs, and Developers. I also contributed to make it a reusable component that can be uptaken by a larger design team across pillars.

Oracle应付账款发票工具到达页旨在帮助企业用户有效管理日常所需要处理的所有账款发票。然而用户研究显示，大部分用户完全没有在日常工作中真正使用过这个页面，由此我们开始了再设计的旅程。

在此项目中，我领导了整个产品设计过程，包括和其他设计师，产品经理和程序员的合作和对接。同时， 我参与了组件的设计与开发，将我设计的UI模块迭代升级为公司组件库的收录组件，供其他产品组使用。

My Role 工作内容

Web App Design

Interaction Design

Visual Design

User Research

Low/High Fidelity Prototyping

Usability Testing

Data Visualization

Duration 项目时长

February 2021 - June 2021 (5 months)

Outcome 结果

Challenge 设计挑战

For most AP Users, they leave when they land.

对于大部分的企业用户而言，到达即离开

There are 3 parts on the current Landing Page: Infolets, Table, and Side Navigation Bar. Users can view specific types of invoices in each infolet, or navigate through side bar.

By tracking users’ clicks on the page, we got to know that 73% of customer users and 88% of Oracle users actually leave the page without touching the page.

当前的到达页可以分为三个部分，Infolets，表格区以及侧边导航栏。用户可以通过Infolets看到符合特定条件的发票，也可以通过侧边导航栏选择菜单，搜索页和其他选项。

通过追踪用户的点击率，我们了解到，73%的外部企业用户和88%的Oracle内部用户在完全没有使用到达页的情况下就直接离开到达页。

Design Goal 设计目标

How might we redesign the Landing Page to reduce unnecessary jumps, making it more contextually useful and relevant to users to finish their tasks?

我们可以如何再设计到达页，通过减少不必要的跳转，使其提供更相关的帮助，让用户以更快的速度完成任务？

Understanding User 了解用户

17 AP Users. 50-Hour User Research Sessions.

和17位企业用户访谈的50个小时

We conduct user research on 17 users from both Oracle and external customers. Our first step is to create a latest user profile to understand who are our users and what are their goals, responsibilities, needs and pain points in their day-to-day job.

我们对来自 Oracle 和外部客户的 17 位用户进行了用户研究。我们的第一步是创建最新的用户画像，以便了解我们的用户是谁，以及他们在日常工作中的目标、职责、需求和痛点。

User Goal 用户目标

AP Specialists need to understand jobs to be done per priority and take instant actions so that they can quickly and effectively process the work they are responsible for without leaving the landing page.

AP专员需要根据紧急程度了解需要完成的任务并采取即时行动，以便他们能够快速有效地处理他们负责的工作。

From user research, we found out that the current Landing Page doesn’t provide users with the information they need in their day-to-day job. There is a huge gap between what users are looking for and what the Landing Page is surfacing.

What do AP Users need to do on the Landing Page? We came up with the Jobs-to-be-Done framework and define several user needs from high to low priority from there.

从用户调研中我们发现，当前的到达页没有为用户提供他们在日常工作所需要的最重要的信息。用户寻找的内容与到达页显示的内容之间存在巨大差距。

AP 用户在到达页上需要做些什么？我们整理了JTBD框架 （需要完成的工作）并从中归纳出来了由高到低不同优先级的用户需求。

Based on user needs, how to surface the invoices which need attention to the top remains a challenging question.
From competitor analysis, we found out that most of them have a “dashboard” style, where the KPIs are called out for different types of exceptions. However, it does require users’ more clicks to get to the exact invoice list which they need to pay attention to and take action.

根据用户需求，如何让用户更快处理需要引起注意的发票成为了设计探索中一个具有挑战性的问题。

从竞品分析中我们发现，大部分到达页都是“仪表盘”式样，即有很多关键绩效指标来显示不同种类的发票问题。然而，用户仍需要多次点击之后才能真正看到他们需要注意且采取措施的发票清单。

Inspired by the email inbox where users would see their important emails immediately after logging in, we came up with a Worklist concept, where we show users the table of invoices with exceptions on the landing page. We did a quick AB testing to see which model works better.

受到电子邮件收件箱的启发，即用户可以在登录后立即看到他们的重要电子邮件，我们想到了一个工作列表概念，即我们在到达页上就显示带有例外情况的发票。我们做了一个快速的 AB 测试，看看哪个模型效果更好。

Among 6 participants, 5 of them prefer Option 2, since they like to dig into invoices directly on the landing page instead of drilling down from a dashboard. Also, they are more familiar with the table layout and found it more helpful when they are processing invoices.

在 6 位参与者中， 5 位更喜欢选项 2，因为他们喜欢直接在到达页上看到所需要注意的发票并且处理，而不是从仪表板再向下挖掘。此外，他们更熟悉表格，而且认为它在处理发票时更有帮助。

Also, from the user testing, we realized that our users care more about the table compared to the analytics panel as the table is where they need to finish their day-to-day job, while the panel adds value with extra supportive data. Therefore, we shift the position of the table and panel to make them more aligned with user needs.

此外，从用户测试中，我们意识到数据分析面板相比，我们的用户更关心表格，因为表格是他们完成日常工作所需的地方，而数据分析面板更多是通过额外的支持性数据提供纵览概况。因此，我们交换了表格和数据分析面板的位置，使其更符合用户需求。

When designing the analytic panel, we want to keep consistency among search, table, and analytic. We came up with 2 models, static and dynamic.

In the static model, once users click the segment in a selection chart card, the card will be maintained with the clicked segment highlighted and other segments grey out. While in the dynamic model, once users click the segment in a card, the panel will be updated with new sets of cards to show drill-down information.

在设计数据分析面板时，我们希望搜索框和表格以及数据分析面板所呈现的信息保持一致性。因此，当用户点击卡片中的数据可视化部分，搜索框和表格都会相应更新。因此我们提出了 2 个面板模型，静态和动态。

在静态模型中，当用户单击选择图表卡中的数据可视化图标时，该卡将被保留。与此同时，被单击的可视化部分会被高亮，以便与其他未被点击的部分做出区分。而在动态模型中，当用户点击卡片中的数据可视化部分，面板将会显示一组新卡片来显示更加深入详细的信息。

We tested these 2 models in the user research, and it turned out that users prefer the Dynamic model as it provides contextually useful data and insights to help organize their day.

我们在用户研究中测试了这两个模型，结果表明用户更喜欢动态模型，因为它提供了更切合有用的数据和洞见来帮助他们安排一天的工作。

Finally, we moved forward with the Dynamic model and designed an Analytic Panel Content Strategy Guideline to document how to show contextually useful cards in various search scenarios.

最后，我们选择推进动态模型，并设计了一套数据分析面板内容策略指南，来记录如何根据不同的搜索情景来提供切合有用的数据卡片。

We followed the Atomic Design Theory and delivered a full set of designs.

We proposed 2 types of cards. One is Selection Chart Cards, which can be used to display useful data for users at a glance with options to drill in, expand, filter, share and other usages. The other is Insight Cards, which can provide either key insights to help users make quick actions on urgent items or relevant pieces of information to help users discover something they would have missed.

Selection Chart Card is included in Oracle Design System as an official component for wider usage.

我们遵循原子设计理论交付了一整套设计，从卡片到面板，再到页面。

我们提出了两种类型的卡片。一种是数据可视化卡，它可用于向用户快速展示有用的数据，并提供挖掘、扩展、过滤、共享和其他操作的选项。另一种是洞察力卡，它可以向用户提供关键信息和参考见解以帮助用户对紧急事项做出快速行动，或者提供相关的信息以帮助用户探索或发现他们可能会错过的东西。

其中，数据可视化卡还被收录进Oracle设计系统中，成为一个专门的组件供其他产品组使用。

Based on a Dynamic model, relevant analytic views will be rendered based on what search queries users are looking at, making sure that the most contextually relevant items are always there.

基于动态模型，我们将根据用户正在查看的搜索查询呈现相关分析视图，确保用户始终看到切合情景的数据和信息。

The insight cards give users quick prompts on critical items. For instance, users can quickly pay specific invoices to obtain discounts and save money without leaving the Landing Page.

洞察力卡片可以为用户提供有关关键事项的快速提示。例如，用户可以直接在到达页上快速支付特定发票以获得折扣，节省资金。

The smart search bar in the header allows users to quickly filter down the invoices they are looking at.

页眉中的智能搜索栏让用户可以快速过滤他们正在查看的发票。

Only relevant actions in the action panel are surfaced based on the validation status of each invoice. It helps users to quickly figure out what are available actions and easily make a choice.

根据发票的不同验证状态，每个发票的操作面板里只会显示可操作的选项。它可以帮助用户快速了解有哪些可行的操作并轻松做出选择。

The Analytic Panel can not only show an overview of the jobs to be done, but also offers users another way to search and drill down.

分析面板不仅可以显示用户需要完成的工作概览，还可以为用户提供另一种方式来搜索和挖掘发票。