Exporting bank statements made easy, on mobile and on web

Role
Senior Product Designer
Year
2022
Tags
Mobile, Web, Research, UX, UI
Allica's business banking customers had no way to view or export a statement, on the app or on the web. This is the feature that gave them one.
The statements screen on a phone, listing the months available to export
Problem

No way to get hold of a statement

Business banking customers could not view or export statements in the Allica app or on web. A statement is not a nice extra for a business: it is what gets handed to an accountant, a lender or an auditor. There was no way to produce one.

Objective

Statements a customer can actually get out

Design a statements experience that lets business banking customers export:

A single month
The common case, one month at a time.
A custom date range
For the periods that do not line up with calendar months.
As a PDF or a CSV
A document to send on, or data to work with.
On mobile app and on web
The same job, wherever the customer is.
Workflow

How the project ran

Competitor analysis
Wireframing
UI exploration
Design system
Hi-fidelity design
Prototyping
Usability testing
Solution

Statements in the app

Exporting

A single month, or a range you choose

Exporting a single month is the path most customers take, so it is the shortest one. A custom date range sits alongside it for everything else and both produce either a PDF or a CSV.

Single month export
Custom date range export
Exporting a single month and exporting a custom date range.
Screen states

From a brand new account to years of history

A statements screen is only ever as full as the account behind it. A business that opened last week has nothing to export and one that has been running for years has too much to list at once. The screen had to hold both ends of that without feeling like a different screen.

The statements screen with no statements available yetNone available
The statements screen with one month available1 month available
The statements screen with three months available3 months available
The statements screen with six months available6 months available
The statements screen with more than six months available6+ months available
The all statements screen showing the full historyAll statements
The same screen at six points in an account's life, from nothing available to the full history.
Solution

Statements on the web

On web we took a mobile first approach, using modals triggered by buttons and links. When a customer clicks the Statements quick action, a drawer moves in from the right of the screen.

That let the web export follow the same steps, in the same order, as the app. A customer who has done it once on their phone already knows how to do it at their desk.

The statements drawer open on the web app, listing available statementsStatements
The export type modal, offering PDF or CSVExport type modal
The drawer in its loading state while the statement is generatedLoading
The drawer confirming the export is completeExport complete
The drawer, from the statements list through to a completed export.
The same export on web, in the drawer.
Testing

Putting it in front of people

Goals

What we wanted to learn

Validate the design
Task flows, information architecture and the quality of the statements UX.
Find the friction
What participants liked and what they found frustrating or confusing.
Shape what came next
A list of improvements to feed back into the feature.
Benchmarking

Measuring against something

Rather than judging the results by feel, specific measures were set before testing started:

Behavioural
Success and error rate for each task.
Attitudinal
Ease of use and time on task.
Test level subjective
Perceived trust, net promoter score and appearance.

Each was given a pass mark and an excellent score, benchmarked against design industry standards, so the result could be read against something rather than argued about.

Usability metricPass markExcellent score
Single ease question (SEQ)5/76/7
System usability scale68/10080.3/100
Task completion rate78%92%
Hesitations and deviations4-5 (acceptable)6-7 (success)
Results

Two tasks, both cleared

Two key tasks were tested, both framed around sending a statement to someone who had asked for it.

Task one, exporting and sharing a statement. Kelly Richards has asked you to email her a bank statement from March 2021. Send Kelly the statement she needs. This tested whether customers could find a statement for a month in the past and email it on.

Task two, exporting and sharing a custom statement. Kelly has also asked for a statement covering 9 February 2022 to 23 February 2022. This tested the flexible path, where the period does not match a calendar month.

100%
Completion rate, both tasks
Every participant finished both tasks.
0%
Error rate, both tasks
No errors were recorded on either.
7/7
Ease of use, task one
Falling only slightly to 6.8 out of 7 on the custom range task.

Both tasks scored 7 out of 7 for time on task. Participants found them very easy to complete and described the experience as simple, intuitive and quick.

Detail

Designing the statement itself

The screens are only half of it. The document a customer sends to their accountant is the actual output of this feature. It had to be right.

Working with the product manager and the engineers, we defined what a statement would show. The compliance team was involved throughout to make sure the regulatory requirements were met, which meant I could then propose designs that were both technically feasible and compliant rather than finding out later that they were neither.

The first page of an Allica bank statement, with account details and the opening entriesBank statement, page 1
A continuation page of an Allica bank statementBank statement, page 2 and beyond
An Allica deposit account statementDeposit statement
The statement document itself: the first page, subsequent pages and the deposit statement.
Outcome

A statement, in two formats, on both platforms

Business banking customers can export statements as PDFs and CSVs, for a single month or a date range they choose, in the Allica mobile app and on web.

Testimonials

Khayam was a great asset to the Allica Bank Payments squad. Working on an array of new product features, and contributing to the new, overall design system, khayam had a solid understanding of UX / UI design, and was willing to openly work alongside engineering to come to conclusions quickly but effectively. I’d happily recommend Khayam to any engineering team going forward.

Andrew McCulloughLead Engineer, Allica Bank