Stylist.co.uk & Shortlist.com

UX DESIGN / UI DESIGN 

iphonemockup

Summary

Shortlist Media, as they were known until 2019, needed to bring their freemium publication websites in-house for their brands ShortList and Stylist. Stylist is a much-loved freemium magazine still distributed around several cities in the UK and ShortList was a men’s lifestyle magazine which has since ceased publication in 2019. I worked with the development team to design and build a refreshed, modular site that was theme-able to support both brands.

stylist colours
shortlist colours

The Problem

The main reason for putting up a new site at this time arose because of the need to move from relying on an agency to maintain and make updates to the websites to doing everything in-house. Shifting the responsibility of managing the site to Shortlist Media’s in-house tech team would empower them to make improvements on the website in a more agile way, without having to go through lengthy approval processes which would be necessary for future plans for digital expansion. One of the main challenges would be working out a simple enough design system which would be able to showcase both brands attractively and without compromising on brand integrity.

ShortList Site Map 1

Objectives

Increase volume of content on the homepage
Use Parse.ly to manage trending content and other site data
Determine where and how our sponsored content and partnerships would be circulated
Typography scales, palettes and layout should be able to switch between both brands, while originating from one codebase.
Mobile and tablet optimisation
Incorporate new display ad formats

in situ – mobile gallery

The Approach

I met with stakeholders across the company to gather insights on what was required for the sites, what the brand missions and guidelines were and other technical restrictions around third-party ad tech. The editorial team wanted to be able to increase the volume of content on the homepage for more visibility and to support an increased stream of content output so this was one of the key drivers for the site design. We did a competitor analysis of other publication websites to get a feel of what things we felt worked and didn’t and how to set goals in line with the business.

shortlist-list-inventory-02

Process

I broke the current site down into what was necessary and planned the site architecture before getting into wireframes. During this stage, myself and the development team collaborated with the ad tech team to work out the best way to balance ad visibility without compromising our original content. I used InVision to create prototypes of the website wireframes to test the flows with stakeholders and other guinea pigs around the company.

post-mockup-macbook

Design

Along with the visual design of the site, I worked with a developer to break down all the pieces of the design into components. The goal was to make sure the pieces were as reusable as possible for both ease of development and for the ability to skin two brands without much difficulty. This resulted in a single stylesheet of truth which both brands were based from, using the same Typography Scaling, Spacing, Layout and Interactions.

View the live Stylist site here.

More Projects

The Stylist GroupUX/UI Design

Stylist Loves EmailsUX/UI Design

Stylist StrongUX/UI Design

WeddingHeroUX/UI Design