HSBC Corporate
Banking
Lead developer for HSBC's digital transformation initiatives, including a full rebuild of their commercial banking applications with Node.js and React.
In Detail
The digital transformation of HSBC's corporate banking platform – HSBCnet – went through countless stages before 'proper' development began. I started at HSBC in a research capacity, testing and developing prototypes and POCs. Once the project was green‑lit, I oversaw and led a modest‑sized team of UI developers tasked with developing the product's front‑end architecture.
This became one of HSBC's largest‑ever digital transformation projects to date, eventually necessitating entirely new office space next to the Tate Modern to house the 3,000+ developers working on it and its ancillary projects.
The final product was a complete rebuild of their commercial banking application, from the middle‑tier upwards, on an exclusively modern stack: Node.js, Redux, and React (ES6 and TypeScript) on top of a mixed Java/Node.js middle‑tier, which bridged the legacy back‑end to our new, responsive React application.
The front end is a responsive React application with Redux for state management. It was built using TypeScript, HTML5, and CSS3/Less (following BEM methodologies). Bootstrap was used due to legacy decisions, though not one I would have chosen personally. This also used endpoints translated from the bank's legacy AEM system (now relegated to a headless CMS) for content management and internationalisation. I have since worked on a number of other projects involving legacy AEM installations and shifting those to headless architecture. It is never straightforward!
This was a very hands‑on role where I was directly accountable for the output of the UI team. We introduced strict quality control through pair programming, peer review, pre‑commit linting (using the Airbnb Style Guide) and rigorous test coverage using Jasmine. From the start, we also developed and maintained a Storybook component library, which helped to document our output and allowed our work to be shared across other teams.
The platform launched to strong stakeholder and customer approval, with accessibility a critical measure of success. With many users spending their entire working days in HSBCnet, our goal was to reduce friction, improve focus, and create an experience that genuinely supported their workflows, all whilst achieving AAA compliance.
As the project became commercially viable, ongoing maintenance was shifted offshore. I spent two months bringing the new offshore team up to scratch before handing the project over to them. Subsequently, I worked on a standalone React Native banking application (which was later taken forward by First Direct and formed the basis for their existing customer‑facing iPhone application); before moving to aid development on their new internal Loans and Trading platform.
Accounts Overview Screen
When first logged in, the user is presented with an overview of their accounts and their values. Data‑heavy interfaces can often feel overwhelming, so some preliminary categorisation is done to separate accounts into currency types. This table can be further filtered and sorted to suit, with these selections stored for future visits.
Account Transactions Screen
As you might imagine, the number of tasks and tools that need to be embedded into a commercial banking application ‑ whilst simultaneously being easy to use and access ‑ is large. In the Account Transactions screen, the user is presented with all important details at a glance, whilst more complex functionality is accessible via transaction‑specific drawers.
PDF Statement Generation
A piece of functionality that had consistently caused friction for users in the past had been generating reports and statements via the application. The tool we developed allowed customers to define and order the columns they needed, displaying a live in‑app preview. They could then export this as a fully‑branded PDF or request a physical copy via the post.
