Category Direction - Design System

Design System

   
Stage Create
Maturity Planned
Content Last Reviewed 2020-07-24

Introduction

The category of Design System at GitLab compliments Design Management category by adding the ability to manage, document and version your design system.

Please reach out to PM Christen Dybenko (E-Mail) if you'd like to provide feedback or ask questions about what's coming.

What is a Design System?

A Design System is a living, breathing repository that sets the look and feel of a production web app. Quite often they incorporate variables and generate production .css from LESS or SASS.

The simplest way to implement a Design System is to start with an open-source library (containing HTML, CSS, and JS) like Bootstrap or Material UI. From there you can easily include these libraries in your repository and modify the variables to set colors, spacing, and brand-specific look and feel of the styles.

However, since it's hard to preview your changes to these libraries, most companies require a more robust system that lets them view their changes in a separate repository from the production app. This reduces the risk of putting something live that doesn't work and increases code re-use.

At GitLab, our Design System static site called Pajamas and our components are edited (via code) in Storybook in the GitLabUI repo.

The best Design Systems allow the creation of components in their smallest format - for example, a button (atom) or a more complex layout like a table header (molecule). Code is re-used between atoms, molecules, organisms, templates, and pages for consistency.

It's also important that the design process for creating these new components in a design tool like Figma are connect to their live counterparts in the repository.

Long Term Strategy

TBD

Target Audience and Experience

The Design System category is targeted at product designers and software developers who are both primary contributors and consumers. The belief that design systems are just for designers is a main hurdle that teams have to get over. Design systems are not fully adopted when this is the belief. Organizations have to understand that a design system improves the efficiency of their development teams while also improving the overall user experience in order for teams to invest. GitLab can help shape this story

These two personas may interact with product managers or software engineers in test to get these components ready for the actual app.

The minimal user journey will provide designers with the ability to: TBD

What's Next & Why

Future considerations

TBD

Competitive Landscape

What is missed in the current market:

Market Research

Forrester now reports that 50% of companies are using some form of a Design System.

A competitive analysis is in progress to define players in the design system market.

Business Opportunity

Expert from Design Management Direction

The total market potential of Design Tools is over US $4 billion and growing. There is a significant opportunity for an application that can successfully engage developers and design teams before and during the DevOps lifecycle. If GitLab integrates with the major design tools such as InVision (5,000,000 users), Sketch (1,000,000 users,) and Figma (1,000,000 users) and adds value in the form of visual developer handoffs, we believe product quality will increase.

Analyst Landscape

TBD

Top Customer Success/Sales issue(s)

No customer issues yet, because the feature is so new

Top user issue(s)

TBD

Top internal customer issue(s)

TBD

Top Vision Item(s)

TBD