Project type: Design project at AI-powered Accounts Payable Solutions Company
Project length: 3-4 months
My role: Lead Designer
Collaborators: Product managers, engineering team, design manager
Project length: 3-4 months
My role: Lead Designer
Collaborators: Product managers, engineering team, design manager
Background
*Company name has been fictionalized to white-label proprietary solutions.
Vexa.ai is an AI-driven financial platform that streamlines invoice processing, purchase order matching, payments, and more. While AI automates much of the workflow, AP specialists play a crucial role in reviewing flagged invoices and routing them to the appropriate approvers with the right business context. Approvers review invoices to ensure they are legitimate, necessary, and compliant with company policies. They verify invoice details, check for business justification, and flag any discrepancies or potential fraud before approving payment.
As the platform scaled to support larger enterprise customers, a common challenge emerged: approvers who were out of office often became bottlenecks in the invoice approval process. Both existing customers and prospects frequently requested an Out of Office feature that would allow them to delegate approvals to a designated substitute, ensuring invoices continued to move through the system without delays.
Discovery
What initially seemed like a straightforward problem quickly revealed its complexity as we considered the different user flows and roles involved. To gain deeper insights, I interviewed customers who had requested this feature and consulted our internal finance team. These conversations uncovered several key insights that helped shape the design:
1. Subsitute approvers need to be easily set up by either approvers or admins.
Admins should also be able to assign substitute approvers in cases of unexpected absences or when approvers forget to set one up themselves.
Admins should also be able to assign substitute approvers in cases of unexpected absences or when approvers forget to set one up themselves.
2. Substitute approvers are typically managers or colleagues who have enough context to make decisions on behalf of the approver.
3. Some approvers will want notifications while away. While many prefer to disconnect entirely, a few still want optional alerts about invoices being handled by substitutes, so we made notifications configurable.
4. Approvers may be out for extended periods. This includes long-term absences like maternity leave, which requires a reliable substitute setup for the duration.
5. The feature needs to work across both web and mobile platforms. Approvers use both platforms, so providing the ability to assign substitutes easily on either device ensures flexibility and accessibility.Additionally, I explored how tools like Google Calendar and Slack manage out-of-office statuses to identify relevant patterns and find inspiration for handling substitute roles in a seamless way.
Design Process
Approver’s Workflow
When we first tackled the approver experience in the web app, we identified the user menu as the natural place for integrating the out-of-office management feature. The user menu already served as a hub for profile and notification settings, so it made sense to build on that foundation.
At the time, the company had recently undergone a rebrand and a redesign of the main navigation, which provided a perfect opportunity to introduce a dark theme for the user menu. This not only aligned with the new design language but also helped the user menu stand out from the rest of the interface. Additionally, I took this chance to restructure the menu’s content. By moving less frequently used profile settings into a dedicated section, I decluttered the main menu, creating more space for future features.
Before Rebranding & Restructuring | User Menu & Settings Section
As we expanded the user menu to include out-of-office scheduling, the product manager and I discussed how the space could also support future features, such as in-app chat. We considered adding a user status feature that would show whether someone is online, offline, or out of office, allowing users to easily gauge availability during chats.
Early Iteration - Version 1
Early Iteration - Version 2
Early Iteration - Version 3
Initially, the design closely tied out-of-office scheduling to user status, allowing users to click their avatar and name to set their availability and assign a substitute approver. However, testing with customers and internal stakeholders revealed that over 60% of users didn’t find this design intuitive—they didn’t expect to schedule out-of-office time by adjusting their status.
In response, I separated the “Schedule Out of Office” feature into its own section within the user menu. I also added icons for easier scanning and included a reminder of the upcoming out-of-office status, showing either the date or a countdown as the time approached.
Final Iteration
Final approver's workflow to assign a substitute approver
For approvers who prefer the mobile app, we extended the out-of-office feature to ensure a seamless experience across platforms. I carried over key design decisions from the web app, including the restructured user menu/account page and the dark theme, maintaining consistency between the two.
Mobile App Experience
To future-proof the design, I added over 10 components to our design library, making the dark-mode elements reusable across other parts of the product if needed.
Dark-mode components
Another critical consideration in the approvers' workflow was access control. It was possible for a chosen substitute approver to lack the necessary permissions to access approval pages. While we initially debated notifying admins automatically to assign temporary permissions, we ultimately opted for a simpler solution: displaying a warning message to inform the original approver. This allowed them to take action outside the platform (via email, chat, etc.), addressing the issue without overcomplicating the feature in its first iteration.
A key insight from showing this design to a customer was the need to narrow down the substitute approver list to only the approver's department. They expressed concerns about the list being too broad and the risk of selecting the wrong person, which posed a potential security risk. This feedback proved invaluable, and the product manager and I decided to follow up with the customer after our initial development cycle to refine this aspect further.
Warning message when a substitute approver requires access
AP Specialist’s Workflow
AP Specialists manage approval flows—initiating, tracking, or canceling them—so it was crucial for them to see when a substitute approver was involved. I carefully mapped out designs for different time lines invoving substitutions.
To ensure clarity while maintaining a clean UI, I incorporated this information using subtle visual cues. The original approver was displayed in low-opacity to indicate they were temporarily replaced, with detailed change history accessible via a popover tooltip—an existing component in our design system. Additionally, since approval records are critical for audit purposes, these substitutions remained visible in historical logs.
Pending approval with a substitute approver
Rejected by a substitute approver
Approved with a chain of substitute approvers
Implementation Details
To define the scope for the first iteration, the product manager and I worked closely with the engineering team to identify technical constraints and edge cases. This feature was initially limited to invoice approvers only, excluding Purchase Order (PO) mismatch approvers due to their separate approval workflows.
We also considered multi-step approval scenarios, where a substitute approver might already be assigned to a later step in the process. Ideally, we’d skip the original approver’s step in such cases to avoid redundant approvals, but since this situation was rare, we decided to deprioritize it for future iterations.
Additionally, while a date range picker would have been more user-friendly, it wasn’t available in our existing design system. To minimize engineering effort, we opted for separate "From" and "To" date pickers instead. These strategic decisions allowed us to focus on delivering a functional solution while leaving room for future enhancements based on user feedback.
Impact & Outcome
Looking back, this was a fast-moving, high-impact feature. I worked closely with engineering to support a quick, quarter-long implementation. The feature thrilled both our Sales and Customer Success teams, and we received positive feedback from existing customers for its practicality and effectiveness.
In addition to the feature’s success, I contributed over 10 new dark-mode components to our design system. The redesign of the user menu also boosted our brand identity, aligning it with the new branding from our marketing website. This made the product feel more cohesive, cleaner, and visually appealing.
By solving the challenge of assigning substitute approvers when the original approvers are out of office—an issue particularly prevalent in larger organizations—we not only improved customer satisfaction but also unlocked opportunities to attract enterprise customers, expanding our customer base reach.
