Project Overview
To create the UI for a new responsive banking application. Your client is a challenger brand looking to make waves in the financial world. They want an intuitive app that will help them stand out from the crowd. The design must relflect their brand principles of simple, playful and trustworthy.
My Contributions
In response to the brief, I created Tudo Banking—a vibrant and inviting banking platform that seamlessly allows users to oversee all their banking accounts from one unified interface accessible across desktop, tablet, and mobile devices. Using Figma, I crafted a responsive user interface and meticulously assembled a unified design system, organized into atoms, molecules, and organisms.
Branding
'Tudo' translates to 'all' or 'everything' in Portuguese, the design philosophy aligns with the inclusive nature of the brand and the brand principle of simplicity. Tudo takes the conventional stress of online banking away and puts you in control of all your money from one place.
In establishing the visual branding for the app, I opted for dark purple, a colour associated with wealth and royalty, aiming to convey professionalism and enhance accessibility. I decided to use this colour to as the foundation for the app's visual identity.
I incorporate modern abstract illustrations to convey playfulness and energy into the app's design through vibrant colours and abstract forms. This visual style is intended to create a light-hearted and welcoming atmosphere for users, distinguishing the app from its competitors.
In establishing the visual branding for the app, I opted for dark purple, a colour associated with wealth and royalty, aiming to convey professionalism and enhance accessibility. I decided to use this colour to as the foundation for the app's visual identity.
I incorporate modern abstract illustrations to convey playfulness and energy into the app's design through vibrant colours and abstract forms. This visual style is intended to create a light-hearted and welcoming atmosphere for users, distinguishing the app from its competitors.
Development
The development phase commenced with low-fidelity wireframes, where the app's blueprint was mapped out to display the foundational structure for pages and establish how I'd create a cohesive user experience. I regularly revisited prior research and competitor analysis to confirm what was expected for a functional banking application.
When producing the high-fidelity wireframes, I focused on capturing the overall aesthetic of the app, providing a visual foundation for the upcoming development stage.
With the high-fidelity wireframes, I delved into envisioning and capturing the overall look and feel of the app. I wanted to create a foundational understanding of the app’s appearance in preparation for the development stage.
During the design development, I explored various visuals and colour combinations. The iterative nature of the double-diamond process proved invaluable during the ideation phase, allowing for continuous exploration of new directions. Without a predetermined set of guidelines, I was able to explore and experiment at full capacity.
My initial designs were focused on achieving professionalism but evolved once I received feedback from potential users. They revealed that the lack of plays didn't make the brand particularly stand out. Introducing the illustrations injected energy and personality without compromising professionalism, enriching the brand identity.
Leveraging the developed design system, I seamlessly integrated the new illustrations into the app, utilizing reusable components structured into atoms, molecules, organisms, and widgets. This design system not only ensured consistency but also significantly streamlined the production of new pages.
Prototyping the final design in Figma showcased the app's interactive elements intentionally designed to stimulate engagement. Animated components and characters not only enhanced user interaction but also provided additional security measures, for example, hidden bank balances.
To create a clean and user-friendly interface I incorporated drop-downs and scrolls that revealed another layer of information. Furthermore, I introduced an engaging avenue for users to interact and enjoyably gather rewards. My goal was to use gamification to cultivate a playful experience that motivates a positive brand perception.
