Do you design for both iOS and Android?

Yes. We design a shared system that respects each platform's native conventions for navigation, typography and gestures, so the app feels correct on both rather than ported to one.

Do you also build the app or only design it?

We do both. Many clients take the design and hand it to their own engineers, and we also build production apps in React Native with a Supabase or Node.js backend.

How do you validate the design before development?

Interactive prototypes are tested with real users on real devices before any code is written, which is far cheaper than discovering the same navigation problem after the build.

Back to Portfolio

Design/Mobile Apps

Banking app redesign

Banking app redesign is a mobile app UI/UX design project from the Pixel2Tech mobile apps practice. We were brought in because the core action was buried three screens deep, so most users never reached it in their first session. This page walks through the problem we were handed, how we approached it, and what changed as a result.

Brand: Banking App
Practice: Design
Service: Mobile Apps
Year: 2025

The Work

What we designed for Banking App

Deliverables

App UX
UI system
Prototype
Design handoff

The challenge

When the project started, the core action was buried three screens deep, so most users never reached it in their first session.

Our approach

We deferred every non-essential onboarding question until after the user has seen value once.

The outcome

The design system cut build time for new screens because engineering assembles rather than invents.

Screens designed: 42
Time to first action: −55%
Onboarding completion: +44%

How we delivered this mobile apps project

Step 01
User research and job mapping
We identified the single job a user opens the app to do, then mapped every screen against whether it helps or delays that job.
Step 02
Wireframes and prototypes
Low-fidelity flows were prototyped and tested before visual design, so navigation problems surfaced while they were still cheap to fix.
Step 03
UI system and screens
A component library covering buttons, sheets, form states, loading and empty states was built first, then screens were assembled from it for consistent behaviour throughout.
Step 04
Developer handoff
Handoff included spacing tokens, interaction specs, edge-case states and exportable assets, so engineering implements the design without reinterpreting it.

Technologies and tools used

The stack below was chosen for this engagement because it matched the scale of the work, the team that would maintain it afterwards, and the performance the brief required.

Figma
React Native
TypeScript
Design tokens
Interactive prototyping
Supabase
Accessibility (WCAG) review

Why this project matters

App retention is decided in the first session. If a user reaches the thing they came for quickly, the rest of the product gets a chance; if not, no later feature recovers them.

If you are weighing up similar work, our services overview explains how we scope engagements, and about Pixel2Tech introduces the team who would run it.

Frequently asked questions

Do you design for both iOS and Android?: Yes. We design a shared system that respects each platform's native conventions for navigation, typography and gestures, so the app feels correct on both rather than ported to one.
Do you also build the app or only design it?: We do both. Many clients take the design and hand it to their own engineers, and we also build production apps in React Native with a Supabase or Node.js backend.
How do you validate the design before development?: Interactive prototypes are tested with real users on real devices before any code is written, which is far cheaper than discovering the same navigation problem after the build.