Industry
Fintech (Digital Banking)
Tools
Figma
Figma Plugins
Building the Nexus Interface: Where Clarity Meets Character
For my UI design coursework, I set out to create a modern interface for Nexus - an imagined challenger bank designed to stand out in a crowded financial market. The project became a space to bring clarity, personality, and trust together in a banking experience that feels intuitive, friendly, and engaging.
The Goal
The brief: design a fully responsive banking UI that works seamlessly across desktop, tablet, and mobile.
From everyday spending and account overviews to long-term insights, I focused on making financial information feel clear, approachable, and confidence-building. Across nine screens, I explored thoughtful layouts, adaptive behaviours, and a visual identity that balances playfulness with reliability.
Moodboard & Visual Direction
I began by collecting visual references that expressed the brand’s personality - playful but dependable, modern yet human. Inspiration came not only from digital banking but from a wide range of websites and products. These explorations shaped the tone, look, and feel of the interface early on.
Grid System
To support responsive design, I built a flexible grid that adapts across breakpoints. Working with a classic 4-, 8-, and 12-column system kept alignment crisp and layouts consistent, whether viewed on a desktop dashboard or a mobile screen.
Component Library
I developed a reusable library of buttons, cards, forms, and navigation elements. This allowed me to design efficiently while maintaining visual and functional consistency throughout the entire interface.
Typography
Typography needed to express personality without sacrificing clarity. I chose bold, friendly typefaces to bring warmth and playfulness to the brand while keeping financial information easy to read and effortless to scan.
Colour Palette
To move away from the predictable blues of traditional banking, I crafted a vibrant palette that feels distinctive and inviting. The colours support hierarchy, draw attention to key moments, and add energy, without overwhelming the design or distracting from the data.
Icons
I selected a cohesive icon set from Figma that aligned with Nexus’s visual tone. Simple, consistent, and intuitive, the icons help reinforce navigation and reduce cognitive load across the experience.
Design Iterations & Execution
With the foundations in place, I explored multiple design iterations before translating the concepts into nine responsive screens - applying grids, components, typography, and colour to deliver a cohesive, intuitive, and character-rich banking interface.
Reflection & Conclusion
This project deepened my understanding of how visual clarity and system structure shape user confidence - especially in high-trust sectors like finance. Even small decisions, like component spacing or colour emphasis, can influence whether users feel grounded, informed, or overwhelmed when navigating their money.
One of the key learnings was how much iteration is required to build simplicity. I often found myself exploring multiple pathways before stripping designs back to the essentials. Defining a visual language was only the first step; applying it consistently across screens and breakpoints required constant balancing between personality, accessibility, and function.
If I were to continue evolving this project, I would:
Conduct usability testing to observe how people interpret the UI in real banking scenarios
Explore accessibility standards more deeply, including contrast ratios and font scale adjustments
Prototype interactive micro-moments - like onboarding or saving goals - to bring the experience closer to a real product
The process strengthened my ability to move from inspiration to structured systems - building grids, components, and styles that scale instead of reinventing every screen. By iterating across desktop, tablet, and mobile, I gained a clearer view of how responsive patterns support users wherever they are. With further refinement, this concept could grow into a fully interactive product, validated by real-world testing and user insight.