In my role as Head of Design at Almosafer and Metro Bank, I faced the challenge of unifying fragmented customer experiences across various digital platforms, product funnels, and tech teams. The absence of a cohesive design system resulted in inconsistencies and frustrations for users.

My goal was to address the challenge by implementing a meticulous 3-step process to create a unified design system. This aimed to reduce inconsistencies, improve design speed, and enhance overall user experience and customer perception of the brand and its products. The process involved auditing existing components, integrating base code into digital products, creating global and local systems for design and engineering, establishing standards and processes for UX, UI, Interaction Design and QA - ensuring adherence to design standards.

To address the challenge, I implemented a comprehensive 3-step process. In Phase 0, we audited, removed, conflated, rebuilt, and tokenised components in FIGMA. In Phase 1, we integrated the base code from FIGMA Design System into digital products, ensuring consistent use of shared components. In Phase 2, product teams coded unique components, rebuilt funnel pages, and adhered to Google Material Design standards.

‍

The impact of this initiative was transformative, with a 50% reduction in delivery effort and design speed for design and engineering. Our streamlined process enabled the design and launch of two new products within six months during the Covid Pandemic, allowing Almosafer to pivot and explore other revenue streams. It significantly accelerated time-to-market, reduced internal feedback rounds with product teams, enhanced collaboration with product and engineering teams, and improved event tracking accuracy. This comprehensive approach to fully coded design systems exemplifies my design leadership in creating scalable, consistent, and efficient digital experiences while unifying multiple business divisions for a better user experience.