A redesigned transactions page with an improved UI to show the user their data.
Brief
> Diagnose current online banking experience.
> Analyse any pain points that are found.
> Deliver mockups for an improved experience.
Role
> Sketched current user flow.
> Researched user pain points.
> Developed vastly improved user flow and UI to immediately serve the users' needs.
Outcome
> Delivered animated mockup to illustrate new interaction.
> User testing showed redesign was much needed.
> A smoother, quicker and clearer experience for the online banking user.
Project Note: This was not paid work, but an idea I've used to demonstrate my UXD process and skills.
Illustrating the pain point
The biggest pain point for the user was the ease of missing vital banking data.
Recent Transactions shows a few days' banking activity, but there could be many more days not being shown that are also not yet in a statement.
Working out what data was missing, and how to get it shown, was confusing and frustrating.
Once the main pain point was understood, it was quick to sketch the user needs.
There is one central user need: see the data.
A rather opaque interaction request for serving user need.
Bad heuristics not meeting user need
The user is supposed to use the date controls (highlighted above) to reveal more data but there is no well designed call to action or system feedback that using these controls will in fact show more data, meaning the user often ends up going through a painful journey...
It takes 13 pages for the user to see their data.
Bad User Flow
Many design and user flow issues, including irksome security software download prompts, means the user struggles through umpteen pages with heavy cognitive and memory load before seeing the transactions they were after.
After some quick sketching it was clear there were simple ways to make huge improvements...
Simplifying and improving the user flow.
Sketching ideas for choosing the online account, then bank account, then account number to display.
With the steps to seeing the data now greatly reduced, attention turns to filtering the data.
Even the current input for field for changing dates has severe problems.
The current input for changing dates to see different transactions.
Why blank text boxes to enter a date? What about a calendar?
Why not prefill the earliest date for the user instead of just listing it?
Why is there no immediate feedback for error prevention if the user enters incorrect values?
I enter words instead of numbers, with no indication I'm about to submit incorrect data.
Even the quick sketch above gave me an idea for how to solve the main pain point
First the user flow is improved by immediately taking them to a page listing their transactions.
Securty software prompts are moved to a constant notification at the top, and they winnow their online account choices, then their bank account choices, to reveal the transactions in the same page.
Less effort navigating, and more immediate answers.
A range selector is then shown above the transactions, with simple instructions. It invites interaction, and shows feedback of what that interaction would reveal.
A much more intuitive experience for the user where they are immediately shown the answers they're looking for. Data and information feedback, not questions and confusion.
A quick mockup in After Effects shows how the interaction would work:
My demonstration of a new UI to show the user their data.
Users responded to this redesign extremely positively, calling it intuitive and something they had been needing for a long time.
Want to see more?
Go back to my redesign of pitchup.com and see how I transformed a busy overloaded homepage experience in to a 'usable billboard'.
Use the menu to explore more, or feel free to get in touch: