Absa Mobile

Context

The app I bank with, and kept losing time in.

Absa Ghana's mobile app is the one I actually use. This started as a personal audit: I opened the app and wrote down every place it made me stop and think. By the end the list had stopped being about taste and started being about structure. Nobody commissioned any of it. I also kept every constraint the real app has to live with instead of designing them away, so the biller directory still has all 217 entries, there are still 13 account products, and mobile money still runs across MTN, Telecel and AT.

Problems

The hurdles, named plainly.

Four things cost me time on every single visit.

• Biometric login sat below the fold. The fastest way into the app was the one you had to scroll to reach, because the username and password fields took the space above it.
• A promotion outranked the balance. The Visa offers card sat between the greeting and the account, so the number most people open the app to check was the third thing they saw.
• Quick actions ran off the edge. Six actions in a horizontal scroller meant the last two got found by accident, if they got found at all.
• Sending money to myself asked me to verify myself. The app already had my name and my number, then made me pick a provider, retype the number, and confirm it on a separate screen.

Approach

Design principles

Growing pains

What the old design could no longer carry.

The original is built as a directory: four tabs, each one a list of everything that tab can do. That scales nicely for the bank, because a new service is just one more row, but not for the person holding the phone, who is almost always there for one of three things. The lists grew past the fold, the balance got pushed down by whatever was being promoted that month, and the flows kept the shape of the forms behind them.

• The biometric prompt was only reachable by scrolling past the form it was meant to replace.
• The from-account picker opened as a full screen to offer exactly one account.
• Provider and number were collected twice, once to enter them and once to verify them.

The redesign

What changed, and why that.

The dashboard leads with the balance and a six-action grid that fits without scrolling. Login leads with Face ID as the primary button and keeps username and password as a clearly labelled second route rather than the default. Sending to yourself opens already filled in, with the wallet named and the number in place. The review screen carries the amount at full size, with the fee and total underneath. The dark surface stayed, because the brief was never to redecorate, but every colour was worked out again against WCAG and the whole palette was rebuilt as tokens.

Introducing

A picker built around the directory it actually has.

The bank lists 217 billers, and 165 of them, which is 76%, sit in a category called "Others". Browsing by category cannot work for three quarters of a directory. So the picker leads with search, and keeps the categories as collapsible sections for the quarter they do serve.

• Does this. Opens on search, so you can reach any biller by typing instead of guessing which of thirteen categories the bank filed it under.
• Shows this. A count on every category, so "Others · 165" states the problem rather than hiding it.
• Invites this. One section open at a time, so the list never turns back into the scroll it replaced.

Alternatives

The routes not taken.

Two directions got far enough to judge. The first was a light theme. The palette is tokenised and carries a complete second mode, so switching it is one setting rather than a redraw. I dropped it because the brand magenta has to darken a long way to hold its contrast on white, and by the time it does, it stops reading as Absa and starts reading as some other bank. The second was building every selection state as its own prototype screen. That worked right up until a category list with fourteen states meant five taps of Back to leave a single screen, so I rebuilt them as component variants instead.

Reflection

Project takeaways.

• Measure the composite, not the swatch. I flagged a selected chip as a 1.12:1 contrast failure and fixed it, having read the fill's hex and ignored its 14% alpha. The real value was 6.89:1, and my fix took it to 1.21:1. On a dark interface the colour you typed is almost never the colour on screen.
• Refusing to tidy the data turned out to be the useful constraint. Keeping all 217 billers, the bank's own category names and its typos meant the design had to survive the real directory instead of a convenient one.
• People come for three things. Balance, send, pay. Everything else across four tabs of lists is there for the bank's sake rather than the customer's, and it should be reachable without competing for the same space.