SCROLL
Boosting Invoice Visibility
Summary
We improved our invoice experience to enhance information visibility, streamline team communication, and reduce task completion time.
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
While building a major update to the platform, we received feedback from the Head of Finance (of our largest customer) that her team was missing important invoice notes in Archie, causing off-platform confusion. We didn't have a lot of time to fit in a new project, but decided it was worth the extra time to investigate.
Research
Hearing from the Head of Finance
From my conversation with the Head of Finance, I learned that her team was confused about which invoices had been reset, despite her leaving detailed notes each time she reset an invoice. She was also frustrated by repeatedly resetting the same invoices and troubleshooting through excessive off-platform communication.
Hearing from Non-Admin Members
To understand both sides, I met with several non-admin users to understand their perspective. I learned that they were confused about why invoices were being reset and why the assigned approvers had to re-approve the same invoice. When asked about the Head of Finance's notes, not one user knew what I was talking about. Diving in further, they either had some awareness about the Activity Log tab of the invoice or didn't bother clicking it. Their main concerns were about paying vendors late, potentially affecting repeat business.
Referencing the Data
To better understand the scope of this problem, I reviewed the data and discovered the following:
• This client had 2x more invoices reset compared to all other clients combined
• This client had 3.3x more invoices reset compared to all other clients combined
• Non-Admins weren't aware / didn't care about the Activity tab in the UI
• The majority weren't opening the emails related to invoice reset actions
Revised Problem Statement
Now, I had a clear understanding of the problem. It wasn't at all related to "missing data" but rather hidden / nested data.
Context
Invoice View
When clicking on an invoice from the invoice tabe, we trigger this drawer sidebar view. The view has 2 tabs: Details and Activity. The details tab includes all information about the invoice, and the Activity tab is a log of all events associated with that invoice.
Resetting the Approvals
When a vendor submits an invoice, it is automatically assigned an approval workflow depending on the invoice amount. That workflow is displayed on the invoice preview page in the "Approvals" widget for anyone to reference.
If an Admin updated an approval workflow in Settings, they can click the "Reset Approvals" button on an invoice to replace the existing workflow with the latest workflow. When resetting, we encourage Admins to leave a detailed message for their team members to promote transparency into why an invoice is reset. An email notification (which includes this message) is also sent to the approvers on the prior workflow.
The reset event (as well as the message), then populates in the Activity Log. This is a detailed record that tracks all actions and changes related to an invoice. This log acts as a clear audit trail ensuring transparency and accountability.
Process
Getting Team Buy-In
I met with the Head of Product and Engineering to discuss if we could fit this in, especially since the feedback came from our largest customer. Making this fix would set us back a bit on the big project we were actively working on, but decided it was worth the delay since it was causing our users so much frustration (especially the key decision maker).
Brainstorm #1
During Cycle Planning with the Head of Product and engineers, we explored several solutions, but the discussion began to lose focus. I redirected the group back to the core issue and proposed fleshing out each option in more detail for a future session. Using Figjam, I outlined the ideas, highlighting the benefits, concerns, and key questions for each, for a more structured and productive brainstorm.
Option 1: Add Message / Chat Area
Add an area on the invoice that allows team members to chat about details / issues related to the invoice.
Option 2: Add Alert / Notice
Similar to the alert block that appears when an invoice is "Blocked" or with a "Payment Error", we would show a widget at the top of the invoice that serves as a notice the invoice has been reset with the message.
Option 3: Build Notifications
Build a notification center that pings users anytime important actions happen. To start, we would notify them only when an invoice has been reset to keep scope slim.
Option 4: Transform "Activity" tab to a widget (New Idea!)
Merge the 2 tabs on the invoice sidebar and transform the activity log into a widget near the top of the sidebar. This addresses both parts of the issue – the activity log not being seen and users not clicking the activity log.
Brainstorm #2
We regrouped, and I presented each option, outlining the pros and cons. After voting, the decision was unanimous: we would transform the "Activity" tab to be a widget on the main view. This shift elevated the Activity log, making it more accessible and prominent. It streamlined internal communication, sped up team workflows, ensured vendors were paid faster, and was the simplest solution to implement.
Design Options
I headed to Figma to draft what Option 4 could look like, keeping the scope tight by minimizing changes and leveraging existing components. However, I suggested we bold the message text and tweak the color of the reset event to make it stand out from the event details.
I showed the team, and they loved everything except for the proposed additional changes. They explained that bolding the text would be more complicated than it seemed due to how the activity event messages were initially built. They strongly recommended that we save the text and color changes for a fast follow and prioritize pushing the current updates as soon as possible.
User Feedback Session
We met with the Head of Finance and a few non-admin team members to showcase Option #4. She loved the solution and shared a few points of feedback:
• "Can we bold / change color of the "Reset" message?" As mentioned above, this was something that I had incorporated into the original designs, but had to punt due to additional build time.
• "Will users click "Load More"? The button blends into the widget." We can't force the user to click on certain parts, but we can differentiate styling to draw attention to the widget and/or add more guidance in the tool to help train users on new features. This is considered an additional change, so we scheduled this for a fast follow.
Final Design
Even though the Head of Finance also suggested text and styling updates, we decided to launch the feature as-is, reminding ourselves that the critical project we were working on needed to remain the priority. A few days later, the feature was shipped to QA, tested, and launched the following day. The team kept the project lean to ensure engineers could quickly return to the core Archie initiative they were focused on.
Results
Reduced the amount of resets for this client by 50% in the first month.
Significant reduction in off-platform communication regarding invoice resets.
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."
