Bill Pay

WorkRippling · Finance Cloud · Spend Management

Bill Pay

Pay vendor bills where Rippling customers already manage cards and expenses

Project snapshot

My contribution

Role

Designed the flows Spend Management’s MVP still needed, then owned Bill Pay end to end

Focus

Requirements, competitive research, user flows, high-fidelity prototypes, stakeholder reviews

With

A lead designer on the Spend MVP • an Engineering-led product team • Risk and Compliance • Global Payroll • Design Systems

Constraint

A tight deadline, and Spend’s existing request patterns to stay consistent with

Project details

Company: Rippling
Product area: Finance Cloud · Spend Management
Discipline: Product design · Web app
Timeline: H2 2022 → 2024
Status: Bill Pay launched March 2024
Platform: Vendor Portal launched with the MVP, groundwork for a planned Contractors App
Suite: $10M ARR Spend Management in its first year (September 2023)

00 Overview

In the second half of 2022, my first six months at Rippling, I helped launch Spend Management, the newest product in Rippling’s Finance Cloud. Working with a lead designer and an Engineering-led product team, I designed the flows the MVP still needed.

That launch covered Corporate Cards and Expense Management; Bill Pay was planned for afterward. Once Spend Management shipped, I took on Bill Pay’s end-to-end flow.

01 Context

One platform, now with bills

Bill Pay joined Corporate Cards, Expense Management and Payroll, giving customers one view of their spend, and granular control over it, across all four.

Overview: Bill request sits in the New menu beside expenses and cards — FIG. 01Spend Management, the suite Bill Pay joined: three views, one per slide

Bill Pay launched in March 2024. This is the flow that shipped; the chapters below are how it got there.

FIG. 02The bill payment process in Rippling Spend Management

02 Requirement definition

New flow, familiar patterns

Bill Pay had to behave like the Spend requests customers already knew, a card request or a reimbursement, while carrying everything dependable bill-payment software needs. Reconciling the two is one of the hardest problems on Rippling’s platform, and a systems problem first.

FIG. 03The working file: the general Bill Pay flow, the Vendor Portal flow and the first admin screens

Against a tight deadline, I ran quick competitive research and audited the Spend features we already had, then drafted the first Bill Pay flows. The drafts set the MVP requirements: only the essentials, in a flow shaped like a card request or a reimbursement.

1 · Vendor submits an invoice

2 · Admin reviews and creates the bill

3 · Approval, by policy

4 · Paid on the due date

5 · Sync to the external GL

Vendor has an invoice

Uploads it in the Vendor Portal

Emails it to a Rippling billing address

System captures it and creates a Bill Draft

The invoice is in Rippling

Vendor waits for Rippling to act

Admin opens Bills → Draftsin Spend Management

Is there a Bill Draft?

Admin creates a bill from scratchWith or without a PDF

Admin reviews the draftVendor, due date, payment info, currency, approvers, amortization

Need more from the vendor?

Admin clicks “Create Bill”

Vendor revises the invoice

Contact the vendor

Is the bill auto-approved?Set by policy

Approvers get a notification and an email

The required approvers approve it

Scheduled for the due dateShown in the Payments tab

Bill is paid

Select bills ready to sync

Paid bills sync from the Paid Bills table

FIG. 04Initial Bill Pay user flow: a vendor submits, an admin creates the bill, and it is approved, scheduled, paid and synced to the general ledgerRedrawn for this page from the original flow

The first prototype, presented to Product, followed that straightforward path. It also opened a running conversation across the team about requirements and user needs: the start of an iterative process that had to absorb shifting requirements and unforeseen technical limits.

Vendor Portal

Following industry practice, I built a first Rippling Vendor Portal into the draft. Vendors create a profile, submit invoices straight to the customer and track what they’ve sent, as competing products allow.

System captures the invoice information

Vendor emails an invoiceto invoices@rippling.com

Rippling replies automaticallywith a link to register for the Vendor Portal

