Northeastern University Design System

•

The Goal: Provide cost effective, consistent experiences across websites within the ecosystem while providing a resilient tool kit that allows the product teams to spend more time thinking about the business and user objectives.

The Challenge Faced: Over the years the ecosystem of websites grew tremendously without any guardrails around UI patterns, visual design and content development. As a result the website within Northeastern University ecosystem do not seem to belong to the same brand and are hard to navigate for users.

The Road Taken: The project started with the audit of websites within the ecosystem. The audit was focused on identifying patterns in functionality, design and content. The main goal of the audit was to identify patterns, look into intended purpose of existing components, categorise patterns, establish required variations and naming convention. In the design phase the team created elegant interfaces that are easy to use and meet accessibility standards. Once the designs were finalized, the spec documentation was created to improve communication from design to development, and standardize the usability heuristics Northeastern University values.

The Destination: The design system has been integral to the rebranding process, establishing marketing team as stewards of the Northeastern brand and providing product teams a framework to quickly piece together the websites with predictable and consistent user experiences. The design system is resilient. The variations of components fall in line with the standards, and the elements such as font hierarchy and CTAs act the same way across each component of the system creating a larger brand experience that is consistent across each site and the entire ecosystem. As more sites adopt the design system, we’re constantly pressure testing if we have given them enough tools.

Client: Northeastern University

Deliverables: Content audit, wireframes, concept sketches, design comps, documentation for developers