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.
⸺ 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.
⸺ 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.
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
GUITARTUNA
VERIZON 5G
JIOHOME
CAMPFIRE
MITSUBISHI MOTORS
FUTURELEARN
NATURKLANG
MOBILET
SAINSBURY'S
ETIHAD AIRWAYS
RS CONNECT
MAZDA
IQOS
O2 PRIORITY
ARMANI
SWIMS
NIKE
WIZARDING WORLD
THE TELEGRAPH FILM
NICKELODEON
SV IS A REGISTERED LTD COMPANY IN THE UK & EU AND VAT–REGISTERED. © COPYRIGHT SV & CLIENTS AND RESPECTIVE OWNERS OF IMAGES AND CONTENT USED.
