Design

Launching your design system, part 1:
Large-scale redesign

4 min read
Will Fanguy
  •  May 30, 2018
Link copied to clipboard

Launching a new design system can be a daunting task. There are so many new and moving parts, so many people to convince and impress, and so much new code. So how do you decide the best way to introduce the fruits of your labor to the rest of your company (and potentially the world)?

First things first: take a deep breath. If it feels too big, think about it like this: you don’t have to look at your entire project all at once; you should always look at a little piece first. Whether that little piece is a pilot for a large scale overhaul or one of the many little pieces you’ll work on one at a time, just remember: Launching a design system doesn’t have to be overwhelming.

Option 1: a large-scale redesign

The first option you have for launching your design system is a large-scale redesign. When a team takes this approach, it typically means more time is spent designing the system before rolling it out everywhere. The big tasks often include doing a visual refresh or a consolidation of components. This top-to-bottom approach allows the team to develop a more complete system—from the choices of colors and typography to reusable components, page layouts, and interaction flows.

Related: A comprehensive guide to design systems

When to choose a large-scale redesign

There are a few things you should be on the lookout for when trying to decide if a large-scale design system launch is the best for your team. Ideally, you’ll want to find a pilot project within your product to use as a base for further modifications. Rebuilding a real part of the product can give a great laboratory for testing new components, responsive layouts, and new typography styles. Here’s what you should look for:

  • Potential for common components and patterns: does this pilot project have many common components and patterns that can be reused in other areas of the product?
  • High value elements: like the components and patterns mentioned above, are there any elements that have an unusually high value to the business? Are there elements that are essential to a particularly high value user flow?
  • Scope and technical feasibility: Put simply, can this be done in the time allotted without the need for a large refactor? Is this relatively simple vs the time you have allotted for the pilot project?

Related: The benefits of shared design systems

How to pull off a large-scale redesign

Both types of design system launches have their respective high points (and drawbacks). Here are two big things to focus on when pulling off a large-scale redesign.

First of all, a design system that’s loved by both designers and developers has a greater chance of successTwitter Logo. The more champions, the better. Don’t be afraid to recruit help, ask for opinions, and share some early versions with every type of team member. If your team is working in a silo with minimal outside feedback, you’ll likely make quick progress in your redesign, but that also means you’ll have to work harder to encourage other teams to adopt your new and improved design system.

Also on the topic of getting widespread use, don’t forget the attention to detail on your documentationTwitter Logo. A common refrain in design systems is “If it’s not documented, it doesn’t exist.” You’ll learn that documentation becomes more important when introducing a new design system because the tendency to reuse old patterns is often more prevalent than the enthusiasm around new ones. Documentation helps promote your new patterns while reducing the need to write new code. It also gives you an opportunity to improve use cases by providing code examples and guidelines.

“Launching a design system doesn’t have to be overwhelming.”

Twitter Logo

Organizing your new design system

If you’re looking for a seamless way to organize your new design system as you’re building it and when you want to get it ready for release, you should give our new Design System Manager a try.

InVision Design System Manager (DSM) is a platform that provides a simple, unified way to design at scale by helping teams create, maintain, and evolve a powerful design system. The DSM platform includes a Sketch plugin, a web view, and a set of APIs—everything a company needs for a powerful design system, including the potential for multiple libraries. DSM serves as home base for the design team—a shared structure housing the collective knowledge of thoughtful design decisions.

Don’t have a DSM account yet? Be sure to sign up for early access today. Current DSM users, sign in below to try out some of our newest features.

Start building now!

Collaborate in real time on a digital whiteboard