Swan Design System

Vistaprint's Design System implemented in React and is used across the company, its subsidiaries and sister companies

Vistaprint Lead Software Engineer  - 
Table of Contents

About the Project

SWAN enables digital product teams to design, prototype and accelerate building exceptional experiences for all Vista customers.

Swan Documentation

Our Design Principles

My Contribution


Best thing during the project

Worst thing during the project

The company is highly distributed and hence are the teams and projects which also results in a lot of packages being created to allow developers to focus on their own domain. This creates a problem of waterfall effect for the dependency updates when something major has been released. So In a way, earlier in the monolith, it took time because it could break things, not its taking more time because of the dependency map of individual pages.

Biggest Problem that you solved in the projects

Adoptions of such systems specially with major breaking changes are hard. Especially considering the dependency of one team on the other and other on someone else like a waterfall.

We did two things to solve the problem:

  1. Who would you as a project owner know, what is the right time to start migrations?
  1. How can the developers adopts the new system even when they are not front-end focused team.

First, we created a very detailed documentation site with details on all the components and several examples with live code changes and preview.

We also given options to dev to opt in one of the below based on the needs of the team:

What did you learnt new?