Article Card Components
Designing reusable article card components to be customized and deployed across several of Leaf Group’s content properties.
Designing reusable article card components to be customized and deployed across several of Leaf Group’s content properties.
What Changed
The different implementations of article cards across Leaf Group's numerous web properties become standardized under a new centralized and customizable component implementation.
Outcomes
The new implementation facilitates future product initiatives involving article cards, as well as, cross-selling efforts by Sales Team.
Why It's Featured
This case study covers my process in architecting and strategizing a component family.
My Role
Product Designer (UX) and Partial UI Designer
Collaborators
Product Manager, Content Designers, Editorial Managers, SEO Managers, Engineers, and QA
Leaf Group’s media properties lacked consistent article card design and implementation at an individual site level and as a group. From a user standpoint, the severity of the inconsistencies degraded the user experience, betrayed our professionalism, and tarnished our trustworthiness. From a business standpoint, the inconsistencies created unnecessary overhead as well as hurdles for UX and sales initiatives.
We saw an opportunity to design and implement a reusable, versatile, and scalable article card component to address the issues of the current implementation while providing a better experience to both users and our teams alike.
I began by auditing our current implementations so that I could understand previous and current needs.
I also looked at executions by competitor or adjacent media properties to either draw inspiration or spot directions we’d like to avoid.
I started by jotting down a How Might We question along with some supporting goals.
Then I organized common elements by assumed priority from both a user and a business perspective. The resulting asset was used to facilitate a discussion with the product manager.
I then drafted a comprehensive component. The idea was that each brand could use it as a base for more complex components by enabling or disabling the visibility of each element in a manner that made sense for the context and adding things like support for an image.
With the concept feeling sturdy, I moved into wires and mocks. I drafted various conceptual components that could replace entire existing sections on our sites. The structure was generally following atomic design principles.
For responsiveness, I opted for a sort of resolution-independent approach. I reasoned that creating 3 sizes (small, medium, and large) and determining the width based on either the grid or component specific min- and max-width values would allow us to achieve flexibility while minimizing the number of variants we'd need to maintain. I gave the PM a quick presentation and gave her a heads up that I'd be collaborating with an Engineering manager to check for feasibility and get their blessing to present to the broader team.
As an example, with this approach, a section component could enlist 1 medium with 4 smalls for mobile devices, and hop on up to 1 large with 4 mediums for tablet and larger; effectively serving all our breakpoints with just 3 sizes.
Once the PM and I felt confident in the solution and the approach, we presented to the Editorial Managers across Lead Group's properties. I collaborated with Hunker's and Cuteness' Content Designers to create brand-specific variants for the meeting.
The teams were all onboard with the solution so it was on to implementation.
I wrote dev notes for the Article Listing and Article Card components (as shown below) as well as the Article Grid Component).
We made iterations as the need arose, such as adding support for a "trust element" on expert/professionally reviewed content:
We also built a product variant for e-commerce initiatives.
Copyright © 2025