Does the vendor want to register?

Vendor starts registering

Vendor verifies what the system captured

Vendor logs in to the Vendor Portal

The emailed invoice is in the systemas a draft invoice

Vendor checks the invoice and submits it to the company

Vendor tracks the invoiceSubmitted → In review → Approved → Paid

Vendor is paid

Vendor type, login, address, preferred payment method, bank and tax information

The invoice stays in RipplingAn admin takes it through Bill Pay

Admin registers the payment method

FIG. 06Initial Vendor Portal user flow: a vendor emails an invoice, registers, confirms what Rippling captured and tracks it to paidRedrawn for this page from the original flow

The portal outlasted its first brief. Its core held for the whole project, with iterations as Bill Pay’s MVP cases changed, and it became the groundwork for a broader Contractors App planned for 2024: a path to cross-sell and to a wider set of customers.

Onboarding to the Rippling Vendor Portal, prototype — Onboarding prototype

The launched Rippling Vendor Portal MVP — Onboarding prototype

03 Adapting to evolving needs

Requirements kept arriving

Over the next few months, new requirements and technical limits kept reshaping the flow. I kept refining it in close collaboration with Engineering, and each change widened the cases Bill Pay could handle.

FIG. 08Working against the demo account: annotated screens, Bill Manager review and tooltips

Amortizations

While we tested flows and prototypes, Rippling’s own Accounts Payable team turned out to need amortization. A minimum viable version went into the initial launch.

The whole flow: amortization turned on, categories split, through to the schedule on the bill — FIG. 09The whole flow, then up close

Purchase orders

We also explored a procurement feature connected to Bill Pay, threading Purchase Orders through the flow, and decided instead to build it as a separate product.

0.5 · Purchase order, before the bill

Spend Approvals

1A · Invoice in the Vendor Portal

1B · Invoice in Rippling Spend

2 · Inbox tab

Spend Approvals

3 · Scheduled tab

4 · Closed tab

Purchase order tab

X · Unresolved tab

Employee requests a purchase order

Enter the purchase order details

Sent to an admin for approvalPending approval

Request it from the vendorOutside Rippling?Open PO

Receive the vendor's invoiceBy employee upload or the Vendor Portal

Vendor submits an invoicein the Vendor Portal

How to submit?

Capture the invoiceFills in the form

Enter the details by hand

Submit?

Vendor emails an invoice

A draft in the Vendor Portal

Employee submits an invoicein Bill Pay

How to submit?

Capture the invoiceFills in the form

Enter the details by hand

Submit?

Employee emails an invoice

Submitted for the Bill Manager's reviewPending review

Bill Manager opens the invoice and enters the payment details

Submit a bill?

Link to a PO?

The system surfaces the matching purchase order

Submit the bill payment for approval

Admin reviews the billFrom Bills or ApprovalsPending approval

Approve?

Employee opens the draft and submits it for review

The invoice is in the systemDraft

Who opens the draft?

Which debit method?

Approved, waiting for the transfer to startApproved

Funds pulled from the customer's account and sent to the vendorPayment initiated

Rippling waits for the customer's wireAwaiting wire

Wire received, payment to the vendor startsPending

Vendor receives the fundsBill payment completePaid

Bill payment completed

Bill payment complete, PO closedClosed PO

Try again?

Invoice or bill rejectedBy the employee, manager or adminRejected

Payment failed in transferA Rippling or bank issuePayment failed

Payment canceledAt any point in the processCanceled

