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.

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 will take 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.

A work-in-progress view of the module pasteboard. Each module includes 3 or 4 responsive views depending on the needs of the module. There are also variations for light and dark backgrounds that provides visual breaks in the horizontal stripe layout that is created as the modules are built up.

Share Functionality

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 Styleguide