Editorial Promo Builder

Leaf Group's properties gain the ability to internally build their own editorial promos. This standardizes the creation process, layout variations, UX, and sellable elements. Furthermore, it saves the company money on third-party vendors.

Benefits for Leaf Group's Internal Users

• Users can now create, manage, and deploy their own editorial promos without the need for a third-party vendor.
• Users can now allocate freed up budget to other initiatives.

Benefits for the Internal Tool and Consumer Sites

• The internal tool gains new functionality that further supports its role as a centralized site manager.
• The consumer sites gain standardized UX for editorial promos when compared to the disparate 3rd party executions.

Benefits for the Teams

• The teams gain further control on elements that are deployed onto and displayed on our consumer sites.
• The teams gain new opportunities to collaborate (editorial x sales, editorial x content design, etc.).

The scope of this project includes both a new internal tool feature (the builder and its CRUD table) and the consumer-facing design for the promos. I handled the entirety of the design for the internal tool and the white-label version of the consumer-side promo upon which each brand would add their own visual design.

Pre-Design

• Audits - Content creation and design software like Figma, Pages, Keynote, and Sketch.
• Internal Tool Primary User Analysis - Understanding of the several configurations of editorial teams at Leaf Group and the expertise of end user on each team (some teams have content designers and others don't).
• Data Point/Scope Review - Reviewing requested data points for consumer front-end and and internal tracking.

Design Thinking

• Internal Tool CRUD View - Straight forward table housing all promos created by a given brand along with relevant actions.
• Internal Tool Builder View - Builder view in which users would be able to design the promos, place copy, and retrieve serve code. Went with a preview panel on the left and settings/editing tools on the right (akin to the software I audited).
• Serving the Varying Levels of Primary User Expertise - I knew the primary users would have varying levels of design expertise (dedicated content designer vs. editorial manager), so I opted to create some design guardrails as opposed to a fully robust set of visual controls.
• Prepping for Future Expansion - I knew the Builder would likely have follow up feature additions, so I opted to create a scrollable rail for the settings panel. We included sectioning though we left expand collapse for a followup release.

Testing

• Method - I tested the workflow on our in-house content designers and editorial managers. Tasks included users creating a brand new promo instance, modifying copy, toggling between device previews, and deleting their test promos.
• Findings - The tests went smoothly and feedback was positive, so there was only minor iteration needed.

The final design for the builder stuck closely to the wires. In regard to the consumer-facing promos, I collaborated with each property/brand's content designers (if available) to create brand-specific color themes and spacing decisions. I also delivered all cases and states for the builder fields to devs as part of dev notes and I delivered image guidelines to content team should they choose to include images on the desktop version of their promos.

Feature List

• Internal Tool CRUD Table - Create Shell, Edit(Navigate to Builder), Delete, Get Script
• Internal Tool Builder View - Design Preview, Select Color Theme, Optional Desktop-Only Image, Site/Sponsor/No Logo, Heading/Body Copy, Interaction Type (None, Email Capture, CTA, Radio Select Submission, Checkbox Select Submission, Tracking)
• Consumer-Facing Promos - Mobile/Tablet and Desktop Variants, Brand-Appropriate Styling (Fonts, Colors, Spacing)