"My methodical and outcome-driven approach enabled rapid delivery, aligning business needs with design execution in record time."
Introduction
Following HSBC Bank’s acquisition of Marks & Spencer Bank, I was tasked with developing a complete Design System based on HSBC’s existing components and visual standards. Leveraging the Atomic Design methodology, I was able to efficiently map and migrate the old M&S website structure to newly designed components within the Adobe Experience Manager (AEM) framework.
The transition was executed quickly and effectively, ensuring visual consistency and seamless integration within the HSBC digital ecosystem.
Industry
Banking, B2C Services
Technology
Web, AEM, RIA
Teams
Cross-functional
Projet
Agile, Scrum
Approach
To accelerate the process, I applied the Atomic Design methodology strategically from day one. I used HSBC’s existing component system as a foundation and systematically mapped the M&S site structure onto new, scalable components within the Adobe Experience Manager (AEM) platform.
Thanks to this modular, system-based approach:
The full UI redesign for M&S Bank was completed within just one week
The mapping and adaptation of legacy features to new components took only three weeks
In just one month, the complete design transformation was finalized — including structure, layout, interaction design, and full system alignment — laying the groundwork for the longer-term development and data migration process handled by downstream teams.
Throughout the project, I ensured visual and functional consistency with HSBC’s digital standards, enabling a seamless experience across both brands under the unified umbrella.
Challenge
Following HSBC Bank’s acquisition of Marks & Spencer Bank, there was a critical need to rapidly unify the digital presence of both institutions. The M&S Bank website had to be fully redesigned and integrated into the HSBC design and technology ecosystem — all while maintaining brand recognition, regulatory compliance, and user experience standards. The key challenge was to deliver this transformation under tight time constraints, without compromising quality.
Services
- UI redesign for M&S Bank under HSBC brand standards
- Atomic Design methodology for strategic speed and reusability
- Mapping and transformation of legacy components
- Design System alignment with HSBC’s visual language
- AEM component configuration for scalable rollout
- Collaboration with dev and migration teams for implementation continuity