Product Design System



My Role

Product Designer


2014 – 2016

In 2014, launched a design and layout of their website. I was hired three days later.

The new look was loaded with design inconsistencies. Usability best practices were not used in the design. There were 24 different headline styles on the homepage. Every button on the page was a different size with different CSS properties.

Why did this happen?

Every design was a one-off from a different designer, leading to inconsistencies in their comps. Comps were distributed as flat jpegs without documentation to developers. The dev team wasted valuable time trying to estimate the CSS. The designers were tasked with repeated ticket requests for designs of existing elements, like a button, a color, or a headline style.

I audited the site and grouped similarities styles and elements. In this process, I was able to form the simple atoms of an atomic style guide.

An atomic style guide defines the smallest UI pieces and how they should be used to build bigger ones. For example, an icon (atom) would be detailed in the guide and later reused in a button (molecules) which would be used in a login card (organisms) on a web page (template). If a change is made to the basic atom, it will change in all instances, everywhere.

The detailed guide, based on a 4-pixel grid system, refined over hundreds of design projects optimized for pixel-dense devices. This ensures graphics are sharp, and content is balanced consistently. Dev teams can now build and reuse organisms for fast delivery.

The feedback has been fantastic.’s design and dev new-ticket-opens dropped significantly.

The feedback was fantastic. Both designers and developers said that it made their jobs easier and production faster. The success spawned atomic guides for other Meredith brands, which are now more advanced. The source files are created in Sketch so designers can make use of symbols and libraries. For design translation, we have plans for direct integration into the CSS repository. This will allow designers to build and push front-end edits themselves.

Menus on mobile devices take up less real estate by appearing on the button originally clicked to open the menu.
When the value of an item is displayed inline, the text should align with it's position in a menu when opened.
Sometimes you need icon help, sometimes you don't. Here's how to build both.
Transparency is the future of maintaining usability through better contrast.
The icons were designed so the actual graphic sits in padding framed at 24 pixels for universal balance.
Perfectly square designs allows for weight balance of the icons, even as the icon graphic and overall project designs change.