WorkRippling · Finance Cloud · Spend Management

Bill Pay

In the last half of 2022, I contributed to the introduction of Spend Management, Rippling’s newest addition to the Rippling Finance Cloud's product suite. This product empowers users to efficiently oversee and regulate all corporate expenses through a unified platform. During my first six months at Rippling, I played a pivotal role in facilitating the successful launch of Spend Management, collaborating with a lead designer and an Engineering-led product team to design the remaining flows of the Minimum Viable Product (MVP). While the initial launch focused on Corporate Cards and Expense Management, Bill Pay would be a post-launch addition to the product. Subsequent to the initial launch, I assumed the responsibility of crafting a comprehensive end-to-end flow for Bill Pay.In September of 2023, Rippling Spend Management reached $10m in ARR during it’s first year, contributing to Rippling’s rapid growth.

Discipline
Product design · Web app
Company
Rippling
Product area
Finance Cloud · Spend Management
Spend Overview.png
Spend Overview.png

Overview

Overview

Bill Pay was introduced in March 2024 as part of Rippling’s Finance Cloud - Spend Management lineup

Bill payment process in Rippling Spend Management

FIG. 01Spend Accounting.png

1. Requirement definition

1. Requirement definition

The initial idea was to maintain the Bill Pay flow in a manner similar to requesting a corporate card or reimbursement within Spend Management. These flows have established design patterns, which we aim to follow at Rippling. This is one of the toughest challenges we face in our platform, as we have to ensure that the necessary features of a reliable Bill Pay software align with the consistent patterns across Spend features. It calls for strategic thinking and systems-based approach.

Adhering to a tight deadline, I conducted quick competitive research and assessed our current Spend Management features. I then created initial drafts of the Bill Pay flow, setting the Minimum Viable Product (MVP) requirements. I focused on essential features, ensuring a successful solution, and maintaining a flow similar to card requests or expense reimbursements.

Initial Bill Pay user flow

The initial prototype, presented to the Product team, followed a straightforward flow. Yet, it sparked a ongoing conversation within our cross-functional team in regard to requirements and user needs. This established an iterative process that demanded adaptability to evolving requirements and unforeseen technical challenges.

Bill Pay prototype, first draft.

Considering the industry standards, I integrated a first version of the Rippling Vendor Portal into the initial draft. This feature allows vendors to create profiles, submit invoices directly to customers, and keep track of their submissions, aligning with other competitors in this space.

Initial Vendor Portal user flow

The initial version of the Rippling Vendor Portal for Bill Pay sparked discussions about its long-term potential. While the original design didn't need extensive changes throughout the project lifecycle, I iterated on several aspects due to evolving Bill Pay MVP use cases. This design laid the foundation for the upcoming launch of a comprehensive Contractors App within Rippling in 2024. This expansion not only facilitates product cross-sell but also broadens our client base targets.

Onboarding to Rippling Vendor Portal - Prototype

MVP of the Rippling Vendor Portal - (Launched).

FIG. 02Bill Pay archival image 7

2. Adapting to evolving needs

2. Adapting to evolving needs

Over the next few months, I continued refining and enhancing the flows in response to various emerging requirements. This entailed collaborating closely with the engineering team, as we collectively tackled the challenges posed by unforeseen technical limitations. Our shared determination led us to think outside the box and devise ingenious solutions that addressed an even wider range of use cases.

We found that the Accounts Payable team at Rippling needed an amortizations feature while we were testing different flows and prototypes. So, we decided to include a minimum viable version of this feature in the initial launch.

During the project, we considered making a procurement feature for Rippling that is connected to Bill Pay. We briefly discussed combining Purchase Orders with Bill Pay, but eventually decided to develop it as a separate product.

Although originally not planned, a late request allowed pushed us to include the ability for clients to pay bills to international vendors using our product. This addition also required us to expand our support for non-US banks, and added a limitation for our team to utilize different rails created by the Global Payroll team to add a bank account.

We had to consider including various risk scenarios surfaced by our Risk and Compliance Teams, which resulted in significant changes to the design and flow.

To provide greater clarity, the following changes were made in the flow process:1. Removal of employee bank information submission: Employees are no longer required to submit their bank information. This step has been eliminated from the process to enhance security measures.2. Creation of "Bill Manager" permission profile: A new permission profile called "Bill Manager" has been introduced within the Rippling platform. This role is responsible for overseeing the invoice review process.

Under the "Bill Manager" profile, the designated individual will review all invoices submitted by employees or vendors through the vendor portal. Their primary objective is to ensure that all necessary and accurate information is included in the invoices, guaranteeing a secure payment. By implementing these changes, the process has been streamlined, reducing potential risks and ensuring a more efficient and secure payment system.

FIG. 03Screenshot 2023-11-09 at 11.41.21 PM.png

3. MVP Delivery

3. MVP Delivery

After addressing all desired use cases for a Minimum Viable Product (MVP), our engineering team developed the app's complete functionality. We focused on intended use cases before handing over the project. Once functionality was developed, we prioritized overcoming technical hurdles and presented a functional demo for internal testing.

The engineering team had a clear understanding of the tasks at hand, enabling them to tackle the project with confidence and precision from an engineering perspective. However, due to the continuous adjustments and adaptations required throughout the process, the user experience was somewhat compromised.

The team successfully developed a functional demo, enabling us to test the product's functionality. Additionally, the demo helped us cover internal bills and gather valuable user feedback on the overall user experience.

Flow demonstrating how an employee submits an invoice for manager review

Flow demonstrating Bill Manager review of a new invoice with a new vendor

FIG. 04Bill Pay archival image 21

4. Improving the UX

4. Improving the UX

We tested the product internally and gathered feedback on the user experience. We quickly started making improvements to the flow and visual design, prioritizing organization and user-friendliness.

Our old process was reliable, now we just need to make the product look easy to understand. This requires working closely with the Design Systems team to update the visual styles of our main flows.

Main screens in the updated Bill Pay Flow

Improved UX - Employee uploading an invoice

Improved UX - Bill Manager reviewing an invoice and submitting for approval

Current IA and Bill Detail pages

Motion studies

Motion studies

Vendor Emailed Flow.mp4
Motion preview · video delivery pending
Motion preview
5) EE - Scan invoice - New Vendor.mov
Motion preview · video delivery pending
Motion preview
6) Bill Manager review - New Vendor.mov
Motion preview · video delivery pending
Motion delivery pending
6) Bill Manager review - New Vendor.mov
Motion preview · video delivery pending
Motion preview
1) EE uploads invoice.mov
Motion preview · video delivery pending
Motion delivery pending
2) Vendor submits invoice.mov
Motion preview · video delivery pending
Motion preview
Vendor Portal onboarding.mov
Motion preview · video delivery pending
Motion preview
Bill Pay Tabs & Object Pages.mov
Motion preview · video delivery pending
Motion preview
Bill Pay - Bill Manager Review - Previous Payment.mov
Motion preview · video delivery pending
Motion preview
EE Bill Submission Flow.mov
Motion preview · video delivery pending
Motion preview
FIG. 05Vendor Emailed Flow.mp4