Article Card Components

Leaf Group owns and operates numerous media brands each with their own site design and implementation. As part of this project, the different variations of article cards within each site and across Leaf Group's numerous web properties become standardized under a new centralized and customizable component implementation.

Benefit for the User

• The design, layout, and styling of article cards within any given Leaf Group site becomes standardized allowing for a better user experience.

Benefits for the Product

• The product gains several variants of the new article card component to properly replace all outgoing article card instances.
• The product gains visual consistency aiding efforts to be perceived as a professional and trustworthy source for information.

Benefits for the Team

• The new implementation facilitates future multi-brand product initiatives involving article cards.
• Cross-selling efforts by Sales Team are facilitated at both an individual site level and across Leaf Group's properties.

For this project, I took on the activities of a lean researcher to gather information from various sources and stakeholders. I then ideated solutions and collaborated with engineering for a loose thumbs up and for buy-in. The work was collective, many stakeholders had input that informed the design of the components.

Research

• Auditing - I audited our current article card implementations across Leaf Group's so that I could understand existing data point and context needs.
• Competitive Research and Inspiration - I looked at executions by competitor or adjacent media properties to either draw inspiration, spot opportunities, and spot pitfalls.
• Stakeholder Findings Feedback - I coordinated with the Product Manager to sit with each brand's editorial managers and SEO leads for a chat on the findings and collect any additional feedback.

Ideation

• "How Might We" Questions - I created a set of "How Might We" questions to generate design goals and boundaries.
• Assumed Element Priorities Artifact - I organized common elements by assumed priority from both a user and a business perspective. The resulting artifact was used to facilitate a discussion with the product manager during the initial design review.
• Base Component Concept - I drafted a comprehensive article card 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.

Design Thinking

• Premise - I created wires of the base component and various conceptual parent components. I then went on to create wires in which entire sections of our current homepages were replaced with the new components.
• 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. 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.‍
• Engineering Involvement - I make it a normal practice to gut check with engineers before I get too far into design, but this time around, I worked closely with them given the responsive strategy I'd be pursuing.

Our design output included white-label base, parent, and grandparent components. Each brand was then able to transition their sites to the new component family over the course of a couple of sprints.

Following the release, we released the product card (an e-commerce fork of the base component) to serve future e-comm initiatives.