Visual design
UI design
Branding
Visual design
UI design
Branding
2021
The challenger brand needs to create an aesthetically pleasing, responsive visual design for the new banking application. The design should embody a playful, clear, and trustworthy personality across all desktop, tablet, and mobile layouts.
I designed the UI for a brand-new responsive banking application for a challenger bank that wanted to make a splash in the financial sector. I had the opportunity to add more personality to the UI while still making sure it was user-friendly and intuitive, unlike the traditional, established banks.
The assignment involved choosing a bank name, collecting visuals to create inspiring mood boards, defining the design style, and creating a responsive UI design that is compatible across desktop, tablet and mobile platforms.
We were given some basic wireframes to use as a starting point, but not requirements or user research results.
The client asked me to follow established brand principles, tone and personality: playful, clear, trustworthy.
I was looking for products that use playful elements, ample white space and legible typography to create a sense of trustworthiness and clarity. I wanted to explore examples of applications that used the right colors, illustrations, fonts and photography to evoke a sense of trust.
To emphasize the concept of playfulness behind my bank, I chose the name "Free Money Bank" and the iconic $-shaped plant for its logo. The main color of this logo is green, which is associated with feelings of purity, health, and freshness. This makes it a perfect representation of the brand's core value of growth, vitality, and productivity.
I chose blue as the primary hue for this project as it evokes feelings of safety, trust and peace. To create a sense of space and give the design a clean aesthetic, I used light colors for the background. The lighter colors also allowed me to create a contrast when adding text and images. For visuals, I chose to use pink, various shades of green and blue as these colors work in harmony to convey lightness and energy.
I included square and rectangle shapes with rounded corners in my design to create a sense of stability, security, and reliability. I chose circular graphics to give the audience more time to take in the design, as they offer plenty of space to include information.
I selected the Montserrat font for headers and subtitles since it has a strong, calm, modern and fresh personality. For the rest of the text I used the Source Sans Pro font. In my opinion, it works well for clean and modern design.
The design system included all the necessary visual styles and UI components, allowing me to utilize these components for various design elements.
To make banking information easily accessible and reduce the cognitive load on users, I employed a minimalist dashboard layout. I wanted to create a clear, concise, logical, and well-organized design to enable users to quickly comprehend the interface. I employed tactics such as visual hierarchy, rules of element proximity, balance and order, white space, and card systems to ensure proper positioning and integration of design elements. Furthermore, the cards can be rearranged to create flexible and responsive screens.
I arranged the menu items in a side panel for desktop and tablet layouts in anticipation of potential new functionalities that the bank might add in the future. This arrangement allows for more items to be included in the menu, since the side panel can scale with increased item number.
After several iterations, I developed responsive designs for the "My Accounts", "Current Account" and "Transaction History" pages.
The My Accounts page provides users with a clear overview of their accounts and the transactions associated with them. To make navigation smoother, I have grouped the different kinds of accounts together with visuals such as histograms and graphics. These provide information about spending and income in a monthly, weekly or daily breakdown. Furthermore, context menus have been included so that users have easy access to the various functions associated with their accounts. For convenience, a Quick Transfer form is also available in order to facilitate fast fund transfers.
Transaction History allows users to quickly and easily compare transactions from multiple accounts on one platform. Through the selection of multiple account cards, all accounts' transaction tables will be presented in a single view. With a checkmark in the selected state, each card will also provide additional information. For an even more detailed analysis, each row in the transaction table can be expanded to reveal an even more in-depth look at the corresponding transaction.
Transparency is further achieved through the implementation of color-coded icons that signify the various types of transactions included.
The My Spending page provides an at-a-glance view of all account spending and income with an easy-to-read histogram. Additionally, users can customize and manage their budget and savings goals with interactive visuals.
One of the most enjoyable parts of this project was coming up with a name and logo that reflected the branding principles. I used what I had learned about logo design to assemble the final product. I also enjoyed designing the custom color palette to achieve a playful, clear, and trustworthy appearance. However, I wasn’t able to fully explore the UX aspects since I didn’t have access to annotated wireframes or any other details about the banking applications.
If I had had more time, I would have done my own market research, created more screens with different interactive elements and states, and come up with a higher fidelity prototype. That would have allowed me to more thoroughly explore the user experience.
