McClatchy’s video pages build on our newly established design system to create a new experience for McClatchy sites. These pages enhance the viewing experience for readers and guide them to related stories and videos.
Existing atomic structure:
To begin my design work, I took inventory of existing atoms, molecules and organisms within our atomic system. Our style guide includes all text, image, layer and icon styles used across the site and illustrates how these elements build different modules and pages. After co-leading the creation of this design system, I took ownership of managing our Sketch library and applying the styles to new and existing pages on McClatchy sites. For this project, story cards styles served as the starting point for the video page modules.
Atoms
Text styles, image styles, icons and layer styles
Molecules
Text packages, labels, icon sets and buttons
Organisms
Groups of molecules that form content and multimedia cards, including story cards, feature cards and list cards.
Video Card Iterations:
I designed several iterations of the video page, exploring new combinations of our existing styles. Early iterations included video strips, various playlist styles and alternate layouts. After gathering user and stakeholder feedback, we learned that the interaction between vertical playlists and the main player confused viewers, and that the strip design falsely implied playlist functionality.
The final design:
I ultimately landed on a more simplified design that created a consistent experience from video to video. A singular card design below the main player established clear user expectations when selecting a video and set a solid foundation for new features in the future.
Building something new but familiar:
The final video page design introduced several new modules to the atomic style guide. The main video player, video-only cards and playlists established a new multimedia experience on McClatchy sites.
A live example of the video page:
Video detail pages are now live in all McClatchy markets.
Next steps:
As playlists role out on video pages, story pages and section front across McClatchy sites, we are adapting these styles for audio players and photo galleries.
