AI Outlook Plugin for Order Processing

In our endeavor to create a cutting-edge Microsoft Outlook plugin, we harnessed the power of AI technology to revolutionize the way we handle customer purchase orders. Our primary objective was to develop a system that not only detects messages potentially containing purchase orders but also utilizes advanced Natural Language Processing (NLP) capabilities with machine learning at its core.

My Role:

Lead UX Designer

Tools:

Figma, Sketch, Freehand, Microsoft Azure

Team:

Back-end Engineers, Front-end Engineers, DBA, Experience Designers

Product Overview

Providing a service that supports sales representatives processing orders that customers send via email.

Would save time for our team to engage in other ways with the customer. So by streamlining the order processing workflow in Outlook so that orders can be automatically processed through Esker without manual intervention, and if any issues arise during the process, I can interact with user-friendly UI workflows to resolve them effectively.

The Outlook Add-on automates the order processing for our company’s products. This Add-on should seamlessly integrate with Outlook, allowing me to initiate the order processing with just a few clicks.

Receive

Received customer orders (e.g., fax, email, EDI) are automatically routed to the correct CSR based on key order information.

Detected

The goal is to detect messages that appear to contain purchase orders from customers, you can implement a natural language processing (NLP) system with machine learning capabilities.

Extract

The solution finds and extracts all relevant purchase order data and creates the corresponding sales order in the ERP system.

Verify

Esker automatically detects exceptions. CSRs only have to verify the extracted data is accurate or complete what is missing.

Manage

When exceptions occur or approvals are necessary, the order is automatically put into a workflow so that the exception can be lifted.

Analyse & Refine:

Orders are visible at every step. Tailored dashboards and metrics deliver key information to facilitate daily tasks and measure process efficiency.

Automation for every phase of order processing

Product Design

Sign in & security

Improved user experiences from the beginning, making the passwordless authentication flow delightful has been a top priority, which is why we’ve made numerous improvements to user consistency and flow.

Searching for your next opportunity

Search for Contact: Input the contact’s information into the search field and initiate the search. The system will then look for matching contacts based on the provided information.

Order Process with a human touch

In order to ensure smooth and efficient AI performance, it is imperative to provide assistance through UI to alleviate any confusion that may arise during the order process. Here are prompt steps if any issues occur.

Outlook Add-in to add Tasks

If you need to set up a new task on an email you received, you can do it without leaving Outlook. Simply use the Outlook Add-in to add Tasks. You can easily view the contact in the add-on and make the necessary changes without any hassle.

Quick walkthrough

Research

Creating a great user experience is all about following a meticulous design process.

When designing our plugin, we paid attention to all the details, worked with the product owner and lead devs to come up with a solid roadmap, and iteratively pushed this plugin out to our Sales team, gathered feedback, and continued to improve on its capabilities. We knew that we had to learn how to leverage new technologies like AI (Azure AI Document Intelligence) to learn pre-built and custom models of what a purchase order is and to formulate an algorithm that could cleverly identify patterns in email messages, making it easier for users to detect when customers were sending purchase orders.

The focus on UX extended to how our AI-powered NLP system handled purchase orders and processes through Esker. The team worked closely together in designing it to learn from every purchase order, so it could continuously improve its understanding of the unique language and structures of these orders. This meant that it could handle future orders more accurately and efficiently, providing a seamless experience for our users.

This plugin was a great solution that leverages the potential of AI technology and improves how we handle customer orders. By focusing on UX, we’ve created a plugin that provides enhanced efficiency and accuracy with every interaction, making it easier for users to manage their work.

Design Approach

Explore The designers were given the opportunity to create multiple concepts for both desktop and mobile devices, with the aim of exploring a range of design possibilities.	Present During the presentation, all concepts were thoroughly explained and solutions were presented. Any feedback was evaluated and brought back to stakeholders for discussion.
Vote Through collaborative effort and a commitment to excellence, the group made a decision based on the power of the proposed solutions.	Validate Through each process we were able to successfully prototype and validate many refined concepts for both mobile and desktop, demonstrating our ability to work efficiently and effectively.

Adopting a Design System

I designed this plugin using Microsoft Design System (WinUI 3) to make sure development team had all the essential components for our project. Our main goal was to follow the fundamental principles of UI design to deliver a seamless and user-friendly experience.

Instead of jumping straight into development, our team prioritized building a strong UI foundation. We carefully analyzed and improved every workflow outcome to ensure a consistent and comprehensive UI, reducing the need for customized components.

Our approach involved utilizing the established design system of Microsoft Design System to take advantage of its UI principles. This enabled us to create a refined and effective user interface that perfectly aligns with our project objectives.