AppZen / Product design, Prototyping, Design system / 2023

Upleveling User Experience in AppZen's Autonomous AP Product

AppZen Autonomous AP Product

The AppZen Autonomous AP Product is an AI-driven solution designed to simplify and automate the accounts payable process. It plays a crucial role in enhancing the efficiency of financial operations by processing invoices and financial documents intelligently and swiftly. This product is key in modernizing financial workflows, ensuring accuracy and speed in invoice handling.

Introduction: Elevating Autonomous Accounts Payable Experience

As the Design Lead at AppZen, my mission was to revolutionize the user experience of our Autonomous Accounts Payable (AP) product. Our objective was to create a user journey that was not only seamless but also remarkably efficient, focusing on refining interaction patterns, enhancing information architecture, and revitalizing our entire design system.

Project Overview: Revolutionizing Invoice Processing Experience

The Challenge: Our journey began with the ambitious goal of redefining the design of critical product components – the Workbench and Invoice Details pages. The Workbench serves as the operational hub for AP staff, displaying a comprehensive view of pending tasks, including invoice details like numbers, approval statuses, and due dates. These invoices, imported directly from the AP team's email inbox, are processed by AppZen's AI, which extracts and predicts necessary data. The Invoice Details page is a tripartite design, featuring the original invoice, a data input area for user verification and modification, and a right panel displaying alerts, required actions, approval history, and comments. Previous versions of our product had notable design flaws, including inefficient navigation and poor information presentation, which hindered processing efficiency and user experience.

The Need: Insights from customer interviews and live session analysis revealed significant inefficiencies: excessive mouse travel, prolonged invoice processing times, non-responsive design impeding data readability, and inconsistent interaction and visual design across pages.

Identifying Key Design Challenges in the Previous Version

In the earlier iteration of the AppZen AP product, several design challenges significantly impeded the user experience:

1. Inefficient Workflow Navigation: Upon approving or rejecting an invoice, the system did not automatically proceed to the next invoice. Instead, it reverted to the Workbench view, compelling users to manually select the next invoice. This design flaw resulted in unnecessary cognitive load and redundant navigation, leading to longer processing times for each invoice.
   
2. Poor Information Presentation on Invoice Details Page: The layout on the Invoice Details page lacked consistency and clarity. This inadequacy made it challenging for users to scan and locate crucial information efficiently. The absence of a coherent information structure significantly hindered the ease of use.
3. Lack of Responsive Design: The previous design was not responsive, particularly problematic on smaller monitor sizes. This non-responsiveness led to a redundant and less efficient user experience, as users struggled with data display and interface interaction on various devices.

These design issues not only affected the workflow efficiency but also impacted the overall satisfaction and productivity of the users. Addressing these challenges was crucial in our journey towards enhancing the AppZen AP product.

My Role and Strategy

As the Design Lead, my key responsibilities were:

• Interaction Design: Focused on optimizing user flows for heightened efficiency.
• Design System: Tasked with creating a unified and scalable design language known as the Zen design system.
• User Flows and Prototyping: Committed to designing intuitive user paths and developing realistic prototypes for comprehensive testing and feedback.

The Journey: From Insight to Execution

• User-Centered Analysis: Customer feedback highlighted critical issues like redundant interactions, cumbersome workflows, and poor responsiveness affecting data readability.
• Design Strategy: I aimed to develop responsive layouts, enhance readability, and streamline user flows.
• Execution: The overhaul encompassed the Home, Workbench, and Invoice Details pages, rectifying these issues with a fresh, user-centric design approach.

Impact and Outcomes

The redesign significantly uplifted the user experience:

• Efficiency: Marked reduction in learning curves and expedited task completion.
• Consistency: Established a uniform look and feel across all products, fostering user trust.
• Internal Benefits: The Zen design system significantly streamlined both the design and development workflows.

Conclusion: Pioneering New Frontiers in UX

The transformation of AppZen's Autonomous AP product transcended mere user experience enhancement. It heralded a new era for our design and development approaches, significantly elevating the standard of our craft and laying the groundwork for future innovation and excellence.