Better Homes & Gardens has a history of creating amazing DIY projects unique to their magazine and television shows, however, they translated poorly online. Each tutorial was incredibly different from the next without a proper template blueprint to guide the authors. The result was poor performance and much confusion as discovered during my user interviews.

I designed a net-new template that would not only retain users but increase sign-ups. I envisioned and executed a commerce style experience that will allow the users to order supplies and tools used in the tutorial, right from the page, and delivered directly from Amazon with just a couple clicks.

I also designed a handful of author tools to ensure the template is future-proof. Users can scan many useful details all within view on page load; noting special skills needed like plumbing or electricity, or how difficult the project is, as rated by other viewers. The page is scannable, a meter bar notes progression, and jumping between steps is a click away.

A new font has been added, styling updated to marry that of the magazine, and usability standards are insured. To document these changes, I created a detailed brand guide that outlined everything from typography to multiple image ratios available to a brand new universal grid system.

Due to how well the design was received, stakeholders requested that it be applied to 98% of the brands in Meredith’s portfolio.