Stylist Atomic Style Guide

As Lead Product Designer, I designed a
new Atomic Design System for their digital platform.

I worked closely with developers and the editorial team, I defined a flexible system of components that could evolve with the brand and support fast-paced content needs. While user growth in 2022 was driven in part by pandemic-related shifts, my work helped ensure the digital experience was visually cohesive, easier to maintain, and ready to scale — supporting a rise to over 1.8 million monthly users.

The Challenge

With over 400,000 print readers and a fast-growing digital audience, it became clear that Stylist needed to rethink their digital presence. My challenge was to help them rebuild the site with a proper foundation,  using atomic design principles and a UX-led approach, to create a more scalable, consistent and user-friendly platform.

Discovery and Research

I kicked off with a full UI audit to understand what various pages and components were required, along with which page layouts were working or needed a UX overhaul.

  • Mapped existing patterns, inconsistencies, and one-offs

  • Held workshops with stakeholders to understand common friction points

  • Looked at data, heatmaps and user interviews

  • Researched applicable heuristics for online editorial

  • Understood commercial needs from an advertising buy-in stand point

This gave me a clear view of what was working, what wasn’t, and what we needed to improve.

Designing, Testing, Iterating

I started by creating wireframes for pages which required UX improvements, or needed to meet business needs. Considerations, which had already been outlined by the Product manager were:

  • Readability of article pages

  • Reducing overwhelm on the homepage

  • Findability of relevant articles

  • Placement of Advertisement banners within articles

  • How to increase Average Time of Page, to help buy-in on advertisement slots 

Once I had designed wireframes, and had buy-in from the editorial team, engineers and PM, i started to build the atomic design system.

  • Atoms: Typography, colour, spacing, icons

  • Molecules: Buttons, inputs, content blocks

  • Organisms: Article templates, media cards, navigational elements

  • Templates: Layouts for various pages

  • Pages:

I worked with engineers to ensure naming conventions and structure supported easy implementation, and collaborated with editorial stakeholders to ensure the new designs were reflecting their needs and the brand.

Final outcome

Increased Average time of page, through infinite article scrolling

  • A unified visual language across Stylist Online

  • Faster, more efficient design-to-dev handoff

  • Easier onboarding for new designers and devs

  • Supported Stylist’s growth to 1.8M+ monthly users during 2022

While external factors (like Covid) drove much of the traffic growth, the design system ensured the platform could scale effectively and maintain a consistent, high-quality experience.