Case Studies

Condé Nast
Style.com

Senior frontend development for Condé Nast's Style.com, a fashion and technologyled ecommerce marketplace integrated with its wider print and web portfolio.

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

In Brief

Style.com was Condé Nast's fashion and technologyled ecommerce marketplace, combining curated editorial content with products from emerging and established fashion, beauty, and technology brands. The platform was later absorbed by Farfetch following Condé Nast's partnership with the company.

My Role

I joined Style.com during its early prototype phase as part of a small, multidisciplinary engineering team. After the proof of concept, I moved into a more senior frontend role and helped expand the engineering team. We developed a complex, hightraffic fashion and technologyled ecommerce marketplace that integrated with Condé Nast's online and print publishing estate and connected to 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 ecommerce engine. As the product became viable, the work expanded into two distinct streams: a UI team responsible for the front end, where I became a senior member, and an API team using HapiJS and Node.js to transform product and stock data from Hybris and vendor ecommerce platforms.

That architecture allowed Style.com to operate as a marketplace, displaying and selling stock directly from partner brands while still presenting the experience as a curated Condé Nast product. The challenge was not only to build a polished fashion and technologyled ecommerce marketplace, but to connect editorial content, product discovery, vendor data, and commerce flows into one platform.

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 final 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 create a highquality interface suited to the brand and its expected audience.

Alongside the marketplace, my team also produced a singlefile JavaScript plugin, written in ClojureScript, for Condé Nast's online publications. It used a bespoke AI engine to identify editorial context and display relevant Style.com products directly within publication content.

Less than a year after launch, Condé Nast and Farfetch forged a partnership that saw the trademarks, platform and website acquired by Farfetch. Much of the original work we did at Style.com remains in use on the Farfetch website today.

Homepage

The homepage was designed to feel curated and editorial rather than purely transactional. It combined introductory video, selected products, and editorial content, with page content, media, and layout 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 fold away when not in use, allowing the products to take visual priority, while categorised navigation and filters helped users refine by product type, size, colour, and materials.

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

Product Details Page

Product detail pages needed to support different product categories, including fashion, beauty, and technology. The layouts placed strong emphasis on carefully selected imagery, with purchasing options anchored to the righthand side on desktop.

Mobile behaviour was critical. Analytics showed that more than 75% of visitors were using devices under 600px wide, so the shopping experience had to work as carefully on smaller touchscreen devices as it did on desktop.

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.

Relevant Services

  • Headless Architecture Consulting

    Headless CMS architecture advice for decisions around preview trust, SEO controls, revalidation, and editorial workflow before they become operational pain.

  • Next.js Platform Architecture

    Clarify Next.js platform architecture when tenancy, shared systems, App Router behaviour, or team boundaries are slowing delivery down.

  • Embedded Technical Leadership

    Principallevel engineering support when architecture, delivery quality, and technical judgement need strengthening inside the work, not just from the sidelines.

Looking for
technical direction?

For platform changes, recovery work, and highstakes delivery, I can help define the approach and stay handson where the hard problems are.