In Brief

One of HSBC’s largest digital transformation projects: the rebuild of their commercial banking application from the middle-tier upwards, with the middle-tier using a combination of Java and React to translate and transmit data from the existing backend to the responsive React front end application.

My Role

Leading a small team of UI developers, we produced a modern React-based replacement for the bank's aged HSBCnet application. This sat on top of an all-new middle-tier and the bank's existing content management system (AEM). Whilst a very hands-on role, I was also responsible for mentoring, pair programming, peer review and rigorous test coverage.

Photograph of the HSBC building at Canary Wharf in London.

The digital transformation of HSBC's corporate banking platform – HSBCnet – went through innumerable stages before 'proper' development began. I started at HSBC in a research capacity, testing and building prototypes and POCs. Once green-lit, I became responsible for overseeing and leading a modest-sized team of UI developers in developing the product's front-end architecture.

This became one of HSBC's largest ever digital transformation projects, eventually necessitating taking on entirely new office space next to 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: NodeJs, Redux and React (ES6 and TypeScript) on top of a mixed Java/Node middle-tier translating and transmitting APIs from the existing backend.

The front end itself is a responsive React application using Redux for state management, built using TypeScript, HTML5, CSS3, Bootstrap (this was a legacy decision rather than one I would have chosen personally), and Less (following BEM methodologies). This also used end-points translated from the bank's legacy AEM system (now relegated to a headless CMS) for content management and internationalisation.

This was a very hands-on role where I was directly accountable for the output of the UI team. We introduced strict quality control by way of pair-programming, peer review, pre-commit linting (using the Airbnb Styleguide) and rigorous test coverage using Jasmine. From the start, we also used and maintained a Storybook component library which helped to document our output and allowed our work to be shared across other teams.

At launch the platform was well received by stakeholders and customers alike, and achieved AAA accessibility. These points were extremely important as often users spend their entire working days using the platform.

As the project became commercially viable, ongoing maintenance was shifted offshore. I subsequently worked on a standalone React Native banking application (which was later taken forward by First Direct and forms the basis for their customer-facing iPhone application), before moving to aid development on their new internal Loans and Trading platform.

Wireframe of the HSBCnet All Accounts page, desktop screen size.
Screenshot of the HSBCnet application All Accounts page, desktop screen size.
Wireframe of the HSBCnet Account Details page demonstrating the 'more information' drawer, desktop screen size.
Screenshot of the HSBCnet application All Accounts page with 'more information' drawer opened, desktop screen size.
HSBC PDF statement generated via the platform.
Screenshot of the HSBCnet PDF generation options: defines how many columns to display, and what each column should contain.  Desktop screen size.