Employee requests a purchase order leads to Enter the purchase order details
Enter the purchase order details — Submit — Sent to an admin for approval
Sent to an admin for approval (Pending approval) — Approve — Request it from the vendor Outside Rippling?
Request it from the vendor Outside Rippling? (Open PO) leads to Receive the vendor's invoice By employee upload or the Vendor Portal
Receive the vendor's invoice By employee upload or the Vendor Portal leads to Vendor submits an invoice in the Vendor Portal
Receive the vendor's invoice By employee upload or the Vendor Portal leads to Employee submits an invoice in Bill Pay
Vendor submits an invoice in the Vendor Portal leads to How to submit?
How to submit? leads to Capture the invoice Fills in the form
How to submit? leads to Enter the details by hand
Capture the invoice Fills in the form leads to Submit?
Enter the details by hand leads to Submit?
Submit? — Yes — Submitted for the Bill Manager's review
Submit? — Save draft — A draft in the Vendor Portal
Vendor emails an invoice leads to A draft in the Vendor Portal
A draft in the Vendor Portal — Submit — Submitted for the Bill Manager's review
Employee submits an invoice in Bill Pay leads to How to submit?
How to submit? leads to Capture the invoice Fills in the form
How to submit? leads to Enter the details by hand
Capture the invoice Fills in the form leads to Submit?
Enter the details by hand leads to Submit?
Submit? — Yes — Submitted for the Bill Manager's review
Submit? — Save draft — The invoice is in the system
Employee emails an invoice leads to The invoice is in the system
The invoice is in the system (Draft) leads to Who opens the draft?
Who opens the draft? — The employee — Employee opens the draft and submits it for review
Who opens the draft? — The Bill Manager — Bill Manager opens the invoice and enters the payment details
Employee opens the draft and submits it for review — Submit — Submitted for the Bill Manager's review
Submitted for the Bill Manager's review (Pending review) leads to Bill Manager opens the invoice and enters the payment details
Bill Manager opens the invoice and enters the payment details leads to Submit a bill?
Submit a bill? — Yes — Link to a PO?
Submit a bill? — Reject — Invoice or bill rejected By the employee, manager or admin
Link to a PO? — No — Submit the bill payment for approval
Link to a PO? — Yes — The system surfaces the matching purchase order
The system surfaces the matching purchase order leads to Which debit method?
Submit the bill payment for approval leads to Admin reviews the bill From Bills or Approvals
Admin reviews the bill From Bills or Approvals (Pending approval) leads to Approve?
Approve? — Approve — Which debit method?
Approve? — Reject — Invoice or bill rejected By the employee, manager or admin
Which debit method? — ACH — Approved, waiting for the transfer to start
Which debit method? — Wire transfer — Rippling waits for the customer's wire
Approved, waiting for the transfer to start (Approved) leads to Funds pulled from the customer's account and sent to the vendor
Rippling waits for the customer's wire (Awaiting wire) leads to Wire received, payment to the vendor starts
Wire received, payment to the vendor starts (Pending) leads to Funds pulled from the customer's account and sent to the vendor
Funds pulled from the customer's account and sent to the vendor (Payment initiated) — Payment success — Vendor receives the funds Bill payment complete
Vendor receives the funds Bill payment complete (Paid) leads to Bill payment completed
Vendor receives the funds Bill payment complete (Paid) leads to Bill payment complete, PO closed
Funds pulled from the customer's account and sent to the vendor (Payment initiated) — Payment failure — Payment failed in transfer A Rippling or bank issue
Approved, waiting for the transfer to start (Approved) — Cancel payment — Payment canceled At any point in the process
Payment failed in transfer A Rippling or bank issue (Payment failed) leads to Try again?
Try again? — Yes — Approved, waiting for the transfer to start
Try again? — No — Payment canceled At any point in the process

FIG. 10Bill Pay’s system map with Purchase Orders threaded through it (the 0.5 lanes), explored and then split into its own productRedrawn for this page from the original working map

FIG. 11Purchase order in the Request menu, and the purchase order form it opens

International vendors

A late, unplanned request added paying vendors abroad. That meant supporting non-US banks, and adding bank accounts through the rails the Global Payroll team had built.

The global transfer path end to end, from the bill form to the final review — FIG. 12The whole path, then up close

FIG. 13The Bill Manager adds a vendor’s bank account mid-flow: a US account for ACH, or an international one for a global transfer

Risk scenarios

