With the cross-functional responsibilities of R&D team members growing, keeping things consistent needs to be as easy as possible.
Design systems help solidify a baseline of visual standards that stay consistent no matter what team is looking at them.
The Mosaic Design System was the visual language built for all design moving forward. Once created and socialized internally, the idea was that all development and design teams would use Mosaic as a guide for visual styles, interaction design patterns, and control options.
Mosaic – Colors
The color palette is usually the first step in building a design system. I collaborated with the marketing department to identify existing brand colors and built up from there. Research in UI color psychology and readability was conducted to ensure all bases were covered.
As feature work was completed, the design team members were in charge of adding elements and editing existing entries. The Mosiac design system would be constantly evolving to meet the needs of the R&D organization.
Mosaic – Typography
The next building block was the use of fonts and typography. Again, research in readability and font selection proved helpful for the user base we designed to skews a little older in age for our demographics.
Mosiac – Icons
We ended up using a combination of Font Awesome icons and custom SVG’s.
