I co-led the design and implementation of an atomic style guide for McClatchy's 30 digital newspapers. Our goal was to create a cohesive and streamlined experience for McClatchy's papers while still maintaining the identity of each publication.
We did this by refining type styles across our sites, simplifying the color palette to reduce visual noise and implementing a modular, card-based design to pave the way for personalization. After the defining the atomic system in Sketch, we worked with developers to establish a shared language for each atom, molecule and organism.
As the project progressed, I took ownership of managing the Sketch library and Invision board that houses and defines atomic elements for our team.
I used my sketchbook to think through initial stages of the atomic redesign. I worked through hierarchy, user flows, modular design and page composition.
Improving four main issues
Designing for personalization: Implementing a more modular, customizable design that adapts to all platforms and grows with our audience.
Reducing visual clutter: Elevating editorial content through a card-based design and removing market-level color.
Increasing hierarchy: Reducing the number of text styles to create clear differentiations between different types of content.
Elevating multimedia: Enhancing the design of video and photo cards to increase engagement.
Screenshots from the previous design system reveal these four problem areas. Ads blend in with content, red calls-to-action add a negative connotation to the page and multimedia content is downplayed in the design.
Refining the atomic system
By starting with a one-to-one redesign of the homepage, we were able to improve readability and hierarchy through simple changes. We updated the headline styles from Slab to Serif and made labels more prominent, immediately establishing a more serious and journalistic tone. We also established a repeatable pattern for headline packages that is implemented throughout all modules and pages.
Consistent across platforms
Each atomic element in the system is identical across desktop and mobile platforms, making our design more adaptable and responsive. We also worked to ensure that multimedia experiences remained consistent across all screen sizes.
Final atomic system
Atoms: All text styles, image styles, icons and layer styles within our design system.
Molecules: Text packages (including headlines and page headers), labels, icon sets and buttons in our design system.
Content Organisms: All organisms related to editorial content, including story cards, feature cards and list cards.
Multimedia organisms: Video, gallery and playlist modules for various use cases.
Call-to-Action Organisms: Modules that link to other pages, including read next, related stories and subscription promotions.
Video page: 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. View project