Intro

"A Design System is a collection of design guidelines, coded components and technical documentation specifically built to help streamline the production of digital products in a given organization."

The medium to long-term results of a design system consist of better components, cheaper/faster development processes, better User Experience through interface consistency, increased accessibility, performance, etc.

By reusing the Design System components we speed up the frontend development process, freeing up the workforce to solve bigger and better problems.

Process

The Design System is a long term commitment. That doesn't mean we only have long term results. The process is designed to render results relatively quickly.

Pilot Project

Design Systems always start with a Pilot Project. You can see [what makes a good Pilot Project here]. As the pilot project gets designed and developed, we make design decisions focused on component reusability, flexibility and robustness.

As we build the Pilot Project components under this systems approach, the components are now designed for reusability, and documented in the Pattern Library, so they become easily accessible for future projects.

Reusability

By the time the fist Pilot Project reaches beta stage, the Pattern Library already has a critical mass of components and we can start working on a second project. This is the first time the teams will really see the advantages of the Design System. By leveraging the components created in the previous phase, the team can focus on solving new problems, while reusing the solutions stored in the Pattern Library.

Things like buttons and menus, are consistent in all websites, and are the obvious examples of reusability. Other less obvious examples are typography, spacing and layout systems that are often "invisible" to the untrained eye.

Long Game

Design Systems are ongoing projects by nature. Once we implement the first couple of projects, we can define clear governance guidelines, from how to reuse components, to how we decide if we should add new component, extend an old one or create a one-off component for that website alone.

With each new project created under the Design System, the design process will leverage more and more the DS components, and the team will focus on solving the specific problems for each website, and in parallel, decide which should be incorporated to the Design System for future use.

Deliverable

For Design Systems, in most cases, we will have multiple deliverables, such as pilot projects, which are working websites, following the [Interface Design and Development] process.

On top of that, the main deliverable of the Design System is the Pattern Library, where all the design guidelines and technical documentation lives.

Format and Timeframe

We use a customized agile methodology to cut some corners and achieve the results in more efficient way. The timeframe for the implementation may vary radically depending on the scope and complexity.