Sales Invoices Dashboard UI Design Concepts

On this challenge you will be working on creating the initial concepts of a large desktop application focused on a digital dashboard that gives the invoice processing team insights into which invoices to process first when they begin their work every day. Your key focus is the following:

• UI and UX Design concepts that make the overall experience of searching, visualizing, assigning and processing invoices simpler and faster by reducing the necessary time to work on them significantly.
• Consider the security of the information (invoices) a must and a top priority in your design concepts.
• While this will be a web desktop application, think mobile-first while designing. Support for mobile devices might be the next step in the evolution of this new application.

Round 1

Round 2

Project Background
A global technology company that develops safer, greener and more connected solutions enabling the future of mobility, is looking to visualize how a digital solution can make the experience of working with a high amount of invoices be simpler, faster and safer.  Your target is to solve the following design problem by creating a high fidelity user interface concept.

Design Problem
The Invoice processing team is bombarded with escalations on delays in invoice processing resulting into delayed payments to the vendor and thereby reduced vendor satisfaction. There are no digital dashboards for the invoice processing team to prioritize invoices which are prone to escalations.
 
The key challenge is to prioritize the invoices that are nearing due dates and build a digital dashboard that gives the invoice processing team insights into which invoices to process first when they begin their work every day. This will ensure timely processing of invoices, timely payments to vendors, increase in vendor satisfaction and compliance to SLA’s and KPI’s defined in the contract.

Workflow
The overall process can be resumed in the following three steps:

Step 1 - Security
User logs into the application

Step 2 - Data Overview
User is presented with a home page with the following details:

• List of his tasks due for today sorted by priority / criticality.
• Invoices prioritized based on the nearest due date and invoice values.
• Invoices also prioritized based on historical data on escalations based on business users.
• Prediction of invoices that are likely to get on hold and thereby likely to have an escalation and delayed payment to the vendor.
• Option to allocate invoices to other team members in case of critical invoices.
• Option to send reminders to the processor to act fast on the critical invoices.
• Option to trigger a reminder email/initiate group video conversation to collaborate on overdue tasks.

Step 3 - Prioritizing Actions

• The user looks at the worklist for a request for processing an invoice
• User clicks on the notification and a checklist calls out the invoices that need attention
• User picks up the prioritized invoices and works on it proactively to close asap
• User clicks on another item on the worklist where the system has sent a notification to suggest routine escalations and processes the invoices

Important
For more information please see the “Use Cases” document shared on the supporting material section.

Users/Roles
Please make sure your design supports the following roles.

• Admin User: Private Access for administrators (With Login) to make changes to the parameters of the application.
• Invoice Processing Team: Private Access for users that make actions with the invoices. This team is conformed by 3 main users:
  • Accounts Payable Executive
  • Accounts Receivable Supervisor
  • Accounts Receivable Associate

Screens/Features
While the following screens are a starting point, please feel free to add any other screen that actually improves your UX based on your concept.

1) Enterprise Login
This App must contain a highly secured login mechanism that includes authorization/authentication features. Avoid any social media connection or free user registrations. Think this as a highly confidential access application.

2) Dashboard
This is the key screen for this application. Once the user is successfully logged in, they must be able to see the following information:

• List of his tasks due for today sorted by priority / criticality
• Invoices prioritized based on the nearest due date and invoice values
• Invoices also prioritized based on historical data on escalations based on business users
• Prediction of invoices that are likely to get on hold and thereby likely to have an escalation and delayed payment to the vendor
• Option to allocate invoices to other team members in case of critical invoices
• Option to send reminders to the processor to act fast on the critical invoices
• Option to trigger a reminder email/initiate group video conversation to collaborate on overdue tasks
• You need to explore and implement modern practices for data visualization. Avoid random graphics that does not add any useful information.
• Please notice that are 3 main users that will take actions on this dashboard:
• Accounts Payable Executive
• Accounts Receivable Supervisor
• Accounts Receivable Associate

Does a single dashboard work for all of them? Or Need to provide different visualizations per user? How can you apply modern UX practices to make the transition between users and actions be smooth and feel on the same application?

Remember we are looking for concepts! This is the time to make your design uniques and stand out at first viewing.

3) Notifications
Integrated or not on the dashboard, user should be able to quickly see and access the latest notifications for:

• Pending actions
• Overdue tasks
• Escalations
• Critical issues

4) Invoice Processing
Second key screen for this project.
Allow users to take bulk or individual actions to invoices.
Consider filtering and sorting features for critical and urgent cases. Some of the actions that users can do to invoices are:

• Create Manual Invoices in SAP
• Print the Manual Invoices
• Mail the Manual Invoices
• Prepare billing file for VAT invoices
• Mail the VAT Invoices
• Self Billing Batchmap Processing
• Self Billing Posting in SAP
• Automatic Invoicing in SAP
• Print the Automatic Invoices
• Mail the Automatic Invoices
• Release Blocked Billing
• Create Manual Debit Notes
• Create Manual Credit Notes
• Uploading Invoices in Customer Portal
• Work Assignment

5) Settings
Allow users to invite others to use your app via email. This functionality is especially useful if you are building a social application or provide incentives for users to invite their friends.

Form Factors
For this challenge you will be working on creating the design concepts for these form factors:

• Desktop Web Application: Standard 1280px width and height increased if necessary.
• Out of scope
  • Tablet portrait and landscape
  • Mobile landscape

Operating Systems
Web Desktop Browsers

Branding Guidelines

• Please use the colors provided in the following link:
  • https://projects.invisionapp.com/boards/F23W85N9RXN/
  • Use these colors only, do not reinvent colors.
• For the logo, use a placeholder with name “InvoicesApp”
• Font: Please use Open Sans.

Supporting Material (Use Cases)
You can find a detailed use case per user in the following document:
https://docs.google.com/document/d/1WKtvVt-AXlg7ZXmvoT0KdfUfz5RUF3NBolLDHmmc6zM/edit?usp=sharing

Final Deliverables

• All original source files: Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or XD.
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Please send your marvel app request to challenge copilot in the forum using the correct thread for this.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).