Conversational Banking · Self-initiated

I stopped designing a feature, and started designing a conversation.

This one started with a question I'd watched every banking app fumble: "How was my spending last month?" Most of them answer it with a wall of text. I wanted to know what happens if the interface itself becomes the answer, so I designed it, then coded it, because I needed to feel it, not just look at it.

A self-directed exploration. Strategy, design, and front-end, all mine, start to finish.

Where it started

I kept running into the same broken moment. You ask your banking app a human question, "how was my spending?", and it answers like a machine: a dense paragraph, or worse, a dashboard crammed into a chat bubble. Both treat your question as a query to look up and close.

But that's not how any of us actually think about our money. The question isn't a database lookup. It's the opening line of a conversation you're a little nervous to have. So before I drew a single screen, I gave myself one rule to design against:

Most banking apps treat "how was my spending?" as a query to be answered. I wanted to treat it as a conversation to be opened.

That one sentence ended up deciding everything after it, the layout, the tone, the pacing, even which platform I built it on. I keep coming back to it whenever I work: get the framing right first, and the hundred small decisions downstream stop being arguments.

The resting state. Quiet on purpose. A conversation opens calmly, it doesn't greet you with twelve widgets.

Why nobody had filled the gap

Before I designed anything, I went and looked at who had already tried this. The market had quietly sorted itself into two camps, and here's the thing, neither one is wrong. They're each half-right, which is exactly why the gap between them stayed open.

That middle ground wasn't empty by accident. It's empty because it's hard. Visual richness usually means a dashboard, and the second you build a dashboard, the conversational feel dies. Holding both at once, depth that lives inside the conversation instead of replacing it, that was the actual problem. And that tension is the whole project. Everything I'm about to walk through is me trying not to let go of either side.

One question, three people

Here's what I realized staring at those five words: they hide three completely different emotional needs. And in a Saudi context, shaped by monthly salary cycles, family remittances, the spending spikes around Ramadan and Eid, those needs get sharper. Comparison drives the question more than anything. So I stopped designing for an average user and gave the question three faces instead, three real people, each asking it for a different reason.

This was the hardest part of the whole thing: one reply had to serve Aisha, Khalid, and Yara at once, without splitting into three products.

Think about how far apart they are. Aisha wants to drill in the second the answer lands. Yara needs to be eased in, told gently, before you put a single number in front of her. The lazy fix is three separate flows, but that's three products to design, build, and maintain, and it quietly betrays the whole "one conversation" idea. So I went with progressive disclosure inside a single bubble: open with the calmest framing all three can absorb in two seconds ("a calmer month, alhamdulillah"), then offer the depth as an invitation, never a requirement. Nobody gets shoved past their comfort level. Nobody gets locked out of going deeper. The conversation flexes to whoever showed up.

---

The decisions I'll stand behind

I designed for web, when every instinct says mobile

A chat experience screams mobile. It's the obvious, "natural" home for a conversation. I went the other way, on purpose. Web handed me side panels, multi-column layouts, room to show something rich without strangling the chat into a skinny column. And I knew the cost going in, I was giving up the intimacy and the thumb-reach of mobile. I made the call anyway, because the idea I was chasing, depth living inside the conversation, needed the canvas more than it needed the pocket. That's a decision I can defend, not a default I fell into.

The answer isn't a paragraph. It's a living summary, headline, comparison, and category breakdown, all living inside the conversation, never pasted beside it.

The drill-down is a layer, not a place you go

Tap a category and you don't get taken anywhere. The panel reflows right where you are, merchants, the trend, the recommended moves, all of it appears beside the thread without ever losing it. The chat stays the spine. The data sits on top as a layer, not a room you have to leave the conversation to walk into. That's the POV made literal: the conversation never closes on you.

Tap a category and the detail opens beside the conversation. That counter at the top is real, it's measuring actual time from tap to painted frame.

I coded it, because a mockup can't prove a feeling

A Figma prototype can show you what fast looks like. It can't prove it feels fast, it's a recording of a feeling, not the feeling itself. That bugged me enough that I built the whole thing in vanilla JS and HTML, zero libraries, and wired in a live latency counter that measures the real time from tap to rendered frame using performance.now() and a double requestAnimationFrame.

Google's RAIL model puts the line for "instant" at 100ms. Cross it, and the link between your action and the app's reaction quietly comes loose, and in a money app, that hesitation doesn't read as the app being patient. It reads as anxiety. So speed here isn't polish. It's trust, measured in milliseconds. And the only reason I can tell you I hit the bar instead of hoping I did is that I measured it, not guessed.

The suggestion has to be earned

The app only offers you something proactive, a small round-up savings habit, after you've actually understood your spending. Never before. And when it does, it's framed as optional, Sharia-aware, with a dismiss that's just as easy as the accept. Because a nudge before understanding is a sales pitch. A nudge after understanding is a service. That ordering, what comes first, was the entire ethical decision, and I treated it like one.

The suggestion surfaces only after you've explored, framed as a choice, with dismissal as easy as acceptance.

---

The two I killed

I designed three directions and shipped one. Honestly, the two I rejected say more about the project than the one I kept, because killing a good idea for a clear reason is the part of the job that actually matters.

Both rejections rhyme, and that's the part I want to point at. Each one was tempting for a surface reason, cleaner, flashier, and wrong for a structural one. Holding the line on the POV, even against my own good ideas, is what kept the whole thing coherent. That's the discipline I'm most proud of here, not the screens that survived, but the ones I had the nerve to throw out.

Where I got it wrong, and turned around

The visual identity is the part I badly underestimated. I burned far more time on it than I want to admit, cycling through palette after palette trying to land on something distinctive and ownable. And the same thing kept happening: every direction I actually liked ended up echoing some existing bank's identity. The second a palette felt "premium," it also felt borrowed.

I had to stop and catch myself. The point of this exploration was the interaction model, not a brand. Inventing a bespoke identity that quietly imitated someone else's was the worst of both worlds, neither original nor neutral. So I made the harder, more disciplined call: instead of faking originality, I stood on a proven, intentionally neutral system, Google Material. It let the colour step out of the way so the interaction could be the thing you actually remember.

Knowing when to design from scratch and when to stand on a system is a senior call. Here the system was the right answer, and admitting that took me longer than it should have.

What I'll say honestly

This is a self-directed exploration, not a shipped product, so I'm not going to dress it up with validated metrics it doesn't have. Here's what I'll stand behind:

And here's the honest gap: this hasn't been in front of real users, so the comprehension and trust claims are my hypotheses, not proven outcomes. If this were a real engagement, the next step is the unglamorous, essential one, put it in front of people like Aisha, Khalid, and Yara, and find out which of my assumptions actually survive contact. The bet underneath all of it is simple, and I believe it: a customer who genuinely understands their spending trusts the bank more, and trust is the only durable moat a bank has.

See it move

The screenshots show you the structure. The video shows the thing they can't, the feel: the live drill-down, the latency counter reacting in real time, the conversation that never closes on you.