John Lewis
& Partners
Senior front‑end developer as part of team 'Findability'. This project covered the rebrand and significant optimisation of one of the UK's largest chains of high‑end department stores and online retailers.
In Detail
In early 2018, I joined John Lewis as a senior front‑end developer primarily attached to 'Findability' – an eclectic and high‑energy team responsible for maintaining and improving the customer's journey through the site. In a nutshell, Findability makes sure that visitors to the John Lewis website can quickly and easily find what they are looking for.
Attracting in the region of twenty million visitors each month and allowing customers access to over 160,000 products, the johnlewis.com website was a monolithic beast: a dusty Java inventory system with a Java‑based middle‑tier alongside AEM for content, and a front end primarily built in Handlebars with Sass and vanilla JavaScript. Testing was covered via Groovy and client‑side unit tests, whilst additional A/B testing came via New Relic and Monetate.
Where responsibilities for different areas of the site had started to be divvied up amongst the various teams, a small amount of standalone React had also made an appearance within the codebases.
The remit was wide: as a team, we owned the site‑wide header and footer, the technology behind the search engine, the product listing pages and filtering mechanisms, and eventually the product details pages, too, amongst many others.
During my time at John Lewis, my team and I introduced countless improvements, optimisations and new features, including an intelligent 'chunk loading' system, which allowed us to introduce infinite scrolling to the Product Listing page whilst retaining the chunk‑based delivery from the back‑end. This used localStorage to keep track of data on‑page and position, whilst only calling for additional data as the user moved further through the results. This reduced page load times significantly, increasing users' ability to find what they were looking for and removing redundant calls back to the serving infrastructure.
Another performance issue my team and I tackled very early on was a culling of third‑party scripts and clutter loaded onto the page. At the start of our audit, nearly forty different third‑party scripts were being brought in at load time. This was delaying page load speeds considerably and ‑ to make matters worse ‑ many of these scripts were actively listening and processing on‑screen events like scroll. This was making pages across the site unresponsive and janky for end‑users and made developing new features for the site much more complex, all the while adding very little, if anything, beneficial to those users.
It fell to me to catalogue these third‑party scripts and their performance impact, and then try to trace which team within John Lewis originally introduced them. Fun!
Over the course of several months, our team reduced this third‑party bloat by over 75% (with no discernible detriment to the end‑user). In turn, this drastically improved site performance and reduced bounce rate. But, frustratingly, in many cases, these third‑party scripts had long since been forgotten about: introduced by teams who had then forgotten to take them out again when they had served their use.
The largest piece of work I was involved in was already nearly two years in motion when I joined: the rebranding and repositioning of John Lewis and Waitrose to 'John Lewis & Partners' and 'Waitrose & Partners' respectively. Internally, this was known as 'Project B', whilst 'Project A' referred to the pre‑existing branding, look and feel.
Moving away from a warm and green feel to a much more minimalist and monochrome appearance online was a significant task. So, over several months, we put together a concise style guide and matrix of every on‑site element that would need to change due to the rebrand.
This rebrand allowed us the opportunity to purposefully refactor and standardise a lot of the codebase, consolidating almost every styling element into Sass variables, which could then be switched via a feature switch at build time. The result was two identical versions of the site running side‑by‑side and a simple feature toggle on the morning of 4th September 2018.
Rebranding Guidelines
As you might expect from a process that had stretched over more than two years, the new branding guidelines were considered and comprehensive. The number of PLP grid item variations is an excellent example of just how convoluted the different options and additions to a product could be, all of which needed catering for...
Homepage: A vs. B
The homepage was arguably the most important part of the redesign: the first new page many visitors would arrive at. This was rebuilt in React and integrated with an existing AEM configuration, allowing content creators more customisation than the previous 'Brand A' variant had. With this version, it was possible to manage the presiding marketing content, pull in related and relevant products to highlight, and even change the logo for occasions such as Pride.
Product Listing Page
Filtering and navigating through Product Listing Pages on the John Lewis website had been identified as a pinch‑point for customers (a common problem in larger e‑commerce platforms where the options and variety can make categorisation difficult). So, as a part of team Findability, this fell under our remit and was extensively rebuilt and restructured (particularly for mobile users) to help customers find what they are looking for.
Product Details Page: A vs. B
Aside from an extensive reworking during the rebrand, the PDPs also underwent considerable change under my tenure. What had become a convoluted jumble of legacy logic and spaghetti code over several previous iterations (and previous developers) became the responsibility of my team and me. This was carefully extracted out into React components with customisation options and variation logic offset as far as was possible to the back end.
The Big Reveal
The new 'John Lewis & Partners' and 'Waitrose & Partners' identities were launched together in September 2018, accompanied by the 'Bohemian Rhapsody' campaign. Built around the line, "When you're part of it, you put your heart into it", the campaign introduced the new branding whilst emphasising the Partnership and the people behind both businesses.
The Outcome
Over eighteen months at John Lewis, my work spanned both the existing e‑commerce platform and its gradual transition towards React, alongside the successful launch of the 'John Lewis & Partners' rebrand. As part of Findability, we also made substantial improvements to some of the site's most heavily used customer journeys, whilst reducing third‑party bloat by more than 75% and significantly improving performance across the platform.
- "
John Kavanagh is one of the best front‑end developers I've had the pleasure of working with. Incredibly knowledgeable, great attention to detail – he understands design and why it's important to get it right, and he's also very experienced coding for accessibility. Always professional but with a great sense of fun, John would be an asset to any team and project."
- "
John Kavanagh is enthusiastic and enjoys getting work completed, he is happy to challenge priorities where he sees there is a quicker ROI to be made from his development. His opinion on how we have developed features has been key to our success this financial year. He is fun to work with, always vocal and the dynamic he brought with PO/UX/UI has driven us to deliver better quality features faster than before."
- "
I have worked with John Kavanagh at John Lewis on a team responsible for the most demanding pages on the website. John is a very skilled UI developer, very proactive, pragmatic and a fast thinking guy.
He has always a very strong and valid opinion; I look at him as 'the guy who delivers the job': is always available and always has a valid working solution to share."
