DIY Project Template with Shop Experience
Better Homes & Gardens


Better Homes & Gardens

My Role

Product Designer



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.

sharpie sketch
Roughing ideas with a sharpie
Fine tuning ideas on paper
High fidelity wireframing for testing
Feedback edits and apply polish
I created a grid system that allowed smooth transition between four different breakpoints which could be reused site-wide for other templates.
Wire frames
Initially, I was trying to frontload the page with all the info users wanted from their interviews.
Testing proved that some details, like rating the DIY, were not as useful in this case

I used Sketch and Principle to create this prototype. Download it and click around for yourself. (Mac OS required)

Before - On Load
BEFORE: On load, the original design did not make good use of space and hierarchy was not well defined.
After - On load
AFTER: Now, the user can scan the details and get a feel of what is involved with this project before scrolling.
BEFORE: There wasn't a sense of separation between steps, resulting in a project that isn't easy to scan and go back to a specific tip or highlight.
AFTER: There is now a clear separation of steps. Multiple images allow for focus on detail. A green status bar at the top of the page shows your progression through the instructions.
Materals and Tools mock ups
A simplified version of the shopping experience was designed for the launch to test the waters.