BankFlow is a comprehensive app that allows users to manage their bank cards and handle financial transactions with ease and efficiency. While the functionality of the app is key, its standout feature lies in its unique visual aesthetics and user interface, which I had the responsibility of designing. However, I must clarify that my involvement in the project was solely focused on the visual aspects. The wireframe and user flow were handed to me, meaning I did not take part in user research, interviews, or the analysis of pain points. My task was to bring life to the existing wireframe, focusing entirely on the app’s appearance and the overall design experience.

One of the main requests from the client was that the design should balance a dark theme with vibrant, lively colors, evoking a sense of energy while maintaining a modern and sleek aesthetic. They wanted the interface to feel dynamic, as though it were dark yet joyful, creating a positive atmosphere for users. In addition, the client emphasized the need for highly creative and engaging animations to bring the design to life, making the app more interactive and enjoyable.

Logo Design and Animation

When designing the logo, I decided to incorporate a diverse range of colors to symbolize the variety and flexibility that BankFlow offers. The app is, after all, a platform that allows users to manage multiple bank cards in one place, and I wanted the logo to reflect this versatility. The logo animation was crafted to represent cards flowing into a wallet, aligning with the core concept of the app: managing all your cards in one space. Let me show you the logo animation.

As you can see, I designed the cards in various colors and used an animation that visually simulates cards being organized within a wallet, reinforcing the primary idea behind BankFlow. The animation itself was coded entirely by me using CSS, without any JavaScript. This decision allowed for a lightweight and smooth animation while keeping everything purely CSS-based for easier implementation. The logo animation, on the other hand, was achieved through SVG animation, offering precision and scalability.

Creative Animations and Interactions

I put special emphasis on creating innovative micro-animations throughout the app to make the interface more dynamic. For instance, when users first open the app, they are greeted with an animation where the cards gently slide into view, suggesting ease of use and accessibility. This animation was also custom-coded using CSS and involved no JavaScript, ensuring optimal performance while maintaining creative fluidity.

The transitions between different cards were also designed to feel natural and smooth. Swiping between cards triggers an animation that not only moves the card visually but also conveys a sense of flow, keeping the user experience consistent with the app’s core concept. Additionally, I designed unique input field animations, ensuring that even the smallest interactions feel polished and engaging.

Another important section of the app is the transfer feature, where users can quickly swipe through their cards to select which one they want to use for transferring money. I ensured that these animations were not just visually appealing but also intuitive, enhancing the overall usability of the app.

In summary, my focus in this project was on transforming the wireframe into a visually compelling and interactive user interface. The combination of dark themes with vibrant colors, along with carefully crafted animations, aimed to deliver a joyful yet professional experience for the users. The client’s vision for a design that was both modern and lively was fulfilled through these creative elements.