Risk and Compliance surfaced scenarios the flow had to handle, and they changed both the design and the flow.

What changed

Those pressures resolved into two structural changes to the flow.

Employees stop submitting bank details

The step was removed from the flow entirely, for security.

A new Bill Manager role

A new permission profile reviews every invoice submitted by employees or through the Vendor Portal, confirming it carries complete, accurate information before anything is paid.

FIG. 15Setting up Bill Pay: the suggested Bill Manager profile and the two Spend permissions it adds, then a default bank account per entity

Fewer people handle payment details, and one accountable reviewer checks every bill: a shorter path, with less risk.

Start a bill payment

Who is submitting?

EmployeeUploads an invoice in Spend Management

VendorUploads and submits an invoice in the Vendor Portal

Bill ManagerUploads an invoice in Spend Management

Enters the invoice date, due date, amount and numberMemo and attachments optional

How does the invoice start?

Invoice capturedThe form fills itself in

Invoice date, due date, amount and numberMemo and attachments optional

Review the information

Bill ManagerOpens the submitted invoice, a Draft bill in the Inbox

Opens the Draft bill and reviews the invoice

Enters the payment detailsEntity, vendor payment details, payment method, bank account, payment date

ApproverA Spend admin opens the approval request

Payment initiatedTiming depends on ACH, wire transfer or check

Vendor is paid for the bill

FIG. 16The revised flow: every invoice, from an employee or a vendor, reaches a Bill Manager before it goes for approvalRedrawn for this page from the original flow

04 MVP delivery

Working, but not yet easy

With the MVP’s cases covered, Engineering built the full functionality, worked through the technical hurdles and put a functional demo in front of internal testers.

FIG. 17The MVP’s scenarios mapped for handoff: employee upload, the Bill Manager’s payment form, and saved and new vendors paid by ACH

Engineering knew exactly what to build and built it with confidence. But months of adjustments had left the experience somewhat compromised.

01 Invoice submittal
EmployeeSubmits in Bill Pay, or emails the invoice in
VendorEmails it, or submits it in the Vendor Portal
Scanned from the invoice, or entered by hand
Asks for
Pay to
Vendor; for a new vendor, address, contact and email
Details
Invoice date, due date, number, amount, categories and the invoice itself; memo and attachments optional
Submit invoice
02 Bill Manager review
Bill ManagerReviews the submitted invoice and bill details
Asks for
Pay to
How the vendor is paid, and the account that receives it
Payment
Entity (if more than one), pay-from account, debit method, payment date
Accounting
GL vendor, accounting period, Rippling work location and department
Submit bill payment
03 Admin approval
Spend adminReviews and decides; once approved, the payment is scheduled
Approve
04 Vendor payment
VendorReceives payment

FIG. 18The MVP as built: four stages, and what each one asks forRedrawn for this page from the original MVP flow

The demo did its job: it let us test the product end to end, paid Rippling’s own internal bills and brought back feedback on the experience.

An employee uploads an invoice for review

The Bill Manager reviews a new invoice from a new vendor — An employee uploads an invoice for review

05 Improving the UX

Reliable, now make it clear

Internal testing pointed at the experience. We started improving the flow and the visual design right away, putting organization and ease of use first.

FIG. 20Reworked flows marked ready for dev: employee upload, Bill Manager review, wire transfer, payment failure and risk scenarios

The process underneath was sound; the work now was to make it read as simple as it was. With the Design Systems team, we updated the visual styles of the main flows.

Main screens in the updated Bill Pay flow: invoice details, the vendor’s payment information, then review and submit

The Bill Manager reviews an invoice and submits it for approval — An employee uploads an invoice

The pass reached the edges of the flow too, like paying by wire transfer, where the company has to send funds to Rippling before a deadline.

FIG. 23Paying by wire transfer: the deadline to wire funds to Rippling, carried through to review

Where it landed: Bill Pay’s information architecture, its tabs and the detail page behind every bill, and the setup a company runs to turn it on.