GSUITE REDESIGN
2017 Visual refresh for 2018 Releases
Collaborators
Boulder, CO team led by Margaret Cyphers
Project Space
The GSuite historically hadn't been a cohesive family and was inconsistent across platforms (mobile, web and android). 'GSuite United' was an initiative to unify the design language across products. For most of the product teams, this initiative was a side project, but it needed 'one source of truth'. I was tasked with creating new unified specs.
My Role
Visual Design Intern
Problems with the Solution
Google has spec sheets up to their ears, and yet there are still enough inconsistencies to be a problem. Inconsistencies are prevalent within a design team, across design teams, and even in the code. Beyond that, constantly having to find and cross reference the multitude of spec sheets available can be a drain on the creative process.
I needed some meta rethinking.
A New Sort of Solution
We needed to reconsider the meta system inside the company both across time, and disciplines. Going off previous front-end experience, and meetings with different designers, and engineers, I decided on making a new kind of responsive, modular component library to expediate both the design process, and the handoff to engineers.
Each component ("molecule") was built with hidden *SPEC layers made to resemble Chrome Inspector, with a nomenclature that matched the desired css.
The custom built Sketch plugin enabled a hotkey to turn on/off the *SPEC layers for easy export to developers.
Organized all the symbols to have easy access to any variant, with a appropriate overrides for variable properties
Each component was made with a 'low fidelity' and 'high fidelity' version of itself. For designers using this library, it was meant to expedite transitioning from exploratory mockups to final ones.