Making everyday banking feel premium
Context
The app looked outdated and overloaded. Screens were inconsistent with each other, and touch targets were as small as 24 pt. The brand color was in the wrong place: it marked icons that did nothing, while primary and secondary actions went without it.
The biggest gap was access to accounts. Customers usually hold several accounts in the same currency, but the app showed only one at a time. To get the number of any other account, they had to make several extra taps just to reach its details.
The client’s main request, though, was a modern, premium look that would help the bank pull ahead of its competitors. Liquid Glass was required as the mark of that premium feel, and the brand color had to stay exactly as it was. We had four days to set the direction and no user research to work from.
Context
The app looked outdated and overloaded. Screens were inconsistent with each other, and touch targets were as small as 24 pt. The brand color was in the wrong place: it marked icons that did nothing, while primary and secondary actions went without it.
The biggest gap was access to accounts. Customers usually hold several accounts in the same currency, but the app showed only one at a time. To get the number of any other account, they had to make several extra taps just to reach its details.
The client’s main request, though, was a modern, premium look that would help the bank pull ahead of its competitors. Liquid Glass was required as the mark of that premium feel, and the brand color had to stay exactly as it was. We had four days to set the direction and no user research to work from.
Context
The app looked outdated and overloaded. Screens were inconsistent with each other, and touch targets were as small as 24 pt. The brand color was in the wrong place: it marked icons that did nothing, while primary and secondary actions went without it.
The biggest gap was access to accounts. Customers usually hold several accounts in the same currency, but the app showed only one at a time. To get the number of any other account, they had to make several extra taps just to reach its details.
The client’s main request, though, was a modern, premium look that would help the bank pull ahead of its competitors. Liquid Glass was required as the mark of that premium feel, and the brand color had to stay exactly as it was. We had four days to set the direction and no user research to work from.
What I did
Set the visual direction. The client chose my concept, made in four days.
Built the design system. 277 tokens, 41 components, light and dark themes. Then I connected every screen in the file to it.
Designed five of fifteen product areas. Home, Accounts, Transactions, Self-service, and Notifications.
What I did
Set the visual direction. The client chose my concept, made in four days.
Built the design system. 277 tokens, 41 components, light and dark themes. Then I connected every screen in the file to it.
Designed five of fifteen product areas. Home, Accounts, Transactions, Self-service, and Notifications.
What I did
Set the visual direction. The client chose my concept, made in four days.
Built the design system. 277 tokens, 41 components, light and dark themes. Then I connected every screen in the file to it.
Designed five of fifteen product areas. Home, Accounts, Transactions, Self-service, and Notifications.
Every account is one swipe away
After a few rounds of concepts, I landed on split spaces. The balance and the accounts became one space at the top of Home. A swipe down opens it into every account in the selected currency, and the quick actions stay within reach the whole time.
The reason was how people here move money. Customers hold many accounts, and they most often send money to each other by account number. Now that number can be copied straight from Home.
Gave up: a familiar pattern. The mechanic went to development untested, and when open, it covers transactions and promotions.
Every account is one swipe away
After a few rounds of concepts, I landed on split spaces. The balance and the accounts became one space at the top of Home. A swipe down opens it into every account in the selected currency, and the quick actions stay within reach the whole time.
The reason was how people here move money. Customers hold many accounts, and they most often send money to each other by account number. Now that number can be copied straight from Home.
Gave up: a familiar pattern. The mechanic went to development untested, and when open, it covers transactions and promotions.
Every account is one swipe away
After a few rounds of concepts, I landed on split spaces. The balance and the accounts became one space at the top of Home. A swipe down opens it into every account in the selected currency, and the quick actions stay within reach the whole time.
The reason was how people here move money. Customers hold many accounts, and they most often send money to each other by account number. Now that number can be copied straight from Home.
Gave up: a familiar pattern. The mechanic went to development untested, and when open, it covers transactions and promotions.
Why the account screen needed a redesign
No type hierarchy. Almost everything was set in fonts of nearly the same weight, so the screen was hard to read and nothing led the eye. When everything is important, nothing is.
Red for money. The balance and outgoing transactions were in the red brand color. People who use finance apps read red as negative, so it confused them and added cognitive load.
A chart that didn’t belong. The cash flow chart made a busy screen even busier. Analytics belong in one separate place, where customers can see all their accounts and cards.
No account details. There was no quick way to get the details, and no account number to tell this account apart from the others.
Hidden cards. Cards linked to the account were buried somewhere, with no clear way to find them.
Why the account screen needed a redesign
No type hierarchy. Almost everything was set in fonts of nearly the same weight, so the screen was hard to read and nothing led the eye. When everything is important, nothing is.
Red for money. The balance and outgoing transactions were in the red brand color. People who use finance apps read red as negative, so it confused them and added cognitive load.
A chart that didn’t belong. The cash flow chart made a busy screen even busier. Analytics belong in one separate place, where customers can see all their accounts and cards.
No account details. There was no quick way to get the details, and no account number to tell this account apart from the others.
Hidden cards. Cards linked to the account were buried somewhere, with no clear way to find them.
Why the account screen needed a redesign
No type hierarchy. Almost everything was set in fonts of nearly the same weight, so the screen was hard to read and nothing led the eye. When everything is important, nothing is.
Red for money. The balance and outgoing transactions were in the red brand color. People who use finance apps read red as negative, so it confused them and added cognitive load.
A chart that didn’t belong. The cash flow chart made a busy screen even busier. Analytics belong in one separate place, where customers can see all their accounts and cards.
No account details. There was no quick way to get the details, and no account number to tell this account apart from the others.
Hidden cards. Cards linked to the account were buried somewhere, with no clear way to find them.
How I redesigned the account screen
No chart, daily totals instead. I removed the cash flow chart, and analytics now live in their own place. For a quick sense of how money moves, the transaction history now shows a total for each day.
Details up front. The first screen of an account now shows its number and the details for funding it, so customers can find and share them quickly. The bank’s team asked for the details to be there.
Three sections instead of one. Account details, transactions, and cards each got their own section, so none of them crowds the others. I expect this makes the screen much easier to use.
How I redesigned the account screen
No chart, daily totals instead. I removed the cash flow chart, and analytics now live in their own place. For a quick sense of how money moves, the transaction history now shows a total for each day.
Details up front. The first screen of an account now shows its number and the details for funding it, so customers can find and share them quickly. The bank’s team asked for the details to be there.
Three sections instead of one. Account details, transactions, and cards each got their own section, so none of them crowds the others. I expect this makes the screen much easier to use.
How I redesigned the account screen
No chart, daily totals instead. I removed the cash flow chart, and analytics now live in their own place. For a quick sense of how money moves, the transaction history now shows a total for each day.
Details up front. The first screen of an account now shows its number and the details for funding it, so customers can find and share them quickly. The bank’s team asked for the details to be there.
Three sections instead of one. Account details, transactions, and cards each got their own section, so none of them crowds the others. I expect this makes the screen much easier to use.
Reflection
The accounts space on Home is the part I’d test first. With a week, I’d run quick usability tests and watch how people handle it, especially on Android devices and in bright sunlight, where translucent surfaces are hardest to read. I’m also not fully happy with where it landed: a grid of identical tiles gets hard to scan once a customer has ten or more accounts, and the visuals needed another round the timeline didn’t have.
Reflection
The accounts space on Home is the part I’d test first. With a week, I’d run quick usability tests and watch how people handle it, especially on Android devices and in bright sunlight, where translucent surfaces are hardest to read. I’m also not fully happy with where it landed: a grid of identical tiles gets hard to scan once a customer has ten or more accounts, and the visuals needed another round the timeline didn’t have.
Reflection
The accounts space on Home is the part I’d test first. With a week, I’d run quick usability tests and watch how people handle it, especially on Android devices and in bright sunlight, where translucent surfaces are hardest to read. I’m also not fully happy with where it landed: a grid of identical tiles gets hard to scan once a customer has ten or more accounts, and the visuals needed another round the timeline didn’t have.
Next Case Study
Payrall
Next Case Study
Payrall
Next Case Study
Payrall
Next Case Study
Payrall
Next Case Study
Payrall
Next Case Study
Payrall