Vitalsource pattern library

At VitalSource Media, the design team was tasked with creating a pattern library/material design standard for all the products in the company. The issue at hand was there were many products across the company that numerous clients were using, which all had a different look and feel to them. This was an issue not only from a branding point of view, but also on a technical side, all designs had their own code base and were not easily updated. We wanted users to know immediately that they were using a product in the VitalSource family, and would also have easy access to their other VitalSource products. 

The first thing we created was a consistent color palette and rules around its use. Being a company that services educational clients, accessibility standards were a necessity. All our colors needed to pass AA standards for contrast. 

The use of the VitalSource logo with the product name was also tested and iterated on. We needed to develop a standard layout of the logo on desktop and how it responded on mobile devices, along with the product name. Along with the logos, how the global banner responded across products was tested too. We gathered requirements from all products and created designs that would service all those requirement. 

Numerous other components, including buttons, form fields and tables were all designed for the material design library and how they are used and respond to numerous displays. Best practices for all components were discussed and agreed on and added to the library.

Here is a link to that site: http://demo.vpg.com/jigsaw_demo/patternlibraryvst/