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).
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.
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
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.