Carphone Warehouse

UI Adobe Experience Manager (AEM) Developer
Date: 30/4/18 – 15/5/20


  • ReactJs – Insurance component calling multiple API for content and prices. Integrated into AEM.
  • Checkout system – 3D secure authentication integration on checkout page
  • W3C Digital Data Layer 1.0 – developed layer with analytic third party libraries
  • Rest API – JS Integration across entire site of ‘Tradein device’ project via API and Cookies
  • AEM 6 – Develop UI Responsive components
  • Angular – component development of ‘Phone finder’
  • Site speed & optimisation – lazy load, DAM image optimisation, Font compression, CSS & Javascript optimisation
  • Major projects – development of main site navigation, homepage, Insurance and cookie policy
  • Release/Deployment support
  • Wiki Documentation and introduction of technologies e.g. LESS, Data layer, Components and Plugins

Checkout security update with 3D secure authentication

The checkout page needed urgent update to comply with the Payment services (PSD 2) – EU Directive. 3D secure authentication was also introduced which verify the customer card details directly from the bank.

In order to develop the solution we integrated with a third party Payment Services called Verifone.



Enhanced Trade-in journey

Solution To help customers afford the latest phones we completely overhauled our trade in customer journey. making it easier for customers to sell or recycle their old device(s) for cash to put towards their next purchase.

Coding updates touched every page of the entire website. Utilising the user session to show the trade-in device information whilst the user is browsing across any page.

Trade-in device prices and conditions were retrieved via API and information stored on users session.


Insurance component

Insurance component integrated into AEM. The content is populated from backend and the UI module made flexible for unlimited amount of content. The module is also responsive.

Device changer

Component developed in AngularJS pulling in JSON data from Search & Promote REST API. The component allows you to find a device and model based on manufacturer. Once the device has been selected a final call will be made to pull in tariffs and deals for the device.

Site optimisation

  • Images introduced with tag to load responsive images
  • Lazy loading of images using Intersection Observer
  • Utilising Adobe Scene7 (dynamic imaging) to auto resize, compress and crop images uploaded by editors
  • Introduction of LESS to reduce repetition of CSS and manage settings and values by variables
  • Font icon library to replace png icons. This resulted in sharper images with ability to change colours and sizes
  • Font compression to woff2. We noticed almost a 60% compression of fonts on initial load
  • Javascript name-spaced layers introduced. Features like modals, api, analytics were moved behind a namespace layer to encourage all developers to code through this. Meant less repetition and duplication of code and flexibility to change features without effecting too many pages
Main site navigation redesign

I developed the main site navigation with the guidelines from design team. The new navigation was taken through rigorous testing, research and user testing. Once this was ready for implementation I ensured

  • API layer for interaction with Nav features
  • Code cleanup and reduction
  • Fully responsive
  • Introduction of SVG icons
  • Lazy loading of adverts in navigation


Leave a Reply