Designing an Atomic Design System for 1.8m
Stylist online users.

UX & UI Designer // Stylist

As Lead Product Designer, I designed a new Atomic Design System for Stylist online with improved UX and features to meet business needs.

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 with UX improvements and gathered feedback from the team.

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 on Page, to help buy-in on advertisement slots 

Template

Page Design with content

Atomic Design System

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

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.

Before and after

Every page was crafted to create the best user experience for Stylist customers, using past user research, heuristics and UX principles to lead the design.

You can also view the live site on www.stylist.co.uk

Old layout

New design