About the Project
The user interface for a responsive banking website.
My client is a fictional challenger brand, a new competitor to traditional banking institutions. They want an intuitive interface that will help them stand out from the crowd.
Brand Values
- Clear
- Playful
- Trustworthy
Screens
- Accounts overview screen
- Current account screen
- My spending screen
A recording of a walk-through of my UI design responsive banking website in Figma.
This walk-through does not include an audio commentary, as it is a concise visual summary. Please refer to the description below for further details and explanations of the decisions made.
Quick watch 3 min
STEP ONE: MOODBOARD
I have initiated my UI design project by developing a comprehensive mood board that will serve as a creative foundation and guide the design process moving forward. I have researched competitors and gathered inspiration from sites like Dribbble, Pinterest, and Behance.
STEP TWO: GRID SYSTEM AND COMPONENT LIBRARY
I have developed a component library for my UI design project to facilitate a consistent and efficient design process. This library serves as a repository of standardized, reusable components that ensure uniformity across the interface, streamline development efforts, and provide a scalable foundation for future enhancements.
STEP THREE: TYPOGRAPHY STYLES
I developed typographic styles for my UI design project to ensure consistent and visually appealing text elements across the interface, which helps improve readability, establish hierarchy, and create a cohesive user experience.
STEP FOUR: COLOUR PALETTE
I have developed a colour palette featuring analogous blue and green hues for my responsive banking website to highlight brand values of clarity, playfulness, and trustworthiness, ensuring a cohesive and engaging user experience that resonates with our audience.
STEP FIVE: ICONOGRAPHY
I selected, refined, and organized a comprehensive set of icons for my project to enhance visual communication and user experience. By curating a cohesive iconography, I ensured that each icon aligns with the overall design language, conveys meaning effectively, and maintains consistency throughout the interface. This approach facilitates intuitive navigation, reinforces brand identity, and contributes to a polished and professional aesthetic.
STEP SIX: SCREEN DESIGN ITERATIONS
My accounts page
I utilized screen iterations in my project to methodically refine and enhance the user interface. This iterative process allowed me to address usability issues and optimize functionality.
Initially, I began with a tetradic colour palette for my project. However, after multiple rounds of testing, the yellow font consistently failed accessibility checks. Additionally, the abundance of colours made it challenging to achieve a trustworthy and clean design. Consequently, I transitioned to an analogous colour palette, reducing the number of colours to just two hues: blue and green, along with their tints, tones, and shades. This approach not only improved accessibility but also reinforced the desired brand values of clarity and trustworthiness.
I integrated three quick action buttons at the top of the screen to enhance navigation and improve accessibility. These buttons provide users with swift access to key features, ensuring a seamless and efficient user experience.
I followed the same layout on the tablet screen and added a breadcrumb menu and BIC and IBAN codes on the desktop screen.
The layouts presented below demonstrate different design approaches tailored for mobile, tablet, and desktop devices.
Current Account Page
Paying and transferring money are among the most frequently performed tasks in online banking. By positioning this CTA button prominently at the top, users can quickly access it without having to navigate through the entire page.
Your Overdraft Options: Provides users with information on available overdraft choices, helping them manage their finances effectively.
- Select Month Drop down: Allows users to choose a specific month to view transactions, enabling easy navigation and better financial tracking.
- Download Icon: Offers the ability to download transaction history or statements, providing users with easy access to their financial records.
- Pending with Information Icon: Displays pending transactions with additional information, helping users stay informed about their financial activity.
- “IN” and “OUT” Indicators: Clearly display incoming and outgoing transactions, helping users quickly identify their cash flow.
- Filter Icon: Enables users to apply filters to their transactions, making it easier to find specific information and improve overall usability.
- Total Amount Pending: Summarizes the total amount of pending transactions, providing users with a clear overview of their current financial status.
Visual identifiers, such as profile images or company logos, enhance user recognition by enabling quicker identification of transaction participants—more efficiently than text alone. Additionally, leveraging universally recognised colour cues—red for alerts or negative outcomes and green for success or positive actions—supports intuitive comprehension of transaction context.
Desktop Layout
My spending page
A two-column chart effectively visualizes financial inflows and outflows side by side. This allows users to quickly compare their income and expenses within the same time period. Drop-down menus allow users to swiftly select different months or accounts, enabling easy navigation through financial data without cluttering the interface with numerous options.
The length of each bar directly corresponds to the value it represents, making it easier to compare categories visually without needing to interpret varying segment sizes in a pie chart. Users can directly interpret the value of each bar without having to rely on colour differentiation, which is beneficial for those with colour vision deficiencies.
A line chart clearly shows trends over time, making it easy for users to spot patterns in their weekly spending. They can quickly see if their expenses are increasing, decreasing, or staying consistent. By understanding their spending trends, users can make informed decisions about where to cut costs or allocate resources more effectively.
My spending desktop layout
You’re welcome to explore my other two projects by selecting either option below.
Nanny Nest - babysitting platform
A smart babysitting platform that helps parents and sitters coordinate childcare and daily schedules with ease.
Road Star Rentals - car rental website
This website was built to simplify car bookings-cutting out clutter and focusing on speed, clarity, and ease of use.