PROJECT
THE TELEGRAPH FILM

CLIENT
THE TELEGRAPH

ROLE
DESIGN LEAD

CONTRIBUTION
DESIGN DIRECTION
PRODUCT DESIGN
VISUAL IDENTITY
DESIGN AUDIT
DESIGN SYSTEM
DESIGN GUIDELINES

YEAR
2014

INDUSTRY
MEDIA / ENTERTAINMENT

An interactive platform designed for users to share their passion for films and iconic personalities. Staying in the loop with the latest and most interesting releases, allowing them to explore and follow the hottest films.

01.

Background

The Telegraph has a business need to protect and grow the revenue from film distributors through native advertising and sponsored content, currently £700,000 annually. These sponsors are targeting the UK market and are attracted to The Telegraph as a quality brand with a history of strong film content. However, they find the current website outdated compared to competitors.

02.

Approach

The design will evolve from the recently redesigned  Telegraph mobile website, delivering a visually stunning website and film experience. It will be the beginning of a modular design system which can scale and evolve for future projects, overcoming some of the general user experience challenges hampering discovery and engagement.

03.

Outcome

The new platform and design system sets a fresh take on the digital branding identity and direction for The Telegraph. This initiative not only contributed to the development of an improved design culture within the broader organization but also influenced the newly formed user experience department. Tackling significant challenges internally and externally, our diverse and experienced team transformed this challenge into a tangible product, marking a substantial digital transformation for the entire company. The process spanned approximately 10 months.

100%

Users have chosen the new design and experience of The Telegraph film channel against the current website  during user testings.

100+

Components created and tested for the new design system, ready for rollout and scale throughout the platform.

New CMS

Migrating to Adobe AEM (Adobe Experience Manager) sets an improved workflow for editorial content creation.

project-the-telegraph-film-002
project-the-telegraph-film-003
project-the-telegraph-film-004
project-the-telegraph-film-005
project-the-telegraph-film-006

⸺ The user experience follows an organic approach to browsing the content. People can find new films and articles which they might not have thought about.

04.

Film Entity

This page serves as a comprehensive hub for all film-related content, seamlessly integrating an automated feed that links to articles, lists, and various other film entities across the platform. The layout design is crafted to cater to every stage of a film release journey, spanning from the initial rumours to the actual release date. The Film Entity page offers a versatile sponsorship platform, allowing for dynamic design variations that can be tailored to meet the specific needs of sponsorship and partnership deals. This strategic integration of design elements enhances the visibility and impact of sponsorships on the page. Expanding beyond films, this concept extends to actors, providing a platform for the creation of distinctive profile pages. This ensures that the immersive experience of the Film Entity page is not limited to the film itself but extends to the individual actors, contributing to a rich and engaging user experience.

05.

Featured Article

Designed for reviews and interviews, this layout prioritizes an optimal reading experience for lengthy articles. Equipped with a diverse range of components, it empowers the editorial team to craft compelling content. The incorporation of inline elements allows seamless integration within the article text. Additionally, the film card component serves as a concise summary, offering a direct link to delve deeper into the details associated with the film.

06.

List Article

A list type of article is a vital category for the editorial team, boosting significant traffic to The Telegraph. The design features two adaptable variations, catering to different types of lists. As list articles typically extend in length, a user-friendly mechanism has been implemented to facilitate easy navigation through the content, eliminating the need to scroll through all items.

07.

Section Pages

To accelerate and optimise delivery for the MVP launch, we repurposed certain design components wherever feasible. A notable example is evident in the Section pages, where the content feed design was effectively reused. The grid system played a pivotal role, enabling the seamless interchangeability of components within the design.

08.

Home Page

While the majority of Telegraph's traffic doesn't originate from the homepage, it remains a crucial section for the Film channel. Serving as a prime space for advertisements and sponsorships, the design prioritizes delivering the latest Film content and exclusive news. The layout has a dynamic experience by seamlessly blending curated and automated content, ensuring a constant stream of updates. This dynamic hub features components designed to extend their functionality to other areas of the platform as well.

project-the-telegraph-film-007
project-the-telegraph-film-008
project-the-telegraph-film-009
project-the-telegraph-film-016
project-the-telegraph-film-010
project-the-telegraph-film-011

⸺ The new design system has been crucial during the design process. It helped the team to optimize the workflow in delivering and keeping a consistent design across multiple streams of work.

09.

Design System

Adopting the Atomic Design Methodology marked a significant milestone for The Telegraph. It played a pivotal role in streamlining the workflow, enhancing efficiency in delivery, and maintaining a cohesive design system across various projects. Collaborating with a creative developer, we built a fully responsive prototype alongside the design, supporting the validation of ideas and enabling quicker, informed decision-making. This approach spared us from crafting static designs for multiple viewports. The outsourced development team utilized the prototype and documentation to bring the design to life in the production environment.

10.

User Testing

Frequent user testing sessions were part of the design process. Gathering feedback from genuine film enthusiasts and diverse user profiles played a crucial role in validating the design choices and maintaining meaningful discussions with stakeholders and product owners. A dedicated team managed the recruitment of suitable participants for testing, diligently recording and transcribing each session for comprehensive analysis.

project-the-telegraph-film-017
project-the-telegraph-film-012
project-the-telegraph-film-013
project-the-telegraph-film-014
project-the-telegraph-film-018
project-the-telegraph-film-015

The design conveys the feeling of a high-profile and trustworthy content source. Leveraging British design icons to create an original identity while keeping British heritage. The Telegraph is a plural brand and the updated design system approach is different from other news websites as it gives freedom to its sections, creating immersive experiences within each area. Content browsing follows an organic interaction model, letting users find upcoming films and articles they might not have thought about. The design system is built to work with varied types of dynamic content. This keeps users engaged and returning for updates, rumours and news about upcoming films ●

Credits
Samuel Viani ⸺ Design Lead

Alex Watson ⸺ Head of Product
Andrew Pettie ⸺ Editor Chief
Christopher Thorogood ⸺ Chief Digital Officer
Clare Munday ⸺ Senior UX Designer
Denise Parkinson ⸺ Entertainment Director
Graeme Balfour ⸺ Senior UX Designer
Helen Humphrey ⸺ Creative Developer
Jane Austin ⸺ UX Director
Liane Katz ⸺ Product Owner
Polly Shelton ⸺ Research Manager
Richard Spencer ⸺ UX Deputy

﹢Cross-functional team collaboration
The Telegraph ⸺ Editorial Team, Stakeholders & Engineers

Duration
32 weeks

Client
The Telegraph

Explore Selected Projects

guitar-tuna-thumbnail-01

GUITARTUNA

verizon-thumbnail-01

VERIZON 5G

jio-home-thumbnail-01

JIOHOME

campfire-thumbnail-01

CAMPFIRE

mitsubishi-motors-thumbnail-01

MITSUBISHI MOTORS

future-learn-thumbnail-01

FUTURELEARN

naturklang-thumbnail-01

NATURKLANG

mobilet-thumbnail-01

MOBILET

sainsburys-thumbnail-01

SAINSBURY'S

etihad-airways-thumbnail-01

ETIHAD AIRWAYS

rs-connect-thumbnail-01

RS CONNECT

mazda-thumbnail-01

MAZDA

iqos-thumbnail-01

IQOS

o2-priority-thumbnail-01

O2 PRIORITY

armani-thumbnail-01

ARMANI

swims-thumbnail-01

SWIMS

nike-thumbnail-01

NIKE

wizarding-world-thumbnail-01

WIZARDING WORLD

the-telegraph-film-thumbnail-01

THE TELEGRAPH FILM

nickelodeon-thumbnail-01

NICKELODEON

circle-15×15-white
Product Design ⸺ UX/UI Design ⸺ Prototyping ⸺ Design Systems ⸺ Brand Design ⸺ Art Direction ⸺ Design Direction ⸺ Visual Identity ⸺ Design Consultancy ⸺ Design Audit ⸺ Design Strategy ⸺ Design LeadershipProduct Design ⸺ UX/UI Design ⸺ Prototyping ⸺ Design Systems ⸺ Brand Design ⸺ Art Direction ⸺ Design Direction ⸺ Visual Identity ⸺ Design Consultancy ⸺ Design Audit ⸺ Design Strategy ⸺ Design LeadershipProduct Design ⸺ UX/UI Design ⸺ Prototyping ⸺ Design Systems ⸺ Brand Design ⸺ Art Direction ⸺ Design Direction ⸺ Visual Identity ⸺ Design Consultancy ⸺ Design Audit ⸺ Design Strategy ⸺ Design LeadershipProduct Design ⸺ UX/UI Design ⸺ Prototyping ⸺ Design Systems ⸺ Brand Design ⸺ Art Direction ⸺ Design Direction ⸺ Visual Identity ⸺ Design Consultancy ⸺ Design Audit ⸺ Design Strategy ⸺ Design Leadership

SV IS A REGISTERED LTD COMPANY IN THE UK & EU AND VAT–REGISTERED. © COPYRIGHT SV & CLIENTS AND RESPECTIVE OWNERS OF IMAGES AND CONTENT USED.

Back to top Arrow
View