Portfolio · Product Design

Mobile Banking App — UI/UX Design

Designing a mobile banking experience that felt simple, even though the system behind it wasn't.

A complete mobile banking app interface designed in Figma for a financial institution, covering the end-to-end UI and UX of the customer-facing app — later used as the implementation reference for the React Native build.

The project was built around a problem common to most banking apps: the functionality of a banking app is inherently complex — accounts, transfers, statements, cards, security — but the experience of using it has to feel simple, fast, and trustworthy regardless of that complexity.

Key Capabilities

One consistent experience across the entire banking journey.

Full mobile banking app UI/UX designed end-to-end in Figma.

Design system covering core banking flows including accounts, transfers, statements, and related functionality.

Used as the direct implementation reference for the React Native build.

Delivered a consistent and intuitive flow across the entire app, rather than treating screens as isolated designs.

Context

Why this design work mattered.

Mobile banking apps sit in a difficult spot for design. They need to support a wide range of financial functionality — checking balances, moving money, viewing statements, managing cards — much of which carries real consequences if a user becomes confused or makes a mistake.

At the same time, users expect a banking app to feel as fast and effortless as any other app on their phone, not like a form-heavy enterprise tool.

For the financial institution this was designed for, the goal wasn't simply to make the app functional. The experience needed to match the level of trust a bank requires from its customers while still feeling modern and easy to use day to day.

Without a deliberate design pass, banking apps often default to whatever structure is easiest to build rather than what is easiest to use — screens organized around backend systems instead of the customer's actual task.

This project therefore started with the customer's flow first, with implementation shaped around that experience.

The Challenge

The challenge wasn't designing individual screens.

The core challenge was designing a coherent system that could hold together across every flow a customer might use, while staying simple enough that none of the underlying banking complexity leaked into the experience.

Cover the full banking journey

Accounts, transfers, statements, and related flows needed to feel like parts of one product rather than disconnected screens.

Make high-risk actions feel clear

Financial actions such as transfers needed to remain simple to complete while making state, amount, destination, and confirmation unambiguous.

Build a consistent design language

Components, typography, color, spacing, and interaction patterns needed enough consistency that implementation could follow the design directly.

Balance trust with a modern experience

The interface needed the clarity and seriousness expected from a financial institution without feeling outdated or overly formal.

Design beyond visual mockups

The Figma work needed enough detail around states and behavior to function as a real implementation reference rather than merely a visual concept.

Design with React Native in mind

Component reuse, state variations, and interaction patterns needed to translate cleanly into the React Native implementation.

In effect, the design needed to function less like a collection of screen mockups and more like a blueprint — detailed and consistent enough that the engineering team could build directly from it with minimal reinterpretation.

My Role

End-to-end product design.

I was responsible for the UI and UX design of the mobile banking app from early structure through to an implementation-ready Figma mockup.

Designing the overall information architecture and navigation flow for the app.

Designing UI for core banking flows — accounts, transfers, statements, and related screens.

Establishing a consistent visual design system covering components, typography, color, and interaction patterns.

Designing higher-risk flows such as transfers with a focus on clarity and error prevention.

Producing a Figma mockup detailed enough to act as a direct implementation reference for the development team.

Working alongside implementation as the design was translated into React Native.

The key responsibility was making sure the design wasn't only visually polished, but structurally clear enough that “how should this work?” was already answered by the mockup before development began.

Design Challenges

Where the complexity actually lived.

Challenge 01

Making complexity disappear without removing functionality

Banking functionality could not simply be removed in the name of simplicity. The complexity had to be absorbed by the structure, sequencing, and hierarchy of the interface rather than pushed onto the user.

Challenge 02

Designing for zero ambiguity on financial actions

A misunderstood interaction on a transfer screen can become a financial mistake. High-stakes flows therefore had to communicate state, consequences, and confirmation deliberately rather than optimize only for visual minimalism.

Challenge 03

Designing something implementable

Keeping the React Native implementation in mind required thinking about reusable components, state variations, and consistent patterns from the beginning instead of handing engineering a set of visually correct but structurally ambiguous screens.

Challenge 04

Keeping consistency across a large surface area

Banking apps cover many flows, so consistency can easily erode as the number of screens grows. A shared design system kept the app feeling like one coherent product instead of a collection of separately designed pages.

Reflection

Good product design answers implementation questions early.

This project shifted how I think about the relationship between design and engineering. It's easy to treat a mockup as a picture of the end state and leave the “how does this actually work?” questions for development.

The more valuable design work was resolving those questions ahead of time — states, edge cases, and interaction logic — so the mockup became closer to a specification than simply a visual target.

For a financial product especially, good UX isn't about making things look simple. It's about doing the work required to make genuinely complex functionality behave simply without cutting corners on what the app actually needs to do.