HSBC Corporate
Banking
Lead UI developer for HSBC digital transformation initiatives, including a full React, TypeScript, Node.js, and AEM rebuild of commercial banking applications.
In Detail
HSBCnet's corporate banking transformation went through several research, prototyping, and proof‑of‑concept stages before the main delivery phase began. I started in a research capacity, testing and developing prototypes, then moved into a lead UI role once the programme was approved.
I led a small team of UI developers responsible for the front‑end architecture of the new commercial banking application. The wider programme became one of HSBC's largest digital transformation projects, eventually involving thousands of developers across HSBC and related workstreams.
The final product rebuilt the commercial banking application from the middle tier upwards. A mixed Java and Node.js middle tier bridged legacy back‑end services into a new responsive React application, built with Redux, TypeScript, HTML5, Less, and BEM.
AEM remained part of the architecture, but its role shifted towards headless content management and internationalisation. That meant the front end had to combine complex banking workflows, legacy system constraints, content‑managed copy, and international requirements in a coherent application experience.
This was a hands‑on leadership role. I was directly accountable for UI team output, code quality, peer review, pair programming, and mentoring. We used pre‑commit linting, the Airbnb JavaScript Style Guide, Jasmine test coverage, and a Storybook component library to document components and share work across teams.
Accessibility was a critical success measure. Many HSBCnet users spend large parts of their working day inside the platform, so the goal was to reduce friction, improve focus, and support complex commercial banking workflows whilst working towards AAA compliance.
As the project moved into ongoing operation, I spent two months helping onboard the offshore maintenance team before handing over. I later worked on a standalone React Native banking application and then supported development on HSBC's internal Loans and Trading platform.
Accounts Overview Screen
The accounts overview presented users with account values immediately after login. Because commercial banking interfaces are data‑heavy by nature, accounts were grouped by currency type, with filtering, sorting, and persisted preferences helping users return to the view they needed.
Account Transactions Screen
Commercial banking screens need to expose a large number of tasks and tools without overwhelming the primary workflow. The Account Transactions screen presented key transaction details at a glance, with more complex functionality available through transaction‑specific drawers.
PDF Statement Generation
Statement and report generation had historically caused friction for users. The tool we developed allowed customers to define and order the columns they needed, preview the statement inside the application, then export it as a fully branded PDF or request a physical copy by post.
- "
John Kavanagh was undoubtedly the best UI developer on the programme (often carrying the burden of his team) and played a crucial role in rebuilding the look and feel of the bank's global online platforms. John was always articulate, willing to speak his mind, helpful and always did an amazing job ‑ he clearly takes immense pride in his work (and rightly so!). His attention to detail and perfectionist attitude helped produce a product that we could be proud of, despite the extremely difficult environment we had to work in.
John would suit any senior or lead UI developer roles and I would have no hesitation in recommending him."
- "
I initially worked with John Kavanagh at Style.com where we built an e‑commerce site for Condé Nast. We built numerous versions of the site for prototypal purposes and finally went live with a version that contained the majority of work from John and his team. Always punctual, proactive and willing, he's definitely one to have in any development team. Since then we went on to work together again at HSBC where we built a number of key React components. He's a great team player who takes a lot of pride in his work, I'd highly recommend him."
- "
John Kavanagh was a real asset for the project. Not only did he quickly pick up the different frameworks used in the programme but his attention to detail and proactive approach were key for challenging deadlines and changing requirements."
