Thanks for reading!
This project reinforced that effective digital banking depends on making complex financial information feel simple, familiar, and manageable. By connecting product discovery, account opening, and everyday account management through a consistent design system, the experience demonstrates how clarity and predictability can support confidence across the entire banking journey.ents provide a system that can expand with future banking products and features
Next Steps
Validate with users: Conduct usability testing across product discovery, account opening, and account-management tasks to identify remaining friction.
Expand authenticated banking: Design deeper flows for transfers, bill pay, transaction details, card management, and account settings.
Test accessibility: Validate contrast, typography, keyboard navigation, focus states, and interactive components against accessibility standards.
Scale the system: Extend the component library and responsive patterns as additional banking products, services, and account features are introduced.
Reflection & Next Steps
Because B1 Bank is a concept project, we shouldn't use invented performance percentages. Instead, this section can focus on the design outcomes demonstrated by the finished experience. Your reference case study connects outcomes to reduced cognitive load, faster comprehension, confidence, and consistency, but its numerical results are specific to Fortuna.
The redesigned B1 Bank experience creates a clearer connection between exploring financial products and managing everyday finances. Structured content, consistent interaction patterns, and responsive layouts make banking information easier to understand while giving users more direct access to the tools and account details they need across desktop and mobile.
Clearer financial information: Strong hierarchy makes products, balances, transactions, and account details easier to understand.
Simplified account management: Key banking actions are organized into a focused and predictable dashboard experience.
Stronger cross-device consistency: Shared visual and interaction patterns create a cohesive experience across desktop and mobile.
Scalable design foundation: Reusable styles and components provide a system that can expand with future banking products and features.
Outcomes & Impact
The mobile experience was designed to preserve the clarity and functionality of B1 Bank while adapting content for smaller screens. Information is reorganized into focused, scroll-friendly layouts, with key banking actions and account details prioritized so users can quickly understand their finances and complete everyday tasks without unnecessary complexity.
Focused hierarchy: Essential banking information and actions are prioritized for smaller screens.
Responsive content: Desktop layouts are reorganized rather than simply scaled down.
Touch-friendly interactions: Navigation, buttons, and account controls are designed for comfortable mobile use.
Purposeful simplification: Complex dashboard information is selectively reduced to keep the mobile account experience focused and manageable.
Design Focus on Mobile
A reusable component system was created to maintain consistency across B1 Bank’s growing digital experience. Buttons, form inputs, navigation elements, tabs, and interaction states follow shared patterns, making behaviors more predictable for users while allowing new banking products, pages, and account-management features to be introduced without rebuilding the interface from scratch.
Consistency at scale: Shared components create a unified experience across banking products and account-management flows.
Predictable interactions: Standardized states and behaviors help users understand how controls respond throughout the experience.
Built for expansion: Flexible components can support additional products, services, and authenticated banking features.
Faster iteration: Reusable patterns simplify design updates and create a more efficient foundation for development handoff.
Consistency at Scale
Each core screen was designed around a specific banking need, creating a clear path from exploring financial products to managing an active account. Consistent hierarchy, navigation, and interaction patterns connect these touchpoints into one cohesive experience while keeping the information and actions most relevant to each screen easy to find.
Product discovery: Banking pages make checking, savings, and lending options easier to explore and understand.
Account opening: Focused steps simplify the transition from choosing a product to starting an account.
Everyday banking: The account dashboard brings balances, transactions, payments, and key financial information into one organized experience.
Local support: Location tools help customers connect the digital experience with nearby banking services when needed.
Clarity Across Each Critical Touchpoint
The typography system establishes a clear hierarchy across the banking experience, using a structured range of heading and paragraph styles to organize financial information and support readability. Consistent sizing, line heights, and text treatments help users distinguish important content, scan information efficiently, and move between marketing content and account-management interfaces.
Clear hierarchy: Defined heading levels create consistent structure across pages and interfaces.
Readable content: Paragraph styles provide appropriate sizing and spacing for different amounts of information.
Consistent application: Shared text styles maintain visual continuity across desktop and mobile.
Built for flexibility: The type scale supports everything from large marketing headlines to detailed banking information and interface content.
Typography & Paragraph System
Brand Direction
The color system expands B1 Bank’s core visual identity into a flexible palette designed for a consistent digital banking experience. Deep blues establish structure and stability, while citrus orange creates emphasis around key actions. Supporting green, gold, and neutral tones provide additional range for interface states, financial information, and visual hierarchy across the experience.
Strong visual foundation: Deep blue establishes structure and anchors the experience.
Clear action emphasis: Citrus orange draws attention to important actions and interactions.
Flexible supporting colors: Green and gold extend the palette for financial and interface states.
Consistent neutral system: Off-white tones create balanced surfaces and separation between content.
Banking customers need to understand their financial options quickly while feeling confident that they can manage their money without unnecessary complexity. The experience should make balances, products, transactions, and key account actions easy to recognize, helping users stay informed and complete everyday banking tasks with confidence.
Clarity builds confidence: Financial information should be understandable at a glance.
Control matters: Users need quick access to balances, transactions, payments, and account actions.
Friction slows everyday tasks: Clear navigation and predictable interactions make routine banking easier.
Consistency reinforces trust: Familiar patterns across products, devices, and account management create a more dependable experience.
User Mindset
The design approach prioritizes clarity, consistency, and ease of use across the banking experience. Financial products and account information are organized through clear hierarchy, reusable interface patterns, and focused interactions that help users understand their options, complete key tasks, and manage their finances with less friction.
Clarity first: Financial information is structured to be easy to scan and understand.
Focused interactions: Key banking actions are surfaced without overwhelming users with unnecessary options.
Consistent patterns: Reusable components create predictable experiences across products and account management.
Responsive by design: Layouts and interactions adapt intentionally across desktop and mobile experiences.
Design Approach
B1 Bank needed a digital experience that made financial products easier to understand while giving customers a clear, intuitive way to manage their accounts. The experience needed to connect product discovery, account opening, and everyday banking without overwhelming users with financial information or complex navigation.
Product options lacked clarity: Customers needed an easier way to compare checking, savings, and lending products.
Financial information felt fragmented: Important account details and everyday banking tools needed clearer organization.
Key actions required stronger hierarchy: Transfers, payments, transactions, and account information needed to be easier to find and understand.
Experiences needed to connect: Public-facing banking pages and authenticated account management needed to feel like one cohesive digital experience.
The Challenge
I led the end-to-end design of B1 Bank’s digital banking experience, focusing on improving financial clarity, simplifying product discovery, and making everyday account management easier. My scope included UX strategy, responsive UI design, information architecture, design systems, and prototyping across public-facing banking pages and the authenticated account dashboard.
Role & Scope
B1 B1 Bank needed a digital experience that made everyday banking easier to understand and manage. I designed a responsive experience that brings financial products, account information, transactions, payments, and everyday banking tools into a clear and consistent system across desktop and mobile.
Digital Banking Desisgn for Fianancial Clartity & Easier Account Management
