A modular design system for 100+ sites across the internet

Cognizant is a NASDAQ-100 and S&P 500 international corporation that provides custom information technology, consulting, and business process outsourcing services. It's the third largest IT company in the world behind Accenture and IBM and it prides itself for pushing the limits of technology. Design    |    User Experience    |    Creative Technology
About
Flexible Design

Cognizant needed a design vocabulary to unify its 100+ sites for its products and services. After auditing all the sites and identifying 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.

Design System
Styleguide built for scaling

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
Prototyping Animations

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.