Easily manage your money and have fun doing it.
UI concept for Banking application
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.
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.
Obal bank is a cross-platform application for iOS and Android. It can be used on mobile, desktop and tablet.
UI Design Process
UI element & Iconography
Prototype & animation
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
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.
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.
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.
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.
Budget Categories Icons
Experimented with different design.
Low fidelity sketch
Wireframe to UI
mobile - account screen
desktop - account screen
Visual Design Course Mentor and Lead Product Designer at Inscribe
"I like the direction of this screen overall."
"The illustrations definitely feel playful here."
"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.
Wireframe to UI - Refining Design
Student Success Manager at UX Design Institute.
"The green and bleu are striking and the colors are definitely playful."
"There is a good use of white space and that made your design clear."
"The budget categories need more work. If they are not clear it can really effect the trustworthiness of the app."
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.
"The zeros in the button look odd, it feels strange to have so many zeros."
I removed the amount field as I realized that it wasn’t necessary. It can just appear when you press the transfer button.
"It might be useful to write the names of the icons in the navigation specially on the desktop design."
I worked on the navigation again and changed the design to have the category names beside the icons for more clarity.
"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."
I eliminated the green in the squares sections and made it more subtle with greys. The green will only appear on hover.
"It might be confusing to have the currency in euros and a dollar sign in your icons. It’s important to be consistent."
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.
Refining Design - Final Design
Final design for desktop
Final design for tablet
Final design for mobile
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.