MVP Design System

 

Context

The SiriusDecisions product line was going through a rebrand and the styles across the client portal needed to be updated to reflect the new branding.

 

Problem

In the past, each design solution was created to solve a very specific problem and would then need to be re-worked to solve another just as well. This resulted in inconsistent and under defined styles and components across the client portal. It would be nearly impossible to update styles globally and making one off styling updates, page-by-page, would be inefficient and perpetuate the same level of inconsistent experiences for our users.

 

Goal

The objective was to update all of the components in an efficient and scalable way that would create a more consistent experience for our users. We needed a system that encouraged re-use over re-work.

 
 

Process

  • Component Audit

  • Accessibility Review

  • Competitive Analysis

  • Prioritization

  • Style Standardization

  • Pattern Library Creation

  • Usage Documentation

  • QA Testing

 

Tools

  • Sketch

  • Invision

  • Chrome DevTools

  • Freehand

 

My Role

  • UI Design

  • Creative Direction

  • System Design

  • Project Management

Solution

We achieved the goal by building an MVP design system. The system included a robust collection of reusable and interchangeable components, paired with clear guidance on their usage.

 

Foundational elements unify all components

Type scale and color usage are defined in a way that can be applied across all components. 

Text spacing and color contrast comply with accessibility best practices (WCAG 2.1) to ensure that all essential interface elements are perceivable.

The lower ratio of the type scale provides the variety of small font sizes commonly needed for a product site.

The role of color is defined, ensuring that components can work together repeatedly, regardless of the use-case.

Components are built with modularity in mind

All elements of a component adhere to a 4-point grid to ensure alignment and consistent spacing.

The 4-point grid system creates a structure that allows for a cohesive relationship between flexible components.

Each component has an explicit purpose

Each component’s purpose is documented to ensure that usage is consistent and repeatable.

Styles are applied consistently to indicate a change in meaning.

Clear usage guidance enables developers to make basic design decisions when a mock has not been provided.

Complex components are standardized yet flexible

Common elements are standardized to ensure designs are cohesive.

Standards define which elements are flexible to enable modularity.

Pattern variations have a distinct purpose.

A shared Sketch library keeps designers in sync

All design files reference symbols from a single source to ensure consistency across projects.

Components are built with nested symbols and shared styles to make it easy to manage the system at scale.

Contextually appropriate variations are available to the designer to improve efficiency and prevent unintentional modifications.

Pre-built components shift the focus of the design process from making style decisions to solving user needs.