OVERVIEW
Goal
To streamline and reduce the time spent in invoice entry by 70% so that the invoices can be processed quickly and the vendors are paid in a timely manner.
Background
SAP Concur’s Invoice product helps companies track business expenses and make timely payment to vendors for their services. Heads of departments, managers and or other employees can request to purchase goods or services at a recurring frequency or on a one off basis. Once this request is fulfilled and the goods or services are delivered, an invoice is sent from the vendor to the company. This invoice then needs to be entered into SAP Concur Invoice so that the expense is documented, the cost centers are accounted for and it is approved so that the vendors can be paid.
Invoice Entry : An invoice can be entered into SAP Concur in two ways
A client company’s employee or accounts team member manually creates an invoice in the system by entering a purchase order if it exists, uploading an image of the invoice and adding vendor and invoice details. The invoice details consist of invoice amount, department, cost center, shipping and tax details. If the company requires it then the invoice’s line items are entered and specified. This process of entering details is known as coding.
A client company could also choose to have the invoices from the vendors to be sent to a SAP Concur provided service that will automate the entry of the invoice, vendor and line item details for the client.
Problem
Invoices for fulfilled orders have to be entered into the system to log the team’s, the department’s or the organization‘s expenses for proper accounting and timely payment to the vendors. The current invoice entry process is cumbersome for both expert daily users such as the accounting team and for occasional users such as managers or heads of departments.
Concur’s Invoice product was suffering attrition from existing and newly joined customers due to technology limitations and a complicated user experience. In the small-medium business sector, there was a 75% attrition within the first few months of use. The product was providing diminishing returns on the following accounts:
The product felt less efficient than the previous product that they were using.
The invoice entry experience was cumbersome - the accounting team was forced to learn and teach a confusing user experience to employees.
Invoice entry was error prone due to the hard to decipher accounting terminology, lack of support and hints from the system and confusing layout and navigation.
USERS
The primary users of the Invoice product are:
Accounts Payable (AP) team and
Heads of departments, managers and leads.
Depending on the company policies individual contributors are also allowed to order goods or services and incur invoices.
Since the AP team deals entirely with the accounts management of a company they use SAP Concur Invoice on a daily basis. AP teams could be as small as a 1 person team to a multi-person team. Sometimes the AP team members will take on the role of setting up an invoice in the system on behalf of the employee who made the purchase. But more often than not AP team members are so inundated with a variety of account keeping tasks that they prefer the employees who request for the goods or service enter the invoice in the system and they play the role of the verifier in the end.
MY ROLE
I was in charge of reimagining the Invoice entry experience into SAP Concur. I was responsible for:
Deeply understanding the problem space and pain points of the primary and secondary users.
Come up with a holistic task flow that addresses their highest priority needs.
Rethink the information architecture to optimize the content layout and flow
Create a fresh UI design that would balance the load of a data intense screen with legible areas of information
In the absence of a design/project lead I organically took on additional responsibilities:
Created a design roadmap, organized the project into smaller features and allocated resources
Conducted priority planning and calculated design delivery timelines
Organized design tasks into 2 week scrum cycles and conducted the design scrum ceremonies.
Team
My team was made up of 1 other UX Designer and my Stakeholders
Stakeholders : My stakeholders involved a Product Manager, Dev Managers, Software Engineers, SMEs (Subject Matter Experts), Customer Implementation Engineers and a Technical Writer. I relied on my stakeholders to understand the product, market, problem space, user types. They were instrumental in sharing knowledge around user needs, pain points, technical backlog and limitations. This was a distributed team where I was based in Seattle and the product and development teams were based in Minneapolis. To promote collaborative relationships I setup a couple of foundational communication channels:
Recurring weekly design review meetings with stakeholders to share designs, gather feedback, and align on user needs and align on design direction.
Setup a recurring weekly sync with the Product Manager to be aligned on product roadmap priorities, provide visibility to design progress and foster trust.
Interviews with feature owners to build relationships and understand granular details.
Created a slack channel between the stakeholders and designers.
Invited stakeholders to observe usability studies of proposed designs.
PROCESS
Research
Stakeholder Alignment Workshop
What : A 2 day workshop was held with subject matter experts, product managers, designers, developers and researchers. The objectives of this workshop were to -
Gather and align on tribal knowledge about the Invoice product and customers
Achieve shared understanding of pain points gathered from stakeholders’ relationships with customers
Ideate on opportunities to improve the product experience based on pain points
Identify opportunities that will generate the highest ROI
Outcomes :
Validation of target users
Identification of user experience goals and business goals
Product improvements that will provide immediate value
Renewed Problem Statement
“The main problem with the current product is how long it takes for the user(s) to ramp up and understand the value of Concur Invoice. This leads to attrition. The goal of the redesign is to make the product easier to learn and understand for both the frequent and infrequent users.”
2. Discovery Research
I along with a researcher and 1 other designer conducted discovery research through a combination of onsite + remote interviews with 12 users across 8 customer sites to identify needs, behaviors, and patterns of AP users as they create, code, and edit invoices
Findings:
Concur Managed Capture (mix of image recognition + Concur’s manual verification) is extremely inaccurate, inevitably requiring AP to step in and correct errors adding additional steps to their process.
AP teams want an effective way to communicate with and answer Invoice Owners’ and Approvers’ questions, so that AP can spend time processing invoices rather than chasing them down to resolve issues.
Invoice owners/Employees need an easy and intuitive way that will help them accurately enter the Invoice into the system and add the right codes for the items in the Invoice. This will help streamline the process and free the usually small AP teams from tedious manual tasks.
Search is not easy to find or use. Simplifying search could improve the workflow for both AP and Invoice owners/employees
DESIGN
Ideation and Concept Exploration
Existing Design Pain points
Unclear next steps - After clicking on “Create New Invoice” action an empty query page appears. This is contrary to expectation and made the next steps in adding an invoice very confusing.
Out of context input fields – Users see a Policy dropdown, a PO search function and an empty data table, none of which seems relevant to the Create New Invoice action
Discoverability – Upload image action was buried and hard to discover.
Legibility - Users needed to increase the magnification of form due to small type
Following through from the research findings, I came up with some primary design goals:
Make it easy for employees/invoice owners to follow from “Create New Invoice” to completing the task of adding and submitting an invoice.
Make “Search” a much more central part of the experience.
Use “Search” and auto-fill functionalities to create accurate entries and set employees/invoice owners up for success.
Surface up the “Upload Image” action so that users can upload the Invoice image first and use it as a reference to enter Invoice details.
Employ progressive disclosure to keep focus on one aspect of invoice entry at a time
Use screen real estate to create legible input fields.
EVALUATION
The new design was evaluated with around 15 participants to measure task completion, time taken and area of focus. I created the test plan and script and worked with the research team to recruit participants and use Validately to conduct remote unmoderated evaluation sessions on a clickable prototype.
High level Findings
Participants who were all familiar with standard invoicing software liked the clean and simple look and feel of the new direction
The path was very clear from the Create New Invoice call to action to a state where they could immediately start adding the vendor or the invoice image to start creating a new invoice in the system.
The concept didn’t always provide users with confidence on where to focus to enter data next
Invoice owners typically review all invoice details before they Submit, rendering a preview state unnecessary.
Selecting the checkbox to select the row was not intuitive. Most participants expected to click anywhere on the row to select
Allocating a line item across multiple departments needs to be supported
Successes
Participants were successful in finding the vendor.
Participants were successful in uploading the Invoice image into the create invoice experience.
The participants who were all familiar with invoicing software liked the clean and simple look and feel of the concept design.
Failures
Participants were confused about the next steps after entering the Vendor or Image.
Discovering the next cell/column to input data into within the line item row was poor.
Recommendations
The system could be designed to guide users on where their focus next needs to be, for example: the next data entry field or next action etc.
Fields not required or relevant for the users needn’t be a part of the experience, for example: PO number field.
Improve discoverability of data entry fields within the grid.
Re-test the row selection and reassignment/allocation tasks for conclusive results.
Eliminate invoice preview view, 9 out of 9 participants with video data reviewed their invoice before hitting Submit.
LAUNCH and IMPACT
While I was not around for the launch of the new Invoice experience, the data we gathered from doing heuristic analysis and usability evaluation of the existing “Create Invoice” experience indicated that customers were having an extremely difficult time navigating the existing flow and successfully completing tasks. They created their own training programs to help their team get familiar with the tool and it’s unintuitive flow.
This also meant that managers and other employees who were not familiar with the tool had a much harder time completing tasks than the AP team who had learned their way around the confusions of the tool.
The new design proposal was optimized to match the mental model of the customer. With clear action buttons, focus states and auto progression to call attention to the next input field, auto populating data based on connected inputs and an overall better use of screen real estate and white space, I was able to create an elevated experience for Creating and submitting a new invoice. While making sure the experience was usable for both frequent and infrequent users.