Brand
mywedding
My Role
Product Designer
Year
2014 – 2016
In 2014, mywedding.com 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. Mywedding.com’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.
