top of page
Automating Invoice Management
Helping Suppliers optimize payments, improve cash
flow and drive incremental spend from existing new buyers.
By Noelle Fair
Meet the Team
Timeline: 9+ months
Team: Design, Product, Research, Development, Accessibility, Compliance
My Role: Product Design Director and IC Contributor
Industry: B2B
Tools: Figma, Figjam, Mural, Content Square
---
Context
Automation and AI is here to stay - especially for workplace efficiency. In 2023, 70% of CFOs were working to automate their Accounts Recievables (AR) and Accounts Payables (AP) opperations with the expection that by 2025, 80%+ of their B2B transactions would be supported by software platforms. [BCG & Accenture]
The Fortune 500 company I worked for - let's call them Company X., wanted to stregnthen their position in the B2B payments market, expanding their network of Suppliers to enable more commercial card members to pay using one of their payment services.
Traditionally, Company X focused on solving for the last mile of the user journey - payments. But to solve their customer's needs they needed to think bigger. They acquired a company specialized in pay to order and needed to intigrate its solution with existing company products. That's where I come in.
---
Design Process
Every design project requires a personalized approach. However, the main elements remain constant. I like to use the triple diamond. This case study will cover:
1. Research
2. Proof of Concept
3. Sketch & Wireframe
4. Test
---
Research
There was no researcher in role for a majority of the project, so I managed the research and defined the methodology, working with a third party agency who conducted the studies on our behalf (a compliance requirement). I love research - so this was fun!
I immediatly set to pulling existing company research on competitors in the B2B space and conducitng my own competitie analysis. With the help of a teammate, we organized a mural board to synthesis our findings. Additionally, for this project our team conducted Generative Research to learn what challenges Small, Medium and Large businesses faced during the procure to pay journey.
Overall, the entire project saw several research studies:
-
Market Insights (Existing Research)
-
Competitive Analysis
-
Generative Research (Prospects & Existing clients)
-
Proof of Concept
-
Usability Testing
-
Ideation Workshop
---
Research Insights
High-Level Users Pain Points
(AR & AP Personel)
-
Managing invoices is time consuming, manual and error prone
-
Paper-based processes create inefficiences leading to missing deadlines
-
Delays due to late / missing payments degrade buyer supplier relationship
-
Poor transparency between buyer / supplier can create further stress
-
Manual processes makes reconciling payments challenging
-
Accounting and ERP systems are not always integrated
Accounts Recievable
"I have payments hitting my bank account and checks arriving in the mail - all the time. Mnaul reconcilliation takes so much time!"
Accounts Payable
" I have a stack of paper bills that need to be paid ASAP. If only I could streamline the process...and if it could maximize rebate for my business, what a bonus that would be."
---
Ideation
I designed and led an 11 person workshop for VPs, Directors and managers across three different product teams and engineering to build alignment on project goals, drive awareness for the user journey, and define the primary capabilities that our product would focus on and capability overlap in existing product suite.
​
How Might We:
-
Make it easier to update Purchase Orders?
-
Have less paper?
-
Integrate electronic invoicing?
-
Reduce the need for reconcilliation?
-
Centralize connection and reporting?
-
Build a one stop shop?
We landed on three phases of work:
-
Single Platform: Build an integrated experience for AR personel to send invoices and reconvile payments.
-
Homepage
-
User account management​
-
Supplier Notifications
-
Ability to view payment detials
-
History of payments
-
-
Unified Supplier Onboarding: Build an onboarding journey where Suppliers can enroll seamlessly.​​
-
Email invite​
-
User Login
-
T&C Contract Signing
-
-
Enhanced Incoivce Offering: Enable a direct exchange of invoice data with ERP integrations.
-
Uploading invoices
-
Flip to sales orders to Invoice​
-
Send invoices to buyers
-
Status updates on invoices
-
---
Mural Board of workshop.
---
High-level Challenges and Dependencies
There were many significant challenges to overcome making managing roadbloacks feel like a full-time job.​
​
-
Relational: Merging together three product teams with no unified North Star, or consistency or role responsibilities.
-
Technological: Significant legacy code and back-end unification challenges.
-
Usability & Product: Need to unify three products that looked and functioned differently and integrate a newly acquired product.
-
Design: The company launched a new Design System half way through the product and all files had to be migrated. Plus, changing team mates due to internal re-orgs.
-
Market: Builiding a compelling GTM strategy and helping the market see Company X as a player in the invoice space.
-
Legal: Maintaining and interating 3 products in market in order to meet existing contracts with clients while planning for the future.
---
Solution
By building a highly automated, unified platform for Suppliers to navigate the Order to Cash process, we will remove frictions that delay payments, and better connect them to their Customers.​
---
---
Create and send invoices
Link your payments to your invoices
Reduce payment delays and manage cashflow
Streamline digital reconcilliation
Single experience in one platform
Collaborate on order and invoices in-platform
Connect with ERPs
---
Sketching, Wireframes and Mood Boards
For this part of the project, our team embraced collaboration from the start. We began by individually sketching ideas, which we then broght together to map out an overarching flow. We held focused sessions to refine key areas, like payments, invoices and the homepage. Lastly, we grouped our pages to build out a cohesive structure. This iterative approach allowed us to establish a clear direction and ensure the designs aligned with our goals while incorporating thoughtful details throughout the process.
​
Taking time to collect inspiration from other product and designers was a key part of our design process. We explored platforms like Dribble, looked at experiences across the company's other organizations, and watched flows of competitor products on YouTube(you'll be suprised what you can find there!). These served as a guilding reference throughout our design process and provided inspiration during roadbloacks.
​
With the help of Research, we were able to test our early sketch concepts and validate that a unified user experience for making invoices and payments was desired by users.
---
Mood board
---
Journey flow
---
Sketches
---
New DLS Friendly & Dev Approved Page Layouts
Changing of navigation items.
B2B Design System
Massiv change to the backend legacy code so had to get it built into the roadmap amongst the other mvp work.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Typgraphy
---
Parent and Detial Pages
---
Elevated Task Flow
---
Side Bar for Viewing Details on Details Page
Redesigning Invoice Management
Issues with the flow. The answers from the team. the design changes you made. why that lines up with the ask from users. Connecting to an ERP. Validations.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
---
Before
Before
---
After
---
Create an Invoice Management
---
Addition of Homepage and First Time User Walkthrough
Changing of navigation items
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
---
Before
After
---
First-Time User Walk Through
---
Impact for Business and Metrics
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
---
What I Would Do Differently
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
---
bottom of page