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 while 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.
