UI Adobe Experience Manager (AEM) Developer
Date: 30/4/18 – 15/5/20
- Checkout security update with 3D secure authentication
- Trade-in your device API – integration across entire site
- AEM – Develop UI Responsive Modules within AEM 6.
- Angular components development
- Site speed & optimisation – lazy load, image optimisation
- Scene7 Image optimisation integration
- Release/Deployment support
- Documentation and introduction of technologies e.g. LESS
- Development of Site main navigation for Desktop and Mobile
- Insurance project development
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 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.
- Images introduced with
- 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
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