JOOD Bank
Design Principle
When financial decisions feel complex, clarity builds trust.
METADATA
Role
Product Designer
Project Type
Concept Project
Platform
Responsive Web Application
Scope
End-to-End Product Design
Tools
Figma
Project Introduction
JOOD Bank is a responsive online banking platform designed to help users open and manage personal and business bank accounts without visiting a physical branch. The project explores how complex financial workflows can be translated into a clear, accessible digital experience that reduces friction while maintaining the trust and professionalism expected from a banking product.
Understanding the Problem
Traditional banking processes can be time-consuming, paperwork-heavy, and restricted by branch operating hours. Users who prefer digital solutions can still encounter unclear onboarding flows, complex financial terminology, and interfaces that feel intimidating rather than supportive.
The challenge was therefore not to simplify banking itself, but to simplify how users experience and interact with it — reducing friction during account opening and everyday banking while maintaining clarity, confidence, and trust.
Research & Discovery
To understand user motivations and concerns, I conducted five interviews with potential bank customers, focusing on digital literacy, trust expectations, and the emotional barriers associated with online financial services.
Key Insights
The research revealed that users become anxious when financial steps are unclear, lengthy forms can increase abandonment, transparency builds more trust than visual complexity, and visible progress helps users feel more confident during onboarding.
User Personas
User Problem Statements
Christina Smith
Christina is a tech-savvy professional who needs to open a new bank account quickly and easily without visiting a branch because she is frustrated with the traditional banking process, which involves long lines, complex paperwork, and limited access to banking services outside of regular business hours.
Design Exploration
I explored the core banking experience by mapping the key interactions required to move users from account selection through onboarding, verification, and account management.
User Flow
Wireframes
Low-fidelity wireframes were created to explore structure, hierarchy, and responsive behavior before moving into visual design. The focus was on making onboarding steps clear, keeping financial information readable, and minimizing cognitive load across screen sizes.
Low-Fidelity Prototype
Design Decisions
Guided digital onboarding
Rather than presenting account creation as one long process, I structured the experience into clear stages so users could understand what was required and what would happen next.
Clear financial hierarchy
Financial information was organized through hierarchy and grouping so users could distinguish important details without being overwhelmed by the amount of information presented.
Trust through transparency
I prioritized clear information, predictable interactions, and visible confirmation states to make important financial actions feel more reassuring and trustworthy.
Visual Design & UI System
The visual direction was designed to communicate trust, professionalism, and clarity without unnecessary decoration. Typography, color, components, and feedback states work together to create a calm and consistent banking experience.
Design System
Final Design Solution
The final design translates the research findings into a responsive banking experience that makes account opening and everyday financial management clearer, more approachable, and easier to navigate.
Key Features
Digital account opening
A fully digital onboarding flow reduces the need for branch visits and guides users through the required steps.
Clear financial overview
The dashboard organizes important financial information into an accessible overview.
Transparent confirmations
Clear transaction and transfer confirmations help users understand the outcome of important financial actions.
Responsive experience
The interface maintains a consistent hierarchy and interaction language across desktop, tablet, and mobile.
High-Fidelity Prototype
Usability Testing & Iteration
Unmoderated usability testing was used to evaluate clarity, readability, and user confidence during key banking actions. The feedback highlighted opportunities to strengthen visual guidance, confirmation, and navigation across devices.
Findings
Outcomes & Learnings
The project demonstrated how reducing complexity, providing clear progress feedback, and establishing visual consistency can make digital banking feel more approachable and trustworthy. It reinforced the importance of designing financial experiences around both functional clarity and emotional reassurance, particularly when users need confidence when making important decisions.
