London Evening Standard

Product Design Case Study

By Daniel Pape

In mid 2017 I was the lead designer on a major redesign of the Evening Standard website. My role spanned from user research and requirement gathering, to wireframing and gathering feedback, right through to the final pixel-perfect interactive mockups. The solution was a library of 17 adaptive components that can be used to create flexible, coherant page layouts. The library of components covers editorial, commericial and user-acquisition to address the business needs of a modern news media homepage.

Research

I conducted research with members of the editorial team to build the foundations for how we would define success of the design system. From interviews I created affinity maps to identify that users wished to be presented with a good range of articles to browse, but a rigid system of heirarchy was required to create a sense of hierarchy. From interviews with editorial and commercial stakeholders I had a very rigid set of parameters in which to display the content and the commercial placements.

UX

The components are designed to have varying information density so that the page rhythm can be tailored to be harmonious for the reader. The most important articles are given "hero" status which elevates their visual heriarchy: adding a colour swatch and increasing the font size. This is to give the user a real sense of navigating through the page rather than just being presented a list of articles.

Converting casual readers to loyal followers was identified as a high priority for the project. To aid this I designed CRM acquisiton components which integrate into the user journey, and collobarated with the legal and CRM team to ensure they are fully GDPR complient.

Responsive Grid

Balancing commercial, editorial and design requirements, each component responds gracefully between 3 breakpoints. The main goal was to retain a consistent heirarchy across each device size, which was acheived by tailoring the presentation of elements between each screen size.

Having new joiners and collaborations with contract designers, it's very important to streamline the onboarding process with regard to the design style and guidelines. To aid this I compiled a full style guide incorporating typography, grid and palette in pdf format for the design system, as well as created a library for the Sketch Design app which allows all components to be added to artboards without requiring any previous experience with the system.

Post-launch performance

6 months following the launch of the new design style the website outperformed all major UK digital news sites with a YoY growth of 28%.

Return to main site

Related Articles