BankON
@The UX Design Institute.
User Interface design for a responsive, personal banking web app
The project involves designing the UI for a challenger brand in the financial world. They want a fresh web app for personal banking that could stand out.
Timebound: 3 months (part time)
Role: UX/UI Designer
Tools: Pen & Paper, Figma
The problem
Most banking apps are kinda dull, old-looking and not very user-friendly these days. They needed something more modern and intuitive without feeling outdated.
Design Goals
The UI had to match their brand principles:
Clear: Keep things simple and logical since it’s about people’s money.
Trustworthy: Make users feel safe and secure.
Playful: It should be easy to use but still have a bit of fun without confusing anyone.
Task:
Create a UI that worked smoothly on phones, tablets, and desktops for a fintech company wanting to shake up personal banking.
Technical requirements:
Full UI design
Responsiveness
My approach
I didn’t have much experience in visual design, so this was a challenge. I started by looking at other cool fintech apps and general design ideas to get inspired.
This project really pushed me to learn about designing for different devices and how to balance style with usability, especially in the banking world where trust and clarity are crucial.
-
I began by diving into competitor research and drawing inspiration from sites like Dribbble, Pinterest, and Behance.
Playful: I looked up for products that nailed that playful vibe—whether through vibrant colors, quirky animations, or unique shapes.
Trustworthy: I also looked into companies that transpire trustworthiness in their product design—solid presentations that make users feel secure and confident.
Clear: For clarity, I sought out examples that ace white space and clean typography to ensure designs are user-friendly. When dealing with people's finances, simplicity is key.
I expanded my mood boards to include:
typography
color palettes
icon styles.
This process helped me translate the brand principles into a clear Design Intent, ensuring every design choice resonated with the brand's core values.
-
As I gathered inspiration, I began exploring design ideas, focusing on color palette, fonts, and iconography to reflect the brand's values.
COLOUR PALETTE I crafted a palette to reflect playfulness, clarity, and trust, ensuring accessibility through legibility tests.
Blue Tones: Convey trust and clarity with dark blue, gray, and white for strong contrast.
Magenta: Adds boldness and playfulness, used sparingly to avoid issues for color vision deficiency.
Sand: Introduces peace and elegance, added later for breathability and lightness.
TYPOGRAPHIC SCALE I chose two fonts for simplicity and readability, organizing variations per device.
Nunito Sans: Balanced, readable, trustworthy, and flexible for a playful look.
Roboto Slab: Geometric, friendly, and clear, with a sense of trustworthiness.
ICONOGRAPHY I selected simple, outlined icons with consistent shapes and rounded corners to match the brand's identity of simplicity, clarity, and fun.
“The goal of BANK ON is to deliver straightforward, enjoyable, and reliable access to personal finances.”
Starting off with sketches from zero wasn't easy, but my main goal was to brainstorm how information should be displayed across various screens. I sought feedback from my mentors early and often, enabling me to iterate quickly and improve the design with each cycle.
-
Throughout the process, I identified structural and visual challenges that helped me refine my focus:
Conveying the Brand Image: Ensuring the design reflects the brand's personality.
Applying Gestalt Principles: Using these principles to create intuitive and visually appealing designs.
Adhering to Layout Fundamentals: Creating a balanced and ordered interface.
Constructive Use of Colors and Shapes:Enhancing communication and usability.
Efficient Use of White Space: Avoiding clutter and improving readability.
Improving Information Hierarchy:Utilizing different font styles and sizes to guide the user.
Simplifying UI Elements: Removing unnecessary elements for a clear and concise design.
Using Rounded and Soft Shapes: Creating a more approachable and user-friendly interface.
A CAROUSEL OF ALL 9 ITERATIONS
with self-reflection based on my own observations of possible improvements (at the bottom of each slide) and my mentor’s feedback.
-
![]()
1^ draft
At this stage, I focused on experimenting and applying my learnings to the design. I incorporated circles to add playful visual elements.
Possible Improvements:
Scalability and Functionality: As the design scales down, especially in the mobile version, the same circle element is used as a button. Users might question if there is a gesture attached to the circles in other versions as well.
Color Scheme Consistency: Issues with the color scheme and lack of consistency in styles of the active state in the navigation bar.
Drop Shadows: Inconsistency with the drop shadows of elements.
Background Competing with Content: The dark blue background competes with the important content of the page.
-
![]()
2^ Iteration
I addressed the improvement points from the previous design and focused on refining the elements.
For the next three iterations, I experimented with different background elements and colors to determine what worked best. I also explored various button styles.
Possible Improvements:
Background Elements: While the playful background element works well in the mobile version, the stroke thickness becomes too visually prominent on larger screens, giving a "graffiti" vibe. This is not ideal for a banking product.
-
![]()
3^ Iteration
In this phase, I realized a few critical points for further refinement:
Separation of Information: It became evident that it was hard to focus on important information. I needed to add more layers to separate information from the background, indicating that my current approach wasn't effective.
Icon Alignment: Some icons in the 'My Spendings' graph were not aligned and vertically distributed properly, needing further adjustment.
-
![]()
4^ Iteration
Scalability issues: these lines element might represent a challenge for developers when coding. They might end up aligning differently in different devices, and might crash with texts or other elements.
Once again, although it brings a playful touch in the mobile version, the stroke doesn't work. Even in the Spending's page, it could be removed altogether. it doesn't add anything
-
![]()
5^ iteration
Fixed the improvements point from previous design.
Here am trying with different colors and shapes to find a sweet spot. Simple.
'credit-card' shaped elements are added to the dark blue background for playfulness.
POSSIBLE IMPROVEMENTS
dark tones make it difficult to visually separate elements from the navigation bar and seems heavy
dark background almost shuts off the playfulness
-
![]()
6^ iteration
At this point, I decided to experiment with totally new colors. My color palette is evolving.
The background soft-sandy color is giving more of a airy feeling, the elements are finally popping up and taking the space they are supposed to in a hierarchical system.
POSSIBLE IMPROVEMENTS
The footer is still taking some attention away from the rest of the page. due to dark background. perhaps it would work best if it would blend in with the rest
The top navigation bar in the same color of the side navigation bar and the footer, contributes to 'boxing' the page, possibly too much. It gives a sense of outdated website.
-
![]()
7^ iteration
In this iteration, I worked on improving the previously mentioned points and removed the dark blue background altogether from the top navigation bar and the footer.
I also extended the side navigation bar component to the bottom of the page. so the content of the footer would better align with the rest of the page.
POSSIBLE IMPROVEMENTS:
The shapes in the background are working well in the mobile version, but still taking away attention to more important content. There is space for playing around a bit and tind a balanced approach to bring on playfulness while not compromising the 'clear' and 'trustworthy" principles
-
![]()
8^ iteration
After exploring inspirations online and playing around on Figma with shapes of different kind, I figured that a more elegant approach would be soften up and neutralize the background colors and shapes to blend with the rest.
The playfulness still transpires from the soft and bubbling lines of the background leaves, which are inspired by the brand logo (self designed colorful flower blossoming from a credit card which recalls the iconography used in the rest of the page)
POSSIBLE IMPROVEMENTS:
The background shapes are maybe still too defined and "boxed' inside the page frame
-
![]()
9^ iteration
In the last iteration. I designed the background shapes to extend out of the frame, to give a more fluid feeling. while keeping the connection to the playful. colorful brand logo of BANK ON.
At this stage of the design process, I focused on the details, such as alignment with the use of the columns and the 8px grid on Figma, ensuring consistency of sizes of buttons and boxes, fields, states etc. and re-visiting the typographic scale of my design to give a predominant visual importance to the key elements
I also made sure all elements would be grouped, ordered from top to bottom and labeled with appropriate names in the pages column in Figma, ready to be handed over to developers and easy to navigate for potential colleagues collaborating to the project.
POSSIBLE IMPROVEMENTS:
Focus on the smallest details
Explore other elements that could benefit from a touch of magenta which is used, at this stage, as one of the main source of visual playfulness
Final User Interface
The final design product is the results of all of the trial-and-fail points explored throughout 9 iterations. It is refined, polished, thoughtfully responsive and laid out based on rigorous and smart design principles and adhering to the three principles of the brand:
Playful, Clear, Trustworthy
My Challenges
My Learnings
BankON is my very-first UI case study.
After getting my Professional Diploma in UX Design last year, it felt natural to explore more design disciplines.
Since this was an academic project, there are no real metrics or results to show. Instead, I will share what I've learned.
-
The skills I picked up during the UX course came in handy, especially when it came to user-centric thinking. While there are always details I could have improved, the learning curve was steep, and I’m pretty proud of what I pulled off.
-
Proud Moments
What I'm most proud of is how the brand principles—playfulness, trustworthiness, and clarity—shine through in my design. Bringing these values together in a single design wasn’t easy, but I think the colors, shapes, and spaces I used really nailed it. The research phase, with all the mood boards and style references, was crucial, but the real fun began when I started sketching and brainstorming. Playing around with shapes, fonts, and colors, and getting feedback was exciting. Even when things didn’t work out, it pushed me to ask for feedback and dive deeper into new ideas, which helped me improve each time.
-
The biggest challenge I faced was my initial lack of structure. I was so eager to start sketching and playing with colors that I didn’t lay down a solid foundation. This led to issues later on, and I realized too late that I should have focused more on consistency from the start. Simple things like using layout grids and columns would have saved me a lot of time. In the final stages, I had to spend a lot of time fixing details that didn’t fit into the layout anymore. This project taught me the hard way that UI design isn’t just about pretty colors and cool fonts—it’s about creating a thoughtful and organized design from the ground up.