Back to work

Fixing NetBank’s search and transaction record

A snapshot of my work on the account page, the second most visited page in NetBank. I found out why search “didn’t work”, redesigned it, and changed the transaction record into a modal. For my main Commonwealth Bank story, see the NetBank homepage redesign.

Company: Commonwealth Bank
Role: Senior Experience Designer
Timeline: 2019
Platforms and tools: Web, responsive to mobile. Sketch, Confluence

The redesigned search: a keyword field with Date, Amount and Type filters and a two-month calendar picker with a note that only the last two years can be searched. — The redesigned search, one part of the account page I owned.

A cloud migration with an experience problem underneath

The account page ran on legacy technology that had to move to the cloud, and it wasn’t responsive, even though about 30% of NetBank logins came from mobile. Customer feedback went beyond the technology: search was broken and transaction records were hard to navigate.

I led the design with other designers across the product teams, a visual designer, researchers and the scrum team. I ran my first design sprint, cut from five days to two, to align everyone. In hindsight the scope was too broad, because covering every account type at once buried us in edge cases. I’d now narrow it to two or three journeys.

I found out why “search doesn’t work”

I didn’t assume the feedback meant a usability problem. I tested search myself with a test account and found it only searched the 40 transactions visible on the page, not the full history. Search for something from last month and you got no results.

I then went through four rounds of sketching and usability testing. The design decisions:

Use the latest design system components, for consistency.
Add a responsive calendar picker, based on Google Material Design patterns.
Rewrite the “no results” state with better content and guidance.
Say clearly that pending transactions aren’t included in results.
Link to statements for transactions older than two years.

The old advanced search: a dark panel with a keyword field, time period and date toggles, an amount range, and a small date picker. — Search before. Select to enlarge.

The new no-results state: 0 transactions found, a note that pending transactions are not included, suggestions to widen the search, and a link to statements for transactions older than two years. — The new no-results state. Select to enlarge.

A modal for the transaction record

I changed the transaction record from an accordion to a modal. It gave people a more focused look at a transaction’s details, fewer distractions from the list behind, and faster scanning, which testing confirmed. It also matched the CommBank mobile app. To make sure the patterns would hold, I documented the variations across test accounts for the product range and stress-tested them in low-fidelity wireframes, so they would work for about 80% of product types.

The old transaction record: a yellow expanded row showing a transfer, with time, destination account and amount. — Transaction record, before. Select to enlarge.

The new transaction record as a modal over the dimmed list, showing to, from, date, description and receipt number, with a print button. — Transaction record, after. Select to enlarge.

What I can claim

I left Commonwealth Bank for Invoice2go before the full rollout, so I never saw final metrics, and I won’t pretend to. I also no longer had the design files, so the live page includes other people’s work, such as the summary panel, which went through further revisions with the wider team. That’s why I’ve shown only the search and transaction record, which I owned. Testing showed search that worked across the full history, a modal that was quicker to scan, and patterns that held across devices and most product types.

What I learned: when customers say something is broken, check before assuming. “Search doesn’t work” turned out to be a real technical limit, and finding it made the design clearer.