UX & UI Designer // Stylist

Designing for 1.8m Stylist online users.

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 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 on 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.

Here are some before and afters

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