Overview

This project involved redesigning and enhancing the usability, accessibility, and efficiency of the Allocations feature within SAP Concur Invoice, a leading SaaS solution for accounting automation. The Allocations feature enables users to efficiently distribute invoices to various cost centers, streamlining financial processes for large to enterprise users.

My Role

My Role: Lead UX Designer, User Researcher
Team: Product Manager, Engineering Manager, 2 Engineers, Implementation Manager
Tools: Figma, Microsoft Teams, Zoom, PowerPoint
Research Methods: User Interviews, Usability Study, A/B Testing
Timeline: 6 months
Year: 2023

The Problem

The legacy experience of SAP Concur Invoice's Allocations feature is not accessible and has discoverability and usability issues, resulting in an inefficient process for users. Additionally, the overall experience of the Invoice Product needed a redesign as the user interface was dated and inconsistent with other Concur Products. As a consequence, these issues have negatively impacted the Product Satisfaction Score (PSAT) and people have opted to choose other invoicing products.

The Solution

By leveraging Concur's NextGen (NUI) experience, which is a tech stack with a new code base and theme, we aim to address the accessibility, discoverability, and usability issues for Allocation. The design solution prioritizes inclusivity, human-centred and data-driven flows, thereby improving efficiency for all users and reducing the attrition rate. Additionally, the design approach emphasises the importance of maintaining product design consistency while incorporating intuitive and visually pleasing elements, enhancing overall user delight throughout the entire experience.

KPIs

💨 Efficiency
Reducing the number of clicks and providing the tools for the user to easily complete the task.

♿ Accessibility
Meeting AA WCAG standard aiming to reach AAA WCAG standard.

What is SAP Concur Invoice?

Concur Invoice is an Accounts Payable automation processing platform that enables users to easily capture, submit and pay invoices with complete visibility into vendor spending.

What is Allocations?

Allocations is a feature that allows the user to take an item from the invoice and distribute it to different cost centres, departments, etc.

For example, Anita receives an invoice with 2 items:

1. 10 Pencils

2. 10 Erasers

She needs to divide the 10 pencils evenly between HR and Marketing. After creating the invoice and itemizing the 2 items into 2 lines. She will now divide the pencils line between HR and Marketing by using the allocations feature. Please see the demo of the legacy (current) experience below:

Research: User Interviews

The product manager and I conducted 5 User Interviews to understand the user needs and gather initial feedback on some early design explorations based on our existing knowledge. I asked the user 10 open-ended questions aiming to learn about their current flow, pain points, and their ideal experience. Additionally, we showed them 3 initial ideations to get their feedback. Based on the feedback, I created an affinity diagram to synthesize the data, derive insights and identify opportunity areas.

Persona

Based on the interview, I created a persona and defined the opportunity areas to improve the experience of Allocations and aim to achieve the KPIs.

Key Insights + Opportunity

Key Insights 

• Users are happy with the current flow of allocations.

• Some users want to be able to bulk allocate where they add all the itemization lines first and then allocate whereas some users prefer doing it line by line  - add a line item and then allocate.

• Discoverability issues with showing and hiding the allocations and bulk edit tools.

• Users dislike the number of clicks we currently have in the product overall - less clicks the better.

Opportunities 

• Provide flexibility for bulk allocate users and one-at-a-time users.

• Better feature discoverability by improving information architecture and fixing usability issues.

Legacy (Current) Invoice

1. Allocation Summary

   • Very little padding

   • Increased cognitive load because it is hard to read.

   • Inaccessible for keyboard and screen reader users.

2. Edit (Bulk Edit)

   • Increased number of clicks because the user needs to click into the “Edit” every time they want to edit an Itemizations.

   • Discoverability and accessibility issues with the multi-select checkbox and the buttons in the button bar due to lack of padding and small size.

3. Distribute AKA Allocations

   • Same issues as “Edit”.

Prototype A: One Button - “Edit” Only
Combined flow and UI for allocate and bulk editing Itemization fields. The video below goes through the following:

1. Allocate single itemization.

2. Bulk allocate 2 itemizations.

3. Bulk edit Expense Type for all the itemizations.

Prototype B: Two Buttons - “Edit” and “Allocate”
Separate focused workflows and UI for allocate and bulk editing Itemization fields. The video below goes through the following:

1. Allocate single itemization.

2. Bulk allocate 2 itemizations.

3. Bulk edit Expense Type for all the itemizations.

A/B Usability Study (Key Insight)

I led the A/B study for Invoice at SAP Concur Fusion 2023, a customer-facing conference for SAP Concur. The 2 workflows were tested with 12 participants on site.

Positive Outcomes:

• Prototype B (“Edit” and “Allocate”) performed better than Prototype A (“Edit” only).

• Users preferred having 2 separate buttons for allocations and bulk editing.

• Users responded positively to 2 entry points for allocation – button bar and In Line.

• Users reacted positively to the allocation summary view (nested data grid).

• Overall, users had a very positive response to the NextGen experience due to the increased padding, visual hierarchy, information grouping and UI component updates.

Opportunity Areas:

• Show All Allocations [expand/collapse] had very low discoverability. Users prefer an explicit callout for the functionality of being able to expand and collapse each line item to view allocations.

• Nested datagrid clarity increased when the user saw more than one line expanded. With only the last line expanded, there was confusion due to visual grouping. With some minor design changes such as improving the visual grouping of the nested grid would increase the clarity.

Internal A11y Review Process

I reviewed the designs with the Accessibility (A11y) team to ensure compliance with Concur's A11y and WCAG standards. However, it was discovered that the chosen design solution, a nested data grid, was not accessible to assistive technologies. Regrettably, this issue came to light only after conducting usability studies.

Pivot and Iterate

Based on the research findings, there were some issues: 

• Grouping Issue - It's not clear how allocations are related when only one line is expanded. Adding a divider between allocations and the next itemization line will clearly associate allocations with the parent line when only one line is expanded.

• Discoverability Issue - Users were unable to discover the expand/collapse allocations affordance and requested it to be more explicit.

• Outdated User Interface - Users expressed a strong desire for a modernized interface to enhance the overall user experience.

As mentioned above, the nested data grid was not an accessible solution so I pivoted to an alternative solution to ensure accessibility compliance as well as user needs.

(1,2) Multiple Entry Points: Offering users multiple entry points for allocations reduces the number of clicks required and enhances overall process efficiency.

(3) Discoverability (Allocations Show/Hide Button): We offer a convenient toggle for better discoverability, allowing users to easily show/hide the Allocations section.

Next Steps

The development of this experience is currently in progress. The current Product Satisfaction (PSAT) score stands at 40% user satisfaction. However, we anticipate a significant improvement in this score after extensive research and iterative enhancements leading up to the early access release of this new experience. 

Moving forward, I intend to collaborate with the Product Manager and conduct user interviews post-early access release to ensure that we are effectively meeting user needs and addressing any outstanding issues before the general release.

*Early Access = 7-10 clients
*General Release = All clients

Allocations Grouping

By displaying itemizations grouped together based on their allocations, the process of reviewing becomes faster and easier, facilitating the identification of mistakes or anomalies.

Machine Learning for Allocation Patterns

Utilizing machine learning, the system can detect allocation patterns based on a user's typical allocation behavior for specific invoices. This assists in automating the allocation process and improving accuracy.