Redefining Personal Online Banking for Everyday Users
A deep dive into rebuilding an outdated banking portal into a cohesive, user-first platform across web and mobile.
“Won the award of Best Digital & Customer Experience in 2024”
To comply with my non-disclosure agreement, I have omitted and obfuscated information in this case study.
HNB’s online banking was split into two key areas: Personal and Corporate Banking. Both were long overdue for a complete redesign.
HNB had adopted a mobile-first strategy and launched a new personal banking app last year. And I had been a part of this project from concept through to launch.
With the app receiving overwhelmingly positive feedback, they chose to focus on the Personal Banking portal since they wanted to build a better experience for users.
The existing platform suffered from outdated UX patterns, poor information architecture, and an inconsistent visual language.
Having worked closely with HNB’s former Head of Design on both the mobile banking app and the SOLO app, I was trusted to lead this new initiative.
Although this was my first time designing for a large-scale web banking platform (after mainly working on mobile fintech apps), I was excited by the challenge.
By then, I had already worked on three major fintech products and felt confident in my structured, user-first approach.
I was the Senior UX Designer, responsible for redesigning the entire end-to-end personal online banking experience from research and journey mapping to UI design, stakeholder presentations, and design QA
I worked closely with our internal teams and maintained constant collaboration with key decision-makers at the bank to ensure everything stayed aligned from concept to launch.
While the workflows of retail and commercial customers vary significantly, their goals remained the same: to seamlessly manage finances, access essential features easily, and onboard with minimal friction.
The bank’s goal was to build long-term trust, increase adoption, and streamline operations. Rather than improving the outdated web platform, they chose to keep the user journeys and structure similar to mobile app so that users get a consistent experience across platforms. This allows users to comfortable switch between web and mobile without relearning the system.
💡 “The future of banking isn’t just mobile or web, it’s seamless, unified, and built around real people’s lives”
Customer Obsessed
Speed with Purpose
Think Beyond Banking
Data Driven
Built on trust & security
Maintaining constant communication with project managers on both the internal and banking side was essential to stay aligned on scope, timelines, and evolving priorities.
We created a list of “How might we…” questions to align the team around user and business needs.
How might we create a consistent, unified experience across web and mobile platforms?
How might we design flexible UI components that can accommodate future feature rollouts without disrupting the experience?
How might we provide an experience that is engaging and valuable to our customers?
As we transitioned from mobile-first to a consistent omnichannel experience, we needed to deeply understand how users interacted with the existing online banking portal, which was outdated and significantly different from the mobile app.
Our research revealed three major user types:
- Young professionals balancing personal finance and early career growth.
- Small business owners who rely on web access for daily operations.
- Elderly users who prefer web banking for familiarity but struggle with usability.
For this redesign, we focused on young professionals and small business owners, whose digital expectations were higher and whose needs were more urgent.
We reviewed four direct competitors in the banking sector to benchmark their online banking platforms. Key takeaways:
- Most offered basic features like fund transfers, bill payments, and account summaries but lacked modern UX and good responsive design.
- One competitor stood out in usability, based on online reviews and customer feedback.
- A few allowed users to generate downloadable receipts and PDFs from transaction history, a valued but often missing feature.
- There was little consistency between mobile and web platforms, creating a disjointed omnichannel experience.
These findings reinforced the need for HNB’s online portal to deliver a seamless, user-friendly experience that matched the mobile app’s success.
We mapped usability pain points in a workshop, prioritising them by task criticality, user impact, and frequency to inform phased releases.
To make strategic decisions on what features to release first, I relied on a data-driven approach known as the severity framework to guide prioritisation based on actual user pain points and business value. However, these release phases were not solely dependent on this framework, it included more input from banking side stakeholders, development team and business goals.
Severity = Task Criticality × Impact × Frequency
- Task Criticality – How essential is the task to the user? (1 = low importance, 5 = mission critical)
- Impact – How much does the issue affect the user’s ability to complete the task? (1 = minor suggestion, 5 = complete blocker)
- Frequency (%) – How often does the issue occur across users or sessions?
In majority of companies/teams, the flow looks something like this
How I made sure we deliver the best quality
With multiple teams involved from developers and QAs to stakeholders on the bank’s side, I learned how vital it is to keep communication open and simple. Regular catch-ups helped us avoid misunderstandings and stay aligned, even during fast-moving sprints.
It’s easy to get caught up in creating the “perfect” design, but I was constantly reminded that great UX needs to work within business constraints. I had to balance user needs with what was technically and commercially viable, which helped me grow stronger as a product thinker.
The scope was massive, but we had to phase the rollout. This taught me how to think modularly and planning a scalable experience that worked now but could grow later.
Because many APIs were reused from the mobile app, I had to work closely with both mobile & web developers to understand what was feasible. This helped me dive in-depth into gain more technical knowledge of the product.
By aligning the web and mobile journeys, we made the experience feel familiar and easy to use. This gave users more confidence and reduced friction.
As a proud moment for the entire team, the redesigned personal online banking experience played a key role in HNB winning the Best Digital & Customer Experience Award in 2024, recognising the impact of thoughtful design at scale.
