Teampay | fintech

Paying Complex Bills for Accountants

How collaborative research + design reduced scope while driving increased adoption and sales

Simple bills limited accountants' flexibility

Teampay had expanded into the accounts payable space, making it easy to pay any bill within the platform.

The first iteration of our Bill Pay experience focus on “simple bills” with basic categorization & coding.

However, some companies have more complex bills where a single bill could be for multiple types of purchases or items (i.e. a laptop purchase split between the Sales and Support departments).

Highest Impact Business Problems

Lowered win-rate

Sales team was losing on deals since larger customers wouldn’t consider an AP product without multi-line & complex bills

Lowered win-rate

Sales team was losing on deals since larger customers wouldn’t consider an AP product without multi-line & complex bills

Lowered win-rate

Sales team was losing on deals since larger customers wouldn’t consider an AP product without multi-line & complex bills

Low AP adoption

Adoption of our AP product was low as existing customers didn’t feel confident switching to Teampay for AP without more flexibility in bills

Low AP adoption

Adoption of our AP product was low as existing customers didn’t feel confident switching to Teampay for AP without more flexibility in bills

Low AP adoption

Adoption of our AP product was low as existing customers didn’t feel confident switching to Teampay for AP without more flexibility in bills

Conflict with Product Vision

Teampay gives finance teams visibility into how they’re spending, but current UX simplicity hinders this transparency

Conflict with Product Vision

Teampay gives finance teams visibility into how they’re spending, but current UX simplicity hinders this transparency

Conflict with Product Vision

Teampay gives finance teams visibility into how they’re spending, but current UX simplicity hinders this transparency

Learning how our customers think about their bills

Teampay’s biggest value prop was the automated approval/rules engine, but complex bills could lead to more complex approval processes (i.e. both Sales and Support needing to approve a bill before it could be paid).

We needed to understand user behaviors and expectations for bill approvals as the legacy rules engine was not designed to handle that level of complexity.

I lead a series of user interviews (in collab with Product & Engineering). We mapped out an Opportunity-Solution Tree as a way to understand the relationship between expectations and prioritize opportunities against them.

Key Insight

Key Insight

Accurate line item coding enables teams to feel confident in how they’re spending, but doesn't impact the approval process for a bill.

Accurate line item coding enables teams to feel confident in how they’re spending, but doesn't impact the approval process for a bill.

Understanding the cross-platform experience

On the surface, adding line items to bills seemed simple, but after an technical architecture deep dive we realized how so much of the entire bills experience was built based on simple bills only. This meant multiple product teams needed to be involved to deliver value efficiently.

In order to ensure a cohesive experience, I led these multiple product teams in mapping out the entire experience vision and flow across the platform so we all were working towards the same end goal, together.

The Designs

Consolidated Bills UX

Read & Write Side Panel

Maintaining side panel with invoice document allows users to see all necessary information to create a complex bill in one place.

Collapsable Line Items

Line item details entered one at a time, but with ability to collapse (and duplicate) to focus user attention and not overwhelm with information.

Read-Only Parity

Bill approvals have a read-only display with similar structure as edit-view to maintain consistency.

Balancing Action with Content

Button-drawer

Primary actions (approve, create, reject, etc.) all grouped in button drawer that is consistent at all stages of the bill lifecycle, helping users know exactly where they need to for any action.

Color as call-out

Using secondary but prominent colors to highlight actions or helper information (like the new recommended PO area) keeps a users focus on the bill side panel while drawing attention where needed.

Cross-Platform Experience

Contextual UX

While admins use the web application, Teampay’s primary user interaction for employees is Slack. A multi-line PO or Bill view in Slack was very important, but the channel required a different hierarchy and interaction with the bill content.

Focus was on readability and glanceability, allowing users to understand and act on the bill content in a messaging format.

Contextual UX

Results: More deals, more adoption

AP adoption increased
Including complex bills led to 2x customers utilizing AP, with the consolidated bill experience making it a seamless transition from simple bills to complex bills for existing AP customers.

More deals closed
The addition of multi-line bills enabled Teampay to compete directly against bigger AP competitors, leading to a broader prospect audience and more closed deals.

Easier updates for bills
The consolidated bill experience has made it easier to iterate on the bills experience, as now updates are made to one unified flow as opposed to two flows.