ZIVA
Details and data below have been genericized to respect confidentiality.
Making transaction data easier to digest for thousands of merchants through a visual summary
Merchants had to read a dense table to see how much money they’d lost. I redesigned the transaction summary in Ziva’s merchant portal so they see it at a glance, with the detail one click away. Following launch, adoption of the new page increased while traffic to the legacy pages declined.
What I decided
To replace the table with tiles and an overlay, lead with amount, chart only two breakdowns, and cut the region view.
What I designed
The explorations, the status tiles, both charts, the status overlay, and the empty and loading states, all in Photoshop.
How I validated it
Interviews with client services alongside the PM, mockup reviews that won over the developers, and pilot feedback from three merchants.
What I handed off
Annotated specs for the four developers, who mapped every number in the table into the tiles and overlay.
ROLE
Sole product designer
SCOPE
Transaction summary page, status tiles, charts, detail overlay
PLATFORM
Web, merchant portal Reporting app (desktop)
TEAM
1 PM, 4 developers
TIMELINE
2021, live in August
THE PROBLEM
Lost revenue buried in dense tables
Lost money sat in the same plain rows as everything else. Merchants had to read every cell to find it.
Every rejected, failed or errored transaction is money a merchant didn’t make. To see how much, and start working out why, merchants had to read the transaction summary row by row: eight statuses, each with a count, an amount and a 3DS protocol split. 3D Secure (3DS) is the protocol that authenticates cardholders in online card payments.
The whole portal worked this way, with rich data shown almost entirely in dense tables. Clients and the internal team who supported the portal shared that exact sentiment: the data was valuable, but there was too much to take in.
WHY IT MATTERED TO ZIVA
The legacy application was outdated, with known usability issues, and merchants leaned on client services to get answers from their own data. Ziva wanted merchants to be more self-sufficient, and to move off the legacy application onto the redesigned portal.
WHAT MERCHANTS NEEDED TO SEE
How their transactions did over a date range they chose.
How much money they lost to rejected, failed or errored transactions, so they could investigate why: an issuing bank’s rules, or something technical.
Which currencies, card brands and 3DS protocol versions made up their volume.
Merchants
Business owners, business managers and risk managers, at thousands of merchants of every size.
Client services
Answered merchants’ reporting questions every day, so merchants depended on them.
THE GOAL
THE PROCESS
The central decision: add charts to the table, or replace it?
Adding charts under the familiar table was the safer move, and I explored it first. But it kept the overload merchants and our own teams had complained about.
WHAT DROVE THE DECISIONS
Shared observation
Clients, the internal team and I all agreed the information was overwhelming.
Client services
Told us which metrics mattered most to merchants: top currencies, card brands and 3DS protocol versions.
My hypothesis
Region-based metrics alongside currency would help. I tested it in the explored option. Currency made it onto the page, region didn’t.
Pilot merchants
Confirmed the direction before launch, in feedback sessions the PM ran.
THE LEGACY PAGE · BEFORE
Everything, equally loud
Eight rows with the same layout. Nothing stood out, so the important numbers were as hard to find as the rest.
OPTIMIZED FOR
Completeness: every number on one screen.
WHAT IT COST
Merchants read every cell to answer “how are we doing?”
TABLE PLUS CHARTS · CUT
More to read, not easier
I kept the table and added a region and currency view below it. The overload stayed, and the visuals sat out of view on load.
OPTIMIZED FOR
Minimal disruption: keep the familiar table and add visuals.
WHY I CUT IT
It added more to read without making anything easier to read.
TILES AND CHARTS · CHOSEN
Scan first, then dig in
Each status became a tile, and the breakdowns merchants asked about became charts. The full detail moved into an overlay behind each tile.
OPTIMIZED FOR
Scanning: money made and lost in seconds, detail on demand.
WHAT CHANGED
Eight rows became tiles, two breakdowns became charts, and nothing from the table was lost.
Low-fidelity wireframes of the legacy page and the two directions. Each one answers the same question: what should a merchant see first?
Why replace the table
Tiles keep every status and its total visible at once, so a merchant scans instead of reads, and spots lost money without help. No data was removed. Selecting a tile opens its full detail in an overlay.
THE TRADE-OFF
Moving the detail off the page means a merchant needs one extra click to see a status’s full breakdown. I accepted this because most visits start with “how are we doing?”, not with one status, and the overlay still holds every detail the table had.
Bringing the developers on board
The PM backed replacing the table, as long as it was feasible. The developers were skeptical at first. The table already worked, and they didn’t want to disrupt too much. I made the case that the change would be a big benefit to merchants, and walked them through the mockups.
They liked what they saw and came around. Then they researched how to carry everything the table held into the tiles and the overlay, so no information was lost. In the end, they loved the result.
Constraints, and what I did with them
CONSTRAINT
MY CHOICE
Users ranged from small-shop owners to risk managers at global retailers.
Lead with money made and lost, which every role checks first, and leave deeper analysis to the overlay.
Every number in the table had to survive the redesign.
Each number moved to a tile, a chart or a status overlay. The developers mapped the table’s data so nothing was lost.
We couldn’t chart everything without recreating the overload.
Only the two breakdowns client services said merchants asked about most made it onto the page.
THE SOLUTION
A summary that answers three questions in order
How are my transactions doing? What are they made of? What is behind this number?
Screens from the shipped page are in the full case study, which I’m happy to share on request.
THE PAGE
Tiles first, two charts below
STATUS TILES
How are my transactions doing?
All eight statuses at once. Total, authenticated, attempted, error, rejected, failed, incomplete and other.
Amount first, on purpose. Merchants need to know how much money was made or lost before anything else. It’s how they monitor the health of their business.
Empty state. A clear state for date ranges with no transactions. I also designed a loading state, which I don’t believe shipped.
TWO CHARTS
What are they made of?
Card brand and protocol. Which card brands and 3DS versions make up the volume.
Top currencies. Where the money comes from, for merchants selling across borders.
STATUS OVERLAY
What is behind this number?
The status in full. Amount, count and protocol split for the status the merchant picked.
By card brand, by version. A breakdown for each 3DS protocol version, with a filter for the version.
Close and keep going. The page stays where it was, so checking several statuses is quick.
STATUS OVERLAY
Selecting a tile opens its full breakdown
OUTCOME
What it led to
Positive pilot feedback. Before launch, the PM ran feedback sessions with three large merchants in a pilot. They had a positive experience overall, and said they spent less time on the page because they could get what they needed quickly. The team always piloted with a few merchants before releasing to all clients.
Live in August 2021. The new summary shipped as one piece of a wider merchant portal redesign.
An increase in visits to the new page. Google Analytics showed an increase in daily and monthly visits to the summary after launch.
A decrease in visits to the legacy pages. At the same time, visits to the legacy portal pages decreased. That was the shift Ziva needed: merchants moving off the outdated application.
I no longer have the exact numbers. This is how I’d measure it today:
Adoption
Daily and monthly visits to the summary, compared with the legacy pages it replaced.
Engagement
The share of visits that open a status overlay, and which statuses get opened most.
Ease of use
How quickly a merchant can find how much money they lost this month, compared with the old table.
Support load
Reporting questions sent to client services, the clearest sign of merchant self-sufficiency.
REVISIT
The chart I’d change
Top currencies shipped as an area chart. A filled line running from one currency to the next suggests a trend between them that isn’t there, since currencies are separate categories, not points in time. Today I’d use sorted bars, which compare them honestly and put the biggest first. The same goes for the card brand donut: a short bar list is easier to compare.
Sorted bars answer the questions merchants actually bring to this chart: Which currency brings in the most money? How do the others rank against it? And how big is the gap, so a merchant knows which markets matter most and where a drop would hurt?
SHIPPED
Area chart
Reads like a trend across currencies.
TODAY
Sorted bars
Shows which currency leads, how the rest rank, and the size of each gap.
RETROSPECTIVE
What I’d test next
Give the tiles a hierarchy
All eight tiles have the same weight, the same problem the table had. I’d make Total the primary number and make error, failed and incomplete stand out when they’re high.
Try a side panel
The overlay covers the page. A side panel would let a merchant compare a status with the charts at the same time.
Rates and trends on the tiles
An error rate tells a merchant more than an error count, and an up or down marker shows whether things are getting better or worse.
Be in the room with merchants
The PM ran the pilot calls. Next time I’d join them, and watch merchants of different sizes answer real questions with the page.
FULL CASE STUDY
Want the full story?
The detailed case study covers the screens, flows and design rationale in more depth. I’m happy to share it, or to walk you through it on a call.
NEXT PROJECT
Passkey authentication →
Checkout · Mobile web