SCROLL
Improving Financial Controls
Summary
Improved financial controls through multi-level approval workflows, resulting in a 6x revenue increase from our largest client.
Client
Archie
Overview
Archie is a B2B SaaS web app that centralizes invoice and vendor management. Without Archie, the process of working with vendors was very manual and inefficient. Businesses would use outdated tools that don't talk to each other, wasting their time and money, which resulted in ambiguity and late payments for freelancers. That's where Archie comes in. We simplify freelancing where it matters the most – payments. We believe in a future where there is no more "us" versus "them" when it comes to the vendor/business relationship.
Challenge
Moving into 2023, our goal was to close deals with larger SMB customers in order to boost revenue. The problem was, we kept losing out on these deals and didn't know the reasoning behind why these companies were passing on us.
Research
Round 1: Macro-Level
Through interviews with prospects and existing customers, we identified several pain points. While they had different things to say, they all mentioned the same features that would 1. Allow prospects to shift their vendor and invoice operations onto Archie and 2. Allow exiting customers to process more invoices in Archie.
The features mentioned were:
• International payments
• Artist / agency handling
• Accounting system integration
• Complex controls for approving invoices
When discussing priority and importance, the first 3 would be complicated to build and could take a decent amount of time. There was also this overarching need for greater invoice controls to make those features successful. If we launched with those first, the impact would be lower. The priority became clear: build a scalable, flexible approval system to handle complex invoice approvals and catch errors early.
Round 2: Micro-Level
Now that we had decided to move forward with building a flexible approval system, we had to define what the details of this feature entailed. To do so, we met with prospects and existing customers again to understand the criteria and unique needs of each organization.
Smaller organizations generally required anywhere from 1-3 people to sign off on an invoice before it is paid. They were often within the same department / team, and would often be responsible for submitting payment too.
Larger organizations required 3 or more individuals to sign off on an invoice before it is paid. They were often from separate departments / teams and did not talk / know of each other.
Other insights revealed:
• How clients refer to the approval process
• Lack of communication and transparency across the organization
• Each role / approver could have different goals / focuses
• A significant amount of communication and confusion off-platform
• Greater need for flexibility and security
Process
Defining Goals
To get started, I partnered with the Head of Product to outline the business goals and design principles we wanted to work towards.
Project Components
From there, I broke the project into components:
What's the workflow to get started?
What's the workflow to make adjustments?
What are the effects to incoming and existing invoices?
How do we share processes across the organization?
Design Considerations
In addition to the components, we also had a lot to consider going into the design:
Location of Controls
Should we keep the current setup with controls located on the project page? This option simplifies technical implementation but may lead to usability issues, page clutter, and complicated user permissions. Alternatively, we could move the controls to the Settings section. While this approach is more complex technically, it offers a cleaner user experience and paves the way for significant future value, enabling us to grow and scale the feature effectively.
Assigning Workflows
The vision was to automatically assign the corresponding workflow to each incoming invoice. However, we needed to address what to do with existing invoices. We explored a few options: reset all invoices, reset none, or allow users to select which invoices to reset. Each option varied in technical complexity, with the last option being the most challenging to implement.
Automation
Our goal was to automate as much as possible to create a seamless experience for users. Managing approvals shouldn't be a daily, weekly, or monthly task; it should only require adjustments when there are changes to the workflow. This approach minimizes user effort and maximizes efficiency.
Tracking
During our research, we discovered significant confusion and off-platform communication regarding processes and workflows in larger organizations. Our challenge was to help users visually comprehend these processes while minimizing cognitive load. To address this, we aimed to create a visual guide that clarifies workflows, making it easier for users to understand and engage with the system.
Variables
Customers expressed interest in additional variables beyond invoice value for creating workflows. The challenge was to design a simple and flexible experience that accommodates all variables without overwhelming users. To achieve this, we focused on a modular interface that allows users to easily select and configure different criteria for their workflows.
Design Iteration #1
After internal discussions, I presented a first iteration of the Approvals feature to the team. This version enables users to create linear approval steps based different variables. For the initial release, those variable fields would be disabled since we still needed to define the intended behaviors.
After further discussion, I raised concerns that the current approach might actually not be the best fit. It assumes two things: 1) that we'll eventually build out the additional variables, and 2) that those variables will behave the same way. However, our customers mentioned these variables as "nice-to-haves" rather than launch blockers. So, it might make more sense to introduce a general "Rules" section for these variables later. Since we weren’t confident we should build this yet, I suggested we focus on the immediate, critical use case: designing approval workflows based on invoice value, which was essential for launch.
Design Iteration #2
Back in Figma, I redesigned the experience and tailored it to creating approval workflows based on invoice value. This version was more focused, intuitive, and easier to digest. I presented this approach to the team and they agreed that this was on the right track and that we were ready to run this by our customers for feedback.
User Feedback Sessions
We presented the new design and functionality to our users not only to gather their feedback but also to "pre-onboard" them to the feature. This strategy aimed to form "early adopters" at each organization, enabling them to guide others through the transition.
For the final design, I transitioned the edit experience from a single workflow view to a multi-workflow view. This change allowed users to adjust multiple workflows simultaneously, reducing the number of clicks and streamlining the overall editing experience.
Final Design
We launched the final design shown in the prototype below. Now, approval workflows in Archie support multiple approvers, automate tasks, and enhance transparency.
Design Explanations
Invoice Value Range vs. Value Breakpoint
We learned that clients viewed the transition between workflows as “breakpoints” rather than invoice ranges, consistently referencing the starting value of the range. By incorporating this approach and automating the end value updates, we eliminated a significant amount of error handling, streamlining the setup process for users.
No Approval Workflow
We discovered that some customers, particularly smaller organizations, didn’t require approvals for certain invoice ranges. To accommodate this, we made the approval workflow flexible, allowing users to customize it without requiring fields for every range. This ensured that they could tailor the structure to their specific needs.
Duplicating Workflows
Since the differences between workflows are often small, we added the ability for users to quickly duplicate workflows. This feature helps save time by allowing users to make minor adjustments without needing to start from scratch.
Other Updates
Information Sharing
We introduced a new widget on the invoice view to display approval progress. The widget not only provided an overview of assigned approvals but also served as a guide to the company’s internal structure and processes, making the workflow more transparent and accessible.
Editing Invoice Values
In addition to the core workflow, we considered how other interactions, like editing fields on an invoice, could impact the assigned approval workflow. We designed modals to notify users of these potential changes. These alerts ensured users were aware of the consequences of their actions and could make informed decisions, reducing confusion and minimizing errors during the approval process.
Status, Nudges, Tracking, Filters
To help users quickly identify invoices requiring their attention, we expanded our invoice statuses to be user-specific. Additionally, we introduced "nudges" and more advanced filters for easier organization, creating a cleaner and more efficient viewing experience. This approach streamlined the tracking process, allowing users to prioritize their tasks more effectively.
Results
In addition to the core workflow, we considered how other interactions, like editing fields on an invoice, could impact the assigned approval workflow. We designed modals to notify users of these potential changes. These alerts ensured users were aware of the consequences of their actions and could make informed decisions, reducing confusion and minimizing errors during the approval process.
Our largest client increased revenue 6x by onboarding more locations due to the new controls.
Closed 2 new deals that had previously passed on Archie.
Significant reduction in off-platform communication thanks to improved transparency.
ServicesI offer
Services
I offer
Here’s how I can help bring your vision to life, from compelling designs to creating a standout brand identity.
01
Branding
I help you build a memorable brand with compelling stories and impactful visuals, ensuring your business stands out and connects with your audience.
02
Design
I bring your vision to life with user-friendly websites, impactful UI/UX designs, and engaging mobile apps, combining creativity with technical expertise for stunning, functional results.
03
Motion
I add dynamic flair to your brand with animated logos, explainer videos, and interactive web animations, creating captivating visuals that tell your story in a memorable way.
"Working with Steve was a game-changer for our brand. His keen eye for detail and seamless execution turned our ideas into a visually striking reality. Highly recommend!"
"Steve's creativity and professionalism truly impressed us. He delivered a sleek and modern solution that perfectly captured our brand identity. A great person to work with!"
%205.png)
"Steve exceeded our expectations with his innovative approach and flawless execution. He transformed our concept into a captivating solution that resonates with our audience."
"Choosing Steve was the best decision we made for our project. His expertise in both aesthetics and user experience resulted in a product that not only looks stunning but also functions beautifully."
