Cognizant needed a design vocabulary to unify its 100+ sites for its products and services. After auditing all the sites and identifing key elements, patterns, and pages, I worked in close collaboration with internal design and development teams at Cognizant to create a holistic design system that could adapt to content anywhere in the Cognizant network of websites and align design decision-making moving forward. This strategy eventually took shape as a front-end code base similar to Twitter Bootstrap and user-centric resource site with searchable content, educational materials, design patterns, and code snippets.
I created a styleguide to guide development, aid in the creation of future modules, standardize custom site sections and interactions. It includes responsive vertical and baseline grids, a modular type scale, interactivity guidelines, and photo treatment step-through.
View the Guide
In order to catch the user's attention and offset the serious nature of the content, the interactions needed to feel as natural as possible. The best way to do that is use actual physics to create the animations. A higher tension increases total speed and bounciness. A lower friction increases ending vibration speed.