Invoice Approval Process Transformation for Archie

We transformed the invoice approval process in Archie, leading to a 6x revenue increase from our largest client.

Role

Lead Designer

Team

Product Team, Engineering Team

Timeline

6x Revenue Boost

This feature gave our largest client the confidence to onboard their remaining locations onto Archie, leading to a 6x revenue increase

Improved Adoption

2 major prospects that had previously passed re-engaged with us

Centralized Team Collaboration

The approval workflow widget added on the invoice preview provided transparency to teams and reduce off-platform communication

Intro

Archie is a B2B SaaS platform that centralizes vendor and invoice management, making it easier for businesses to track, manage, and process payments. With features like real-time invoice tracking, in-app communication, and a detailed activity log, Archie reduces manual work and eliminates the need for scattered tools. Our clients use Archie to streamline financial operations, improve team collaboration, and ensure vendors get paid on time.

The Vision

When invoices flow smoothly from submission to payment, everything clicks into place. Customers feel empowered with more flexibility and control, being able to set up multi-level approvals without extra manual work or scattered DMs/emails. Larger SMBs and enterprises see Archie as a serious solution for managing vendors and invoices—one they can trust to handle complex invoice approval requirements. And within organizations, teams communicate better, reducing delays and confusion around approvals. If we could nail this, it wouldn’t just improve user experience—it would drive revenue growth and position Archie as a top-tier financial operations tool.

The Obstacles

But we weren’t there yet. We were losing deals with larger SMBs and enterprises because we lacked critical invoice controls. Our existing approval process was rigid and manual, forcing users to specify an approver every time they created a project.

Additional context–Archie was built as a project-centric system, meaning that projects were required before doing anything else in Archie. Projects were essentially folders that housed vendors and invoices. When creating a project, users could specify a dedicated person to approve invoices, "invoice approver". This became tedious, error-prone, and led teams to work outside the platform, creating bottlenecks. In addition, the users creating projects were often coordinators–a role with limited access–which created security concerns since they were the ones defining the approvers. Decision-makers didn’t fully trust Archie as a viable solution for their financial operations, and that had to change.

The Proof

We knew this was a solvable problem. Through research, we spoke with internal teams, clients, and prospects to understand their pain points and workflows. We mapped out the user journeys and noticed a couple patterns between customers of different sizes, but the need for flexible, automated multi-level approvals was crucial across the board.

↓ Small Organizations

One pattern we noticed was that small organizations didn't have many individuals involved, and there were only a couple steps depending on other tools used. In some cases, the same person performed several actions like approving and paying.

↓ Large Organizations

However, large organizations required the participation of several individuals (across various teams), tools, and steps. There were only a select number of individuals who had knowledge of the full process, leaving everyone else in the dust. This caused a lot of confusion and communication off-platform and often led to late payments.

The Process

To solve these challenges, I outlined everything we wanted out of this feature. I held a couple brainstorm whiteboarding sessions with cross-functional partners to get answers to my questions.

After I had a good idea of what this feature needed to include, I began creating and sharing wireframes to spark conversations and brainstorms. The main purpose was to transform our current invoice approval process from an open, single step format into a locked, multi-level system.

↓ Variation 1

In the first version, I moved the approval settings from the Create Project screen to a dedicated Settings page, giving users more control and space for the feature to grow. I designed the experience as an inline edit format, allowing the user to take action immediately. I structured the design as a formula, since customers mentioned that it would be nice to have variables other than "invoice value". For this version, it would be disabled, but I wanted the design to easily scale with future improvements.

Team Review

I wasn't married to this design–I figured that we wouldn't build out the other variables anytime soon, since we had larger, more impactful features on the current roadmap. However, I still showed this version to the team to spark conversation and collect additional perspectives. The team agreed that it was unlikely we would build the other variables in the next year, so I returned to Figma to work on a different approach.

↓ Variation 2

With this next variation, I wanted to simplify the user experience. This is the most advanced feature in Archie, and our users aren't very tech savvy. This new approach split the previous inline edit experience into separate view and edit modes. Immediately, the user would be shown any workflows they have created, with the option to "Manage Workflows" which directs the user to a separate page.

↓ Variation 2 - Manage Workflow Experience A

I created 2 versions of the experience when the user attempts to edit or add workflows. With both versions, I thought it was important to allow the user to edit multiple workflows at once, since they can be interconnected and would save the user a ton of clicks. In Experience A, we start the user with a widget, and allow them to add more workflows through clear CTAs. The workflows would re-order upon saving.

↓ Variation 2 - Manage Workflow Experience B

In Experience B, we start the user off with a fixed area at the top of the screens that represents the "add" area. The user fills in the information, clicks "Add Workflow", then a workflow widget populates underneath the "add area". This version aimed to minimize cognitive load by removing the need for the user to figure out where to click "Add Workflow".

Team Review / User Testing

The team liked the changes made, had some technical concerns, and agreed that we should test this with users. Upon testing, users loved the main view showing the workflows, but hesitated to find out how to add / edit workflows, and once the user arrived on the Manage page, they needed a lot of pushing to figure out next steps. Both versions of the Manage Workflow had the same outcome, proving this experience needed tweaking.

↓ Final Variation

With this next variation, I wanted to dramatically simplify the add / edit experience. I transitioned the main view into more of a timeline structure, and moved the Add button in closer proximity to the workflows. I also changed the manage experience from a bulk edit to a singular edit, allowing the user to focus on one workflow at a time. The page transition should also be more seamless, so I utilized our drawer component–that way, the user can visually see the background while they are making the necessary edits (the dark gray background shown in the wireframes would be a transparent overlay).

Team Review / User Testing

The team loved this version–it eliminated a lot of complexity with the bulk manage experience. I tested it again with clients and they also loved it. I didn't have to guide them at all, they were able to add, edit, and delete workflows with no guidance. Another strategy we had with user testing was not only to collect feedback, but to pre-onboard the users since this was a more complex feature. We ended up launching with the version shown above.

The Launch

The impact was immediate. One of our largest clients onboarded the remaining of their US-based locations onto Archie, leading to a 6x revenue increase from that client–directly contributing to revenue growth. Two major prospects, who had previously walked away due to missing approval functionality, re-engaged. Teams centralized their approval processes within Archie, reducing delays and off-platform workarounds. And financial decision-makers, once hesitant, started seeing Archie as a serious, scalable solution.

Approval Setup

The prototype below shows the new and improved experience of managing approval workflows within Settings. We introduced automation by automatically stamping incoming invoices with the corresponding approval workflow. That way, no edits were required from admins on a day-to-day basis.

Information Sharing

When viewing an invoice, I designed a new widget that brought transparency to the approval process, especially now that it lived in Settings which is only accessible to admin users. This widget allowed the user to see what approval workflow has been assigned, and the progress that has been made. That way, any individual can track the status of an invoice, and know who to reach out to if there's a delay.

Editing Invoice Values

With this project, I considered how other interactions, like editing fields on an invoice, could impact the assigned approval workflow. I designed modal popups to notify users of these potential changes. That way, users were aware of next steps and can make more informed decisions.

Status, Nudges, Tracking, Filters

As a fast follow, I wanted to further improve the experience by bringing even more transparency to invoice statuses. I worked with the team to expand the statuses to be user-centric, allowing the user to quickly scan what invoices need their attention and what invoices are waiting on others.

I also designed "nudges" / quick filters above the invoices table for easier organization. We combined user research with data to figure out what nudges would be most useful, then tested them to validate our decisions. These nudges helped streamline the tracking process, allowing users to prioritize their tasks more effectively.

Looking Back

Looking back, strong collaboration between product, engineering, and customers was key to making this successful. We aligned technical feasibility with user needs through continuous iterations, and that made all the difference. If we could do it again, I'd dedicate more time in figuring out the best approach to handle existing invoices when approval workflows are changed.

As far as business goals are concerned, this was a major unlock for Archie’s growth. It laid the foundation for larger SMB/enterprise adoption and set us up for future success.