HydrogenPay Merchant Dashboard

Imagine a merchant has collected ₦1 million. Knowing that number isn't enough. They need to know where it came from and where it's going.

• How much came through InstantPay, POS or Gateway?
• How much of the Gateway volume was card versus bank transfer?
• How much has already settled, and where: my bank or my Wallet?
• How much can I withdraw right now?

The old dashboard tried to answer all of these at once, which meant repeated line items like Settled in Bank (InstantPay) and Settled in Bank (POS). Technically useful, but the repetition added up to noise, and mobile has no room to spare for noise.

That ₦1 million is real activity on Hydrogen Pay's platform, not a number in a report. Merchants needed to check it with confidence in the middle of a workday, not just at a desk at the end of one.

The existing dashboard made All Collections the primary view, with merchants filtering down into individual channels from there. That asked merchants to hold too many dimensions in their head at once: Collection → Payment channel → Payment method → Settlement destination.

The structure reflected how complex Hydrogen's payment infrastructure actually is. It just didn't match how merchants wanted to understand their own money.

Our first move was cutting unnecessary repetition. Instead of Settled in Bank (InstantPay) and Settled in Bank (POS) as separate lines, we grouped them into one: Settled in Bank, with InstantPay and POS underneath. Wallet settlement got the same treatment. Merchants still needed every one of those numbers, so this wasn't about trimming for looks. It just meant they weren't reading the same destination three times to get to them.

This is also where I first explored the bottom navigation: hierarchy, naming and grouping, in both light and dark. Merchants had already flagged navigation as one of the harder parts of the app to move through. In testing, the grouped settlement view read as noticeably cleaner, and the darker navigation was easier to scan.

The second round pushed grouping further: instead of exposing every settlement breakdown at once, we tried cards merchants could open for more detail, moving from Total received to Settlement destination to Payment channel. Show the overall picture first, let merchants dig into detail only when they actually need it.

Merchants preferred the simpler Bank/Wallet grouping over repeating those destinations per channel, and the darker navigation still read as easier to scan. Both carried into the next version.

With the direction validated, we moved into a real build, testing whether merchants could get from the overall balance into the detail they needed without losing the thread. Merchants could immediately see Total Amount Received, Amount Settled in Wallet and Amount Settled in Bank, then choose View Details to see what made up each figure. A ₦100k Wallet settlement, for example, opened to reveal its InstantPay and POS split.

We also added clearer controls: merchants could move between All Collections, InstantPay, Gateway and POS, and filter by date. Each control mapped to a real question merchants had: how much came in, where it came from, where it sits now, and what they could do about it.

We built version 01 and tested it in staging with merchants. It solved the structural problems, but surfaced a new one: there was still too much competing for attention. Branding, filters, totals and supporting information were all fighting for the same visual space. Merchants could find what they needed, but it took too long to decide what mattered, and this is a dashboard people check to make quick calls about their money, not to browse.

So the next iteration pulled back instead of piling on.

We moved secondary controls and merchant branding into a darker container at the top of the screen, splitting what the merchant needs to know from what the merchant can do. The collected amount got easier to spot, and filters stayed within reach without dominating the screen.

That gave the dashboard a hierarchy that actually matches the decision merchants make about their money several times a day:

1. 1Understand: how much have I collected?
2. 2Investigate: where did the money come from?
3. 3Track: where has the money been settled?
4. 4Act: what can I do with the money in my Wallet?

It kept every number. It just put them in the order merchants actually reach for them.

Once the hierarchy and visual language held up, we carried the same look and feel across the rest of the mobile app, so the dashboard felt like part of one product rather than a single redesigned screen. That included Transactions, Hub and Wallet, the disbursement and approval flow, transaction details and receipts, business insights, and the onboarding screens. The same patterns carried over to the Hydrogen Pay web app too, so managing the business felt consistent no matter which device a merchant was on.

60% of merchants now prefer the mobile app over the web dashboard, up from 35% before the redesign

Before the redesign, most merchants defaulted to the web dashboard because it was easier to use for the same job. After it, most switched to mobile instead. That's the reversal we were chasing from day one.

• Adoption is a UX problem too. If merchants are avoiding a workflow, understand why before adding more features.
• Progressive disclosure matters. Give merchants the information they need without making everything visible at once.
• Testing shaped the final design. Early concepts looked structured but still demanded too much attention, which is what led to a simpler hierarchy.