Design System and app platform sync
Cozi Family Planner


Brand

Cozi

My Role

Product Designer and System Consultant

Year

2020

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
sketch
Fine tuning ideas on paper
Wireframes
High fidelity wireframing for testing
Polish
Feedback edits and apply polish
Grids
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.
Intro
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
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
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.