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 forty 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 Details 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 when it was clear the user intent would require it. 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% (again, with no discernible benefit or obstruction 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 first outing for the new 'John Lewis & Partners' branding was combined with the 2019 Christmas advert (something John Lewis is renowned for): Bohemian Rhapsody.