Carphone Warehouse

UI Adobe Experience Manager (AEM) Developer
Site: https://www.carphonewarehouse.com/
Date: 30/4/18 – 15/5/20

Responsibilities

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

Jaspaul.com