Gitlab hero border pattern left svg Gitlab hero border pattern right svg

Category Direction - Design Management

Design Management

   
Stage Create
Maturity Minimal
Content Last Reviewed 2020-09-30

Introduction

Our goal with Design Management is to give product teams a first-class way to post, discuss and execute on their designs within GitLab. Right now, our feature is only on GitLab issues. We support integrations with major design tools and diagramming tools. Design management will consider the design life cycle from generating ideas, design reviews, design systems, and more.

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

Key terminology that helps us segment our roadmap

Proactive vs Reactive design features

One of the interesting concepts we brainstormed and learned from our analyst conversations was the difference between being proactive or reactive as a designer. Right now, our design management features focus mostly on reactive design.

Examples of Reactive design work:

Examples of Proactive design work:

Transient vs Evergreen design features

Design Management at GitLab encompasses two broad areas of features:

GitLab is in a unique position to offer both types of Design features because our platform supports issues (collaboration with engineering) and repositories (where the actual code lives).

Examples of Transient "Communication-based" Design Management features:

Examples of Evergreen "Project-based" Design Management features

Long Term Strategy

Long term, we'll need we need to adapt GitLab to incorporate the design persona as a first class user within the app. From our research, we understand that design workflows are often different from the typical DevOps flow. Many companies that employ "Design First" workflows are often working so far ahead of the DevOps process that we need to consider this as its own ecosystem and key in on. We recognize that this workflow can be quite iterative and often done and presented/approved well ahead of an issue ever being written.

Ideally, GitLab will support the flexiblity of any design workflow, while featuring a simplified way to share of Design work. It would allow for independent design deadlines or separate milestones from engineering, and empower the Designer to easily track/follow the issue through to production.

Typical designer workflow across tools

Typical designer workflow across tools

GitLab vision for a new designer workflow

Typical designer workflow across tools

Target Audience and Experience

Design Management is targeted at product designers who collaborate with product managers and software developers.

The minimal user journey will provide designers with the ability to upload mockups to an issue, and for point of interest discussions to happen on each image. Over time these mockups can be updated to resolve the discussions. As the mockups are changed, new versions will be created so that process can iterate.

As of 13.5, as we have achieved the core workflow for a design persona on a GitLab Issue, we are starting to consider how to bring in the more for the software developers and product managers to expand our growth.

Features we shipped

13.3 - Our Figma Plugin is live in the Figma plugin store. You can also check out the source code in our GitLab Figma plugin repository.

13.0 - Move Design Managment to Core/Foss so it can but used by everyone for free.** Read more about in the blog: https://about.gitlab.com/blog/2020/03/30/new-features-to-core/

12.9 - Versioned designs and point of interest discussions- We closed the original design management epic with a focus on collaboration between designers, developers and product managers on GitLab issues. This first iteration made ossible to upload discuss designs far more efficiently. Point of interest comments are the key feature, that allows much precise discussion rather than trying to verbally discuss multiple items of feedback on a single image in a single thread.

What's Next & Why

For one year, we were focused on building the core features that are essential to enable teams to use design management. This included all of the feedback we got from our own GitLab Design team. Our current date to this is 12/22/2020 but are already planning our growth.

The growth plan is being worked on in this issue: https://gitlab.com/gitlab-org/gitlab/-/issues/260428

New expansion themes that will enable more users to move over to design management:

  1. Personas - Only 0.86% of all GitLab users identify as "Designer". We want to open the design view to more personas by enabling the design view on attachments, repo files, and diagram integrations.
  2. Expand to more stages - Designs on e.g. MRs (highest traffic), epics and the left sidebar.
  3. Integrations - Allowing more tools to push to designs (Figma, Draw.io, Sketch, Adobe XD).

Goal 1: Moving up to viable maturity

Dogfood Design Management and get out of Minimal - We're working on an internal dogfooding epic which contains the issues that will help us remove the major pain points that our internal GitLab team has surfaced. This will take us a long way towards viable as these are the biggest usability concerns.

Goal 2: Growth and Performance Indicators

Ongoing: Enable our product analytics

Ongoing: Integrate with major design tools to support current workflows and increase users - We started official Figma and Sketch projects to work on our plugins. The Figma MVC will ship in 13.2 - track progress in this epic. Next: Collaborate with the other design tool companies as partners and build out API support so Product Designers can post to GitLab Issues from their preferred workflow. While working on this, upgrade our Issue Descriptions to support unfurled links (with thumbnail preview) from our own Designs as well as the partner design tools. Move engineering heavy lifting to the partner integration teams so we can power through.

Goal 3: Empower more peronsas

Next: Adding drawing and diagram files to the Designs - Allow the creation of a diagram or drawing directly inside the browser via an integration. We'll investigate the right ways to "open up the drawing board" to anyone working on an issue.

Next: Empower Product Designers and Leaders to easily stay on top of design progress at GitLab - Move "Designs" to its own space on the left side menu above Issues. Here we'll see all design updates in real time and map design images to issues in a more seamless and connected flow. Also to consider here would be to allow designs posted without an issue to encourage rapid feedback and turn around on ideas.

Later considerations

Later: Developer Handoff in Review Apps - Upgrade the existing Visual Review feature to have original Epic or Issue Designs move forward in the GitLab workflow for visual inspection in the merge request. The Product Designer would be notified and invited to also inspect which would cut down on a lot of back and forth communication that currently happens offline. Empower the Engineer and the Product Designer to compare the original design with live app. Allow them to give visual feedback by attaching comments to dom elements or on an x,y access. For example: Move a transparent overlay of the original design around to check measurements and other visual aspects.

Later: Design reviews and approvals - Once we have more usage of our designs throughout the DevOps flow, add approvals or other checks and balances that may be needed to lock down a design. The first step is to understand how current review and approval processes work outside of GitLab and how we could adapt those to GitLab.

Later: Design Management prototyping support - currently Design Management only supports static images which are a valuable part of the design process, but may not be able to fully communicate the user experience. Part of enabling communication around that process is to allowing users to create simple click-through prototypes for designs.

Later: Git backup of design files - When teams share source files such as the Pajamas Sketch file there is a lot of overhead with checkign that file in and out of a repo and having a design team share the file. We also would consider LFS (Large file system) and design agencies who may have huge repositories and would only be able to check out just a part of the entire repo for use.

Future considerations

Live Sketching in Issues Allow users to draw freehand on a digital whiteboard and see the real time cursor and sketching of other users who are live with them. We think this will enable more "off-the-cuff" brainstorming and foster an in-person experience with colleagues, even if working remote.

Later: Deep linking of assets - Imagine seeing an image asset in your repo or within a wiki and being able to click a button to pull down its original artwork from Sketch/Photoshop or beyond. If we achieve git backup of design files, we should be able to create deep links to their source artboards.

Future: AI to compare Designs to Production With the emergence of AI technologies, eventually Design AI could be a part of the CI pipeline to scan for visual changes against the original design, report differences, and recommend changes.

Competitive Landscape

Within the Design Tools market, each product broadly solves one or more of these problems:

The most full featured Design Tools, that are attempting to solve all these problems are:

What is missed in the current market:

Given GitLab's unique strength as the single source of truth for planning and source code, we are well positioned to work with Product Design teams and encourage Product Designers to participate from design iteration through to production:

Market Research

A competitive analysis was also conducted to further understand existing players in the market.

Business Opportunity

Estimating our TAM for Design Management

We've learned that a typical designer:developer ratio is 1:8 (at GitLab, our ratio is 1:7).

Also, we know there are 24M developers worldwide.

24M / 8 = 3M designers worldwide

If we achieved signing up all of these designers for GitLab, our TAM would be $144M on Starter/Bronze, $684M on Premium/Silver, and $3.6B on Ultimate/Gold.

Growth of other tools

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

In the past month, we've had briefings with Redmonk, Forrester and Gartner. We've validated that we are solving a big problem with our proposal to bring Designers into Devops.

We learned that a new potential term for this type of software is: "Digital product design platforms" and we are also considering the term "DesignOps" which might play well with DevOps at GitLab.

Top Customer Success/Sales issue(s)

No customer issues yet, because the feature is so new

Top user issue(s)

Top internal customer issue(s)

Top Vision Item(s)

Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license