The approach

The first step in the process was to go back to desk research and look up the current best practices for web typography. This included the basics of what made a good typeface for the web, how best to lay out text and how to integrate other elements without distracting the user from the core content.

This came together in an initial research report that I presented to the client. To give the research more context we, myself and another designer, included comparisons between the key takeaways and the current site as well as their competitors.

We compared the current site and competitors against the results of my research to see how they had approached various design best practises and how content was presented to the user across desktop and mobile. One of our key questions that we wanted to form a recommendation around was how much should content and design change between desktop and mobile to provide the best experience on each device.

After presenting the initial research and competitor analysis deck I, along with another designer, looked at how this new insight could be applied to the content pages on the current site in order to improve the user’s reading experience.

These recommendations would have to take into account the new visual identity, the existing framework of the site build and various other projects running simultaneously. This meant that we had to compromise on some recommendations. For example, through the research we had learnt that line lengths should be a maximum of 80 characters to prevent the user from losing focus. However, because of the chosen typeface, we increased that character limit to 90 because we needed to create a balance between the text size and the grid width.

Some of our recommendations were top level approaches to layout and responsive behaviour and others were more granular. The screens below show two examples of this:

1. Through best practise research and competitor analysis we learnt that pure black should not be used for large amounts of body content against a pure white background. This is because the contrast is too stark and can cause the user to feel eye strain. Therefore we made the recommendation that body copy should be displayed using the dark grey tone within the colour palette rather than the brand-approved suggestion of pure black.
   

2. When the browser is loading custom fonts there are two main approaches for addressing any lags. Either it can display nothing and then content will appear once the font has loaded (FOIT), or it can display content using a system font from the font stack and then switch to the custom font after a moment (FOUT). There are pros and cons to both approaches but we recommended the use of a system font while the custom font loads so that the user is not delayed in accessing content.

The solution

As a phase one approach we decided to redesign a single template rather than tackling all components straight away. In limiting the scope of the project we would be able to show a clear before and after view to user test our recommendations.

We realised that redesigning the text layout but combining it with existing components wouldn’t fully solve the problem so we took the core components that are often used with long form content and redesigned them to be more sympathetic to the reading experience. This included, primary page calls to action, pull out quotes and stats, inline imagery and links to related content.

As these new versions of the components would not fully supersede the current versions we provided build guidance around how and when they should be applied; only on the content template and only within the main content section.

Reflections

This project highlighted for me the importance of continually looking to improve your work for long term clients. User behaviour changes and devices are consistently improving so web and brand standards must evolve with them.