Condé Nast
Style.com
An e‑commerce startup, a fashion and technology marketplace from Condé Nast integrated with their wider print and web portfolio.
In Detail
During the early development stages, I joined their small R&D team, piecing together a prototype that transformed data from a Hybris e‑commerce engine. This later developed into two distinct teams: a UI team responsible for the front end (of which I was a senior member) and an API team that used HapiJS and Node.js to transform data not only from our own Hybris source but also from our customers' own e‑commerce platforms. This allowed Style.com to display and sell stock directly from its vendors in a marketplace‑type arrangement.
Once proven as viable, the project quickly outgrew the rooms we had been squatting in and moved to brand new premises in Camden whilst onboarding a completely new team of developers, editors, and data scientists, many joining us from other areas of the publishing giant.
On the front end, we decided not to carry on developing the final product on top of our prototype. Instead, we shifted to a standalone isomorphic web application using Clojure and ClojureScript. This used HTML5 and CSS animations to produce a slick, high‑quality interface suitable for the aspirational customers expected to shop there, and reflective of the overall brand.
As a side project, my team and I also produced a single‑file JavaScript plugin (using ClojureScript) which was installed into the company's online publications. This used a bespoke AI engine to provide context and opportunities within editorial content, displaying relevant products from the marketplace directly within the publication.
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
Aiming for a sophisticated and high‑class feel, the homepage presented visitors with a curated introductory video alongside a selection of products and editorial pieces. All content, hypermedia, and the page's layout were controlled by the client's Hybris content management system.
Product Listing Page
Shown here as an early‑stage prototype, the PLP focused specifically on product imagery above all else: the sidebar navigation folds away when not in use on this and Product Details pages, and product imagery is carefully selected. With categorised product navigation, users were able to drill down to a specific product type before then being able to filter on aspects such as size, colour, or materials.
Product Details Page
Shown here in various stages, from wireframes through to final forms, the PDPs catered to several distinct product types, including fashion and technology. Once again, the focus was on the carefully considered and selected product imagery, with buying options stuck to the right‑hand side of the screen on the desktop.
As with the rest of the site, emphasis on the user experience was just as important on smaller and touch‑screen devices as on desktops. Analytics showed that over 75% of website visitors were using mobile devices smaller than 600px in width.
