Responsive Banking App
Bank Nest
Bank Nest was a UI-focused course project, the brief was to design a fictional banking app interface that feels clear, playful, and trustworthy, balancing professionalism with an approachable visual personality.
The deliverable was a cohesive, responsive interface across desktop, tablet, and mobile — 9 screens in total, ensuring key features and interactions were consistent and visually polished across every device.
Completing this project earned the Professional Certificate in UI Design from the UX Design Institute, validated by Glasgow Caledonian University.
ROLE:
UI Designer
CLIENT:
Self-initiated · Course Project
TEAM:
Solo
TIMELINE:
2025
Challenge
The core tension of this project was balancing three things that don't always sit easily together — transparency, trust, and playfulness. The interface needed to give users confidence in managing their money, while still feeling friendly and human.
With no UX research or testing to lean on, design decisions were guided by established patterns in financial interfaces, platform conventions, and common usability assumptions. And across it all, the experience needed to hold together consistently across desktop, tablet, and mobile.
Process
I started by collecting visual references that represented each of the brand values: Clarity, Trust, Playfulness, and Responsiveness. This helped me understand how these qualities are expressed in financial and product interfaces, and shaped the visual strategy for the project and using that as the filter for every decision that followed.
Brand Identity
Before starting with the visual language, I needed to create a brand for the bank. I wanted something easy to relate to, friendly, and that clearly connected with safety. So I came up with Bank Nest — using the nest as a metaphor. The place where your nest egg grows. People already associate nests with savings and protection, which was one of the core pillars for this project.
For the logo I selected a geometric sans-serif in all caps — confidence and legibility at its core. The color palette pairs a deep forest green with mint green for trust and safety, and a vibrant electric yellow for action and that playful touch. And to bring the nest metaphor to life beyond the name, I introduced organic line work — looping, flowing strokes that evoke the physical act of building
Design System
Once the brand was defined, the next step was to create a design system that would guide the interface design.
COLORS
Banknest’s color palette pairs a deep forest green with a fresh mint green, balancing trust and stability with a modern, approachable feel. The contrast between the two greens ensures accessibility, while a bright yellow accent adds playfulness and energy. Whispering Fog, our light grey, brings clarity and breathing space, keeping the interface clean and readable.
TYPOGRAHY
I’ve picked the DM Sans font family because it brings a modern, neutral tone to Banknest. Its open letterforms ensure readability, and it’s versatile across headings, body text, and UI, maintaining clarity and balance throughout the interface.
ICONOGRAPHY
The icons were selected for their clean and clear style, helping create a simple, intuitive, and easy-to-navigate interface.
COMPONENTS
These colors, icons, and fonts are more than just design choices—they’re the pieces that give the interface its personality and clarity. Looking at them together shows how they work as a team before we dive into the full screens.
Final Screens
The interface comes alive with electric yellow paired with mint and dark green, adding warmth and playfulness, while the typography and generous white space ensure clarity. Consistent patterns and familiar interactions reinforce trust across the 9 responsive screens designed for desktop, tablet, and mobile, creating an experience that feels friendly, clear, and reliable.
