As a leader in encryption products that help organizations protect their data, Virtru had an expanding set of core products. The Virtru Design System, known internally as Virtuoso, was developed for both Virtru products and branding, ensuring consistency. The system was inspired by the Atomic Design concepts of Brad Frost, and consists of three main sections, atoms, molecules and organisms. My role was to not only help brainstorm each of these areas and the components within them, but I also helped to draft the outline of the system as well as a portion of the copywriting. Below are selected samples of the overall system, with a focus on the interaction design parts and patterns that I had a major role in developing.
Revisions to our color palette led us to the opportunity to take a more accessible approach in our product design improvements, and online marketing efforts. As a baseline, I chose color combinations that would help determine which we could use moving forward, and which to stay away from. Our goal was a contrast ratio of at least 4.5:1 or higher for WCAG 2.0, level AA compliance.
The design system also informed our visual approach outside of our products, and helped to shape other areas of the marketing organization. Colors, shapes and spacing elements, for example, began to be incorporated into the company website. The system also aided in the visualization of the Virtru favicon, app extension and mobile app icons.
Virtru's product icons quickly became an integral part of the design system. The uses for these icons range from dropdown menus, to product integration icons for Google and Microsoft, and standalone icons for marketing. The product icons were created in 24, 18 and 12 pixel sizes, in both outlined and solid versions. The sharp edges were rounded off, as I wanted these to be more in line with the rounded parts found in Virtru's logo.
Below are select icons that I created for Virtru's partnership with Google. Virtru adds security and privacy features to Google's Gmail and Drive products, and we worked closely with them to ensure that our icons fit well within their Material Design guidelines. To help Virtru stand out and avoid confusion with Google's blue, Virtru's icons were created in our "darker blue" color.
The Virtru brand is apparent in Google's Gmail and Drive products, seen below. The Virtru Gmail and Drive web extension products were meant to provide security, without compromising the users familiarity with these products. The goal was retain the expected native experiences, regardless of the platform.
