top of page
Easily manage your money and have fun doing it.
UI concept for Banking application
Project Goals
The task was to create a new responsive banking application for a challenger brand looking to make waves in the financial world. Making the product stand out by its playfulness, clarity and trustworthiness.
OBALbank
Banking Application
Project Challenges
Be creative but consider the wireframes. The UX institute supplied basic wireframes for guidance to simulate a real-life scenario, when a UI designer is given wireframes by the UX team.
Platforms
Obal bank is a cross-platform application for iOS and Android. It can be used on mobile, desktop and tablet.
UI Design Process
Brand tone
Research trends
& inspiration
Mood boards
UI element & Iconography
Color palette
Typography
Ideation
wireframe
to UI
Refining
design
Presenting
design
Critique
& feedback
Refining
design
Prototype & animation
UI Kit
Presentation
Brand Tone
Playful: Using the product should be a joy for users. Show some personality through colour, animation and shape, but never at the cost of being intuitive.
Clear: We’re dealing with people’s money, so we need to present information in a logical and uncluttered way.
Trustworthy: Users must feel they can trust the product.
Research Trends & Inspiration
Mood Board
#005DED
#FCFCFC
#E9E9E9
Color Palette
I wanted the primary feeling to be confidence and thrustworthiness by using blue, so it is one of the prominent colors. The white and light greys are to give a polished and clear aesthetic. The green, pink and orange bring a plaufulness to the color palette. I also made the colors bright for them to pop and give a fun feel.
#72FA4A
#0B2978
#FE2DAD
#FF8C72
Typography
Every font has an impact on the user. I decided to use Nunito which is a fun and well balanced sans serif typeface for the primary font. Ubuntu pairs well with Nunito which I use as a secondary font for the Headline because of its clarity.
Primary Font
Secondary Font
Logotype
While creating the logo for ObalBank, I decided to use bright colors, a 3D effect, square and clear lines that perfectly complement the branding style of the brand.
Iconography
I picked basic and clear icons so that the app is intuitive to the user. I also used Accent Icons (different type of mason jars) to make the app playful.
Accent Icons
System Icons
Budget Categories Icons
Ideation
Experimented with different design.
Low fidelity sketch
Wireframe to UI
mobile - account screen
desktop - account screen
C
B
A
Feedback
Patrick Cusack
Visual Design Course Mentor and Lead Product Designer at Inscribe
Patrick Cusack
"I like the direction of this screen overall."
A
Patrick Cusack
"The illustrations definitely feel playful here."
B
Patrick Cusack
"This part could be simplified. It might be good to try a few variations here.
I don’t think you need the inset tab.
You could just indicate the selected item through colour or a line next to it."
I worked on different variations of the navigation and decided to eliminate the tab. Grey icons on neutral and when selected, highlighted in bleu.
D
C
Wireframe to UI - Refining Design
D
Basic wireframes
UI wireframes
E
G
I
K
M
Critique
Kelly Igoe
Student Success Manager at UX Design Institute.
Kelly Igoe
"The green and bleu are striking and the colors are definitely playful."
Kelly Igoe
"There is a good use of white space and that made your design clear."
Kelly Igoe
"The budget categories need more work. If they are not clear it can really effect the trustworthiness of the app."
E
I worked on my charts to make them more clear and selected different tones of one colour instad of several colors to make it more inclusive to people with color vision deficiencies.
F
Kelly Igoe
"The zeros in the button look odd, it feels strange to have so many zeros."
G
I removed the amount field as I realized that it wasn’t necessary. It can just appear when you press the transfer button.
H
Kelly Igoe
"It might be useful to write the names of the icons in the navigation specially on the desktop design."
I
I worked on the navigation again and changed the design to have the category names beside the icons for more clarity.
J
Kelly Igoe
"Having green in subtle hints works better. It can effect the trustworthiness of a design if used in a big section, it can look like a warning."
K
I eliminated the green in the squares sections and made it more subtle with greys. The green will only appear on hover.
L
Kelly Igoe
"It might be confusing to have the currency in euros and a dollar sign in your icons. It’s important to be consistent."
M
I changed the icon with the dollar sign with something more neutral like a wallet. I also eliminated the currency on all the numbers to make it more international and less confusing.
N
Refining Design - Final Design
F
Final design for desktop
Final design for tablet
Final design for mobile
H
J
L
N
What I learned.
Building a banking application design was a challenge. I learned so many new skills, and I’m proud of how my assignment evolved. It was my first time using Figma and I’m glad about the skills I learned and excited to improve them in future projects.
Making the UI kit requires a lot of details and thinking, and I really enjoy that step of the process. Choosing the colors, the typefaces, the logo, the icons, and the UI elements was my favorite part.
Overall, I’m happy with my assignment. I think the final look reflects all the brand principles. It was great to learn the process of transforming simple wireframes into a responsive UI banking application using different design principles, layout, and my creativity.
bottom of page