Case Study
Case Study
BankOn: A UI Redesign for a Playful, Clear, and Trustworthy Experience
BankOn: A UI Redesign for a Playful, Clear, and Trustworthy Experience
UI Design
UI Design
Playful
Playful
Creating a vibrant and engaging experience that resonates with younger audiences while retaining the professional essence of a banking institution.
Creating a vibrant and engaging experience that resonates with younger audiences while retaining the professional essence of a banking institution.
Clear
Clear
Ensuring that users can easily navigate the platform, understand the offerings, and perform actions without confusion.
Trustworthy
Trustworthy
Embedding cues and elements that reassure users of the platform's security and the bank's reliability.
Redefining the Digital Banking Experience
Redefining the Digital
Banking Experience
BankOn, a financial institution with a robust digital presence, sought to refresh its user interface to better align with its brand principles: Playful, Clear, and Trustworthy. As the UI designer on this project, I was tasked with creating a vibrant yet professional interface for the bank's website and mobile app. The challenge was to balance creativity and clarity, ensuring users felt engaged and secure while navigating the platform.
BankOn, a financial institution with a robust digital presence, sought to refresh its user interface to better align with its brand principles: Playful, Clear, and Trustworthy. As the UI designer on this project, I was tasked with creating a vibrant yet professional interface for the bank's website and mobile app. The challenge was to balance creativity and clarity, ensuring users felt engaged and secure while navigating the platform.
Crafting a Visual Identity
Crafting a Visual Identity
Drawing inspiration from dynamic gradients, fresh colour palettes, and fluid design patterns, I developed a mood board that embodied the brand's playful yet straightforward and trustworthy ethos. The design needed to exude vibrancy while remaining intuitively easy to navigate.
Colour Palette: I selected a mix of vibrant hues to evoke playfulness, balanced with solid, grounded tones that reinforced trust. This combination ensured that the interface was visually engaging yet conveyed reliability.
Typography: The choice of typography was crucial. I opted for modern and playful fonts yet maintained high readability, ensuring users could easily digest content across different platforms.
Iconography: Icons were designed to be fresh and intuitive, adding a playful touch while guiding users effortlessly through their tasks. Each icon was crafted to be functional and visually appealing, contributing to the overall user experience.
Imagery: The imagery chosen was inclusive, representing diverse users to ensure that BankOn's offerings felt universal and welcoming to all demographics.
Drawing inspiration from dynamic gradients, fresh colour palettes, and fluid design patterns, I developed a mood board that embodied the brand's playful yet straightforward and trustworthy ethos. The design needed to exude vibrancy while remaining intuitively easy to navigate.
Colour Palette: I selected a mix of vibrant hues to evoke playfulness, balanced with solid, grounded tones that reinforced trust. This combination ensured that the interface was visually engaging yet conveyed reliability.
Typography: The choice of typography was crucial. I opted for modern and playful fonts yet maintained high readability, ensuring users could easily digest content across different platforms.
Iconography: Icons were designed to be fresh and intuitive, adding a playful touch while guiding users effortlessly through their tasks. Each icon was crafted to be functional and visually appealing, contributing to the overall user experience.
Imagery: The imagery chosen was inclusive, representing diverse users to ensure that BankOn's offerings felt universal and welcoming to all demographics.
Now, let's have a look to The BEFORE
Now, let's have a look to The BEFORE
Bringing the Vision to Life: The AFTER
Bringing the Vision to Life: The AFTER
Homepage: The homepage featured a playful hero banner with dynamic gradients and engaging visuals. Clear call-to-actions (CTAs) and trust indicators, such as testimonials and security badges, were strategically placed to guide users and reinforce the bank's reliability.
Product Pages: I used vibrant icons to represent different banking products, ensuring each page was informative and visually appealing. The content layouts were designed to be clear and accessible, making it easy for users to find the needed information.
Mobile App: The playful essence was carried over to the mobile app, with easy navigation that ensured users experienced the same vibrancy and trustworthiness as on the desktop version. The responsive design seamlessly transitioned from desktop to tablet to mobile, maintaining brand consistency across all touchpoints.
Homepage: The homepage featured a playful hero banner with dynamic gradients and engaging visuals. Clear call-to-actions (CTAs) and trust indicators, such as testimonials and security badges, were strategically placed to guide users and reinforce the bank's reliability.
Product Pages: I used vibrant icons to represent different banking products, ensuring each page was informative and visually appealing. The content layouts were designed to be clear and accessible, making it easy for users to find the needed information.
Mobile App: The playful essence was carried over to the mobile app, with easy navigation that ensured users experienced the same vibrancy and trustworthiness as on the desktop version. The responsive design seamlessly transitioned from desktop to tablet to mobile, maintaining brand consistency across all touchpoints.
Refining the Design
Refining the Design
After the initial design presentation, feedback from stakeholders indicated a desire for even more playfulness in certain elements. I iterated on the design, enhancing the vibrancy of crucial features while ensuring that clarity and trust were never compromised. This iterative process was critical to fine-tuning the balance between a playful aesthetic and the functional needs of a banking platform.
After the initial design presentation, feedback from stakeholders indicated a desire for even more playfulness in certain elements. I iterated on the design, enhancing the vibrancy of crucial features while ensuring that clarity and trust were never compromised. This iterative process was critical to fine-tuning the balance between a playful aesthetic and the functional needs of a banking platform.
Conclusion: A Harmonious Blend of Playfulness and Professionalism
Conclusion: A Harmonious Blend of Playfulness
and Professionalism
Conclusion: A Harmonious Blend
of Playfulness and Professionalism
The UI redesign for BankOn was a rewarding challenge that pushed me to explore the intersection of creativity and usability. The final design rejuvenated the bank's digital presence and ensured users felt engaged and secure across all platforms. The project successfully conveyed BankOn's brand message—Playful, Clear, and Trustworthy—across every touchpoint, creating a cohesive and enjoyable user experience.
The UI redesign for BankOn was a rewarding challenge that pushed me to explore the intersection of creativity and usability. The final design rejuvenated the bank's digital presence and ensured users felt engaged and secure across all platforms. The project successfully conveyed BankOn's brand message—Playful, Clear, and Trustworthy—across every touchpoint, creating a cohesive and enjoyable user experience.
Want to work together?
Want to work together?
Feel free to reach out at
Feel free to reach out at