HydrogenPay Invoice

Company
Hydrogen
Role
Product Designer
Duration
May 2022 — Sept 2024
My contribution
Research · Product definition · UX · Interaction design · Prototyping · Product/engineering collaboration

Designing an invoicing experience for businesses that needed a simpler way to get paid.

Overview

Merchants on HydrogenPay were sending invoices through WhatsApp messages, screenshots of account numbers, and PDFs built in Word. Anything but the platform they already used to move money.

I designed the invoice experience from the ground up, turning a fragmented manual process into a structured workflow inside HydrogenPay. I defined the information architecture and interaction model across invoice details, payment terms, customers, products, review and sending, while making frequently used information reusable instead of forcing merchants to re-enter it every time.

The result brought invoicing into the same product environment merchants were already using to manage payments.

How invoicing moved into HydrogenPay
AreaBeforeWith HydrogenPay invoicing
Sending an invoiceWhatsApp messages, screenshots of account numbers and PDFs built in WordA three-step flow inside HydrogenPay with a live preview
Customer and product detailsRe-typed on every invoiceReusable customers, products and templates
RecipientsEnterprises needed one invoice to reach a whole AP teamMultiple recipients on a single invoice
Getting paidBilling and payment collection happened separatelyA shareable payment link and branded pay page; 2x faster invoice-to-payment cycle

Billing and payment collection were happening separately

Merchants on HydrogenPay were sending invoices through WhatsApp messages, screenshots of account numbers, and PDFs built in Word. Anything but the platform they already used to move money.

The pattern showed up in three places at once: a recurring line in merchant support tickets asking how to send an invoice from inside the dashboard, a repeated request in the sales team's feature log, and a set of interviews that kept saying the same thing.

Merchants weren't missing an invoicing tool. They had one, they just weren't using ours. Billing was happening in a separate workflow from payment collection, and every invoice sent outside HydrogenPay was a payment we never touched.

We spoke to 15 businesses

I interviewed 15 businesses: five enterprises, five SMEs and five freelancers, expecting requests for more invoice fields. Instead, the friction sat upstream of the invoice itself, and the market split the same way every competitor did: powerful but generic, or local but basic.

  • Too complex. 80% called existing tools overkill for a two-minute task.
  • More than one inbox. Enterprises needed a single invoice to reach a whole AP team.
  • Nothing carried over. Payment terms and notes got re-typed on every invoice.
  • Wanted on mobile. 30% asked, since invoicing happened between meetings.
  • Needed reminders. Chasing overdue invoices manually had become its own job.

The challenge was building one flow that could carry a freelancer's two-minute invoice and an enterprise's AP-facing workflow, without making the basic task feel like enterprise software.

Competitive landscape

Not another invoice form

Nobody had built something simple, scalable and local at once. That changed the brief.

We'd seen the same trade-off everywhere we looked: powerful but complex, or simple but limited. So we kept the core flow short enough for a two-minute invoice, and let the advanced functionality show up only when a larger business reached for it, invisible the rest of the time.

Three steps, nothing typed twice

Invoice creation became three steps, each one showing merchants only what mattered at that stage:

  1. 1Invoice details: pick a customer, add line items, watch the total build in a live preview.
  2. 2Payment details: set the due date and terms, or turn on recurring billing.
  3. 3Review & send: address multiple recipients, then send, save as a draft, or fire off a test copy first.

Customers, products and templates became reusable data instead of fields retyped from scratch every time. The invoice should remember what the business already knows.

User flow: dashboard to send

The dashboard starts empty, then gets to work

First run is a blank dashboard with one clear action, not an empty grid merchants have to figure out on their own. Once invoicing is live, the same table shifts toward management: quick actions, download, recall, sitting right in the row, because opening every invoice just to manage it added up fast.

Dashboard: empty state

Creating an invoice without losing context

Step one asks only for what's needed to build the line items: a customer, then a set of products or services. Pick a customer and the invoice starts assembling itself in a live preview alongside the form, so merchants watch the actual document take shape instead of trusting a form to translate correctly.

Invoice details: before a customer is picked
Invoice details: picking a customer

Reusable data made the flow faster

This is the direct answer to the re-typing problem. A returning customer or a repeat service is a search away, not a re-type. Creating a new one doesn't interrupt the invoice either. It opens inline and drops the merchant straight back into the flow.

Creating a new customer and a new product, inline

Advanced options stayed out of the way

Tax and discount apply right on the invoice details step, updating the live preview as merchants type. Step two sets the due date and payment terms. Recurring billing stays hidden until a merchant actually needs it: flip it on, and the form expands to frequency and an end condition, instead of showing every subscription option to a freelancer sending a one-off invoice.

Line items with tax and discount applied
Payment details: one-time
Payment details: recurring on

Enterprise requirements without enterprise complexity

This is where the enterprise finding lived directly: a single invoice needed to reach more than one inbox. Review and send lets a merchant address multiple recipients on one invoice, then choose to send, save as a draft, or fire off a test copy to themselves first.

Review & send: multiple recipients

The invoice becomes a payment entry point

A merchant gets a clear confirmation with a shareable payment link they can drop anywhere, not just an emailed PDF. Their customer lands on a branded page built to get paid, not to explain itself.

Billing created the context. HydrogenPay handled the payment.

Invoice sent
Customer pay page

The same mental model, adapted for mobile

Given how much of this happens between meetings, mobile wasn't a cut-down version of the desktop flow. It's the same three steps and the same reusable customer and product data, redesigned around a thumb instead of a cursor, down to the same optimized invoice list.

Invoice list, adding an item, and line items filled in: mobile

From billing workflow to payment channel

40% faster invoice creation than the workarounds it replaced

30% fewer invoice errors, from auto-fill and validation

42% of merchants adopted the new flow within four months

7,000+ invoices sent through the tool

₦820M+ in transaction volume processed

2x faster invoice-to-payment cycle than manual invoicing

What started as a pattern in support tickets became one of the more heavily used surfaces in the product, and another way merchants now route payments through HydrogenPay instead of around it.

  • Watch for hesitation, not just errors. Every real improvement here came from noticing where a "finished" flow still made someone pause or forget a step, not from a second round of research.
  • Reusable data beats a longer form. The customer and product memory did more for adoption than any field we added.
  • Enterprise and freelancer needs aren't opposites. Multiple recipients and a two-minute mobile flow shipped from the same three steps, because we kept the core short and let the complexity stay optional.