Case Studies

Condé Nast
Style.com

Senior front‑end development for Condé Nast's Style.com, a curated e‑commerce marketplace spanning fashion, beauty, and technology, integrated with Condé Nast's wider publishing estate.

Screenshot of the Style.com website; part of John Kavanagh's selected project work.

In Brief

Style.com was Condé Nast's curated e‑commerce marketplace, bringing together editorial content with products from emerging and established fashion, beauty, and technology brands. Less than a year after launch, Condé Nast entered into a partnership with Farfetch, which acquired the Style.com trademarks, platform, and website.

My Role

I joined Style.com during its early prototype phase as part of a small, multidisciplinary engineering team. As the product moved beyond proof of concept, I took on a senior front‑end role and helped expand the engineering team. I contributed to the development of a complex, high‑traffic e‑commerce marketplace integrating Condé Nast's online and print publishing estate with hundreds of vendor stock systems.

Technologies

style.com
  1. HTML5 & SCSS
  2. ClojureScript
  3. Clojure
  4. Node.js
  5. JAVA
Photograph of a London Black Taxi with Style.com advertisements on it, on Westminster bridge, with Big Ben in the background.

In Detail

I joined Style.com during its early R&D phase, working on a prototype that transformed data from a Hybris e‑commerce engine. As the product moved towards production, the engineering work split into two streams: a UI team responsible for the front end, where I took on a senior role, and an API team using HapiJS and Node.js to transform product and stock data from Hybris and external vendor platforms.

That architecture allowed Style.com to operate as a marketplace, displaying and selling stock directly from partner brands whilst still presenting the experience as a curated Condé Nast product. The challenge was to bring editorial content, product discovery, vendor data, and commerce flows together within a single coherent platform spanning fashion, beauty, and technology.

As the project grew, the team moved from its early working space into new premises in Camden and began hiring developers, editors, and data specialists from across Condé Nast and beyond.

On the front end, we chose not to keep building the production product on top of the prototype. Instead, the team moved to a standalone isomorphic web application built with Clojure and ClojureScript, using HTML5 and CSS animation to deliver the highly polished, responsive interface expected of a global Condé Nast commerce product.

Alongside the marketplace, my team produced a single‑file JavaScript plugin, written in ClojureScript, for integration across Condé Nast's online publications. It used a bespoke AI engine to interpret editorial context and surface relevant Style.com products directly within article content.

Less than a year after launch, Condé Nast and Farfetch entered into a partnership which saw the Style.com trademarks, platform, and website acquired by Farfetch. Elements of the original Style.com work were subsequently carried into the Farfetch platform.

Homepage

The homepage was designed to feel curated and editorial rather than purely transactional. It combined introductory video, selected products, and editorial features, with page structure, media, and merchandising controlled through the Hybris content management system.

Screenshot of the Style.com homepage, mobile screen size.Screenshot of the Style.com homepage, tablet screen size.
Screenshot of the Style.com homepage, desktop screen size.

Product Listing Page

The product listing page prioritised product imagery and browsing clarity. Sidebar navigation could collapse when not in use, giving products more visual space, whilst category navigation and filters helped users refine by product type, size, colour, and material.

Screenshot of the Style.com Product Listing Page (fashion variant - coats), desktop screen size.

Product Details Page

Product detail pages needed to accommodate distinct product categories across fashion, beauty, and technology, whilst maintaining a consistent shopping experience. The layouts placed strong emphasis on carefully selected imagery, with purchasing options anchored to the right‑hand side on desktop.

Mobile behaviour was critical. Analytics showed that more than 75% of visitors were using devices under 600px wide, so the product experience was designed with smaller touch‑screen devices as a primary consideration rather than a secondary adaptation.

Wireframe of the Style.com Product Details page, desktop screen size.Screenshot of the Style.com Product Details page (beauty variant - a lipstick), desktop screen size.
Screenshot of the Style.com Product Details page (fashion variant - a black dress), desktop screen size.Screenshot of the Style.com Product Details page (fashion variant - a black dress), mobile screen size.
Screenshot of the Style.com Product Details page (technology variant - a pair of earphones), desktop screen size.Screenshot of the Style.com Product Details page (technology variant - a pair of earphones), mobile screen size.

Need senior
delivery support?

I can work close to the code while helping shape the technical decisions, delivery path, and trade‑offs around the project.