Web experience re-design & re-platform.

Telegraph Media Group

In a nutshell.

Challenge

The Telegraph website was outdated and ran on an old technology platform, with separate desktop and mobile versions requiring dual management and maintenance.

Our mandate was to design a new, responsive website as part of a re-platforming effort, alongside developing a new authoring tool for journalists.

My role

Shaped program approach with head of product.

Guided UX designers & prototypers through discovery & delivery.

Hands-on design at key program moments.

Facilitated workshops, design critiques, planning, and retros.

Managed senior stakeholders.

Impact

  • Designed and built a responsive website in 12 months, outpacing competitors' 3-year avg. timeline, with over 90 million global readers.

  • Implemented new IA and navigation with flexible templates, patterns, and components for editorial teams.

  • Improved collaboration through co-design with key stakeholders.

Approach.

Pragmatic phasing

I shaped the overall programme approach in collaboration with our head of product. After exploring the feasibility of various approaches, we decided to re-design and launch sections incrementally. We started with simple sections which didn’t require complex components and templates and built our way up to the large, data rich, high traffic areas like sport and news.

This approach enabled us to demonstrate the value of the team through delivery and collaboration. We experimented with various operating models, including embedding designers in multidisciplinary teams and conducting UX & Design sprints over two weeks.

Programme approach phases

The core phases and capabilities

Continuous research & insights

Various forms of research were conducted throughout the project, including competitor analysis, diary studies, 1:1 interviews, and concept and usability testing. We established a rhythm of weekly research sessions called 'Testing Tuesday'.

During the research, we identified five core navigation behaviors, which were integral to the design process:

  • Dip in & out: Short visits, usually from social or search, typically involving single page views.

  • Cyclical hub: Users anchor to a hub (e.g., homepage or channel page) and explore from there.

  • Serendipity: Users open to exploration without time pressure, often multitasking.

  • Linear: Users read news on specific subjects from start to finish, seeking a sense of completion.

  • Multiple lenses: Users review multiple news sites to get a well-rounded perspective on stories.

Telegraph research examples

Research activity examples

Rapid discovery & delivery

Short discovery phases were conducted for each key section (Sport, News, Business, etc.) to explore problem spaces before detailed design phases. Here are some example "How Might We..." statements we explored:

How Might We…

  • create a sense of live sport?

  • adapt to the rhythm of news?

  • leverage the lifecycle of a film from rumours through to launch and beyond?

  • design a flexible framework for different paces and densities of content?

  • meet the needs of users differing navigation behaviours?

Throughout the process, we prototyped and developed a prototyping tool that pulled in live content via an API, ensuring relevance during user research. The tool also featured theming capabilities for quick switching between different channel looks and feels.

Discovery materials

Discovery examples

Modular system created.

  • Template diagrams

    Flexible templates

    A selection of flexible templates were designed, the two most commonly used were the hub and article.

  • Responding to the news

    Responding to the news

    The amount and pace of content varied vastly across the newsroom, with some desks updating content on their section pages once a day whilst others updated 5-6 times a day. Our components therefore needed to cater for varying types, amounts and paces of content.

  • Navigation framework

    Navigation framework

    The navigation design focuses on the local navigation which inherits the section styling. It features a clear upward path, providing a sense of location encouraging users to explore their areas of interest as well as looking beyond.

  • Style guide structure

    Driving efficiency through documentation

    The style guide promoted awareness and education of the tool kit available as well as encouraging consistency and re-use driving efficiencies.

Improving engagement

Once the re-design was rolled out, engagement per session needed improving so a cross functional team set out to establish how we could provide readers with opportunities to discover and read more content.

The team approached this with an experimentation mindset, running hypothesis framed A/B & multivariate experiments.

The article template was focused on, experiment zones were defined and ideation run collaboratively which generated a backlog of experiments which were planned and rolled out.

For example, introducing scroll to next article with the ability to choose from several articles increased the average page views per session by over 20%.

Experimentation zones

“It's been an incredible effort by all the teams involved. Our readers can enjoy a smart, modern, clean and engaging new site. And our journalists benefit too, from an infinitely better set of tools. This of course is not the end. We all share the ambition to make the new site even better and even more engaging.”

Chris Evans - Editor at the Telegraph