A fast paced, fluid project to refresh Moz's visual design system.
Design systems evolve to stay fresh as industries grow and strategies shift. With a new product strategy and expanding audience focus at Moz, it was time to refresh the visual system across our site and beyond.
I led the design effort to re-align to the new company vision and deliver refined brand guidelines in under weeks.
The existing visual system was designed to support a multi-product strategy.
Massive kudos to Derric Wise for a leading us to this strong design system that was right for the time.
The new product vision required a shift in brand strategy and update to our visual system.
One Moz. One SEO-focused Mission. One product palette.
It was important that our visual brand represent a unified mission. Moz Local and Moz Pro would no longer use unique color themes, and the core Moz blue would connect all product and content experiences.
We remained true to our TAGFEE core.
Transparent – Authentic – Generous – Fun – Empathetic – Exceptional
The TAGFEE culture was strong as ever, but there was a skepticism that the way we expressed these values through bright and playful illustrations was prohibiting us from reaching a wider audience, mainly enterprise. It was important that our visual system could be tailored for unique audiences without sacrifice to what has made the brand unique.
Current Color Palette
72 shades initially designed to support 5+ products.
Refined Color Palette
Less pastels, more definition around usage.
We found opportunities to streamline.
Reducing the number of header styles made it easier to maintain tighter consistency and visual hierarchy across product and site experiences. Body copy got darker and larger to improve readability across the board.
Current Typographic Styles
Light gray text was getting lost on the light gray backgrounds.
Refined Typographic Styles
Darker, larger text with half the header styles.
Accessibility was an important focus.
We reminded the team that accessibility is not only important because of web regulations, but because empathy for all people is a critical component to Moz core values. Higher contrast and visual cues beyond color are small but impactful ways we can demonstrate empathy through the brand.
Current Text Links
Simple blue links with darker blue rollover states.
Refined Text Links
Improved contrast and added a secondary visual indicator.
Huge kudos to Jeff Crump, who lobbied for improved accessibility long before this project.
Current Button Styles
Color combinations that were no longer necessary.
Refined Buttons Styles
Less color options, more dimension, larger standard button, higher contrast.
We defined photo and illustration styles that could be fine-tuned by audience and channel.
New Direction for Illustration & Photography
Credit to Abe Schmidt, who did the heavy lifting on both the photo and illustration front.