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

Group Direction - Foundations

Stage Ecosystem
Maturity Viable
Last reviewed 2021-09-10

This direction is constantly evolving, and everyone can contribute:

Overview

The Foundations team is responsible for leading the direction of the experience design, visual style, and technical tooling of the GitLab product. This group encompasses two broad areas of focus:

  1. Tooling-focused enhancements
  2. User-focused enhancements

Tooling-focused enhancements include:

User-focused enhancements include:

Both of these areas lead to a greater user and contributor experience while increasing operational efficiency. We aim to create functional growth that scales for the long term. Our goal with the Foundations team is to treat the underlying foundation of GitLab as a first-class internal product which supports product designers, engineers, and product managers to more efficiently perform their roles.

Direction

As the GitLab product expands to include offerings for the entire DevOps lifecycle, it is critical to provide support for building a cohesive product that has the ability to replace disparate DevOps toolchains.

To serve these needs, we will work with the Groups and Categories across GitLab to contribute to our design system, Pajamas, while also continuing to define guidelines and best practices that will inform how these teams are designing and building products. Additionally, this team will act as a centralized resource, helping to triage large scale technical and experience problems as the need arises.

Target audience

Foundations is focused on supporting internal users and product teams, with a focus on four cross-functional counterparts: Product Designers, Technical Writers, Engineers, and Product Managers.

We also aim to improve the community contributor experience by streamlining the process of writing consistent code that conforms to set practices.

What’s in progress, next, and later

In progress

Next

Later

What we've accomplished

* [Creating, building, and styling foundation components](https://gitlab.com/gitlab-com/www-gitlab-com/-/issues/4355). We identified 36 foundational components that are central to building and maintaining features at GitLab. In order to streamline the process of implementing components, we’ve defined the stages of a [component lifecycle](https://design.gitlab.com/get-started/lifecycle). This first effort was to complete the design, documentation, and build of the 36 foundational components. This allowed designers and engineers to have a robust system to draw from when designing and building GitLab products. * [Moving our Pajamas UI Kit from Sketch to Figma](https://gitlab.com/gitlab-org/gitlab-design/-/boards/1511008?&label_name[]=Figma). The move to Figma allowed for greater collaboration, as well as community contributions. Previously, Sketch was only available on Mac platforms and there was no real-time collaboration features. Figma allowed us to provide a UI Kit that is available across platforms, while being available for community contributors to utilize for free. It also promoted collaboration through its use of real-time editing capabilities and version history. We are now able to streamline developer handoff by simply linking to the design file, reducing the need for additional plugins such as Sketch Measure. * [Updating our color palette](https://gitlab.com/groups/gitlab-org/-/epics/2964) to address color contrast for accessibility, and to normalize the palette across hues so that we can better systematize variable use throughout the UI. * [Auditing and updating our existing VPAT.](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2155) With the release of VPAT 2.4 508, we set out to update our template with the new criteria and ensure that our results from the previous round of testing were accurate. The VPAT is important for many organizations to audit GitLab's maturity in terms of accessibility, as well as provide a baseline for improvements that the team can work to address. * [Auditing and updating button color, meaning, hierarchy, placement, and accessibility](https://gitlab.com/groups/gitlab-org/-/epics/4665) A large variety of button variants make it more difficult for users to determine which actions are available in a given context, while also hindering accessibility and creating unclear hierarchy. With this effort, we reduced visual clutter, avoided color combinations that impact users with color blindness, and let category, order, and placement define hierarchy. After validating the solution, we ensured that documentation was clear and Engineering had clear guidance on when and how to use buttons across the application. To do this, we audited and updated the top ~40 visited pages in order to provide concrete examples that will help other teams contribute. * [Deprecating Font Awesome icons](https://gitlab.com/groups/gitlab-org/-/epics/2331) in favor of our own [SVG library](http://gitlab-org.gitlab.io/gitlab-svgs/). * [Continue building comprehensive accessibility standards into our workflows through education.](https://gitlab.com/groups/gitlab-org/-/epics/5054) Education is one of the most important and impactful areas we can focus on in order to improve accessibility. Increased knowledge of accessibility standards, guidelines, and other requirements give designers and engineers a broadened perspective, as well as the ability to implement more effective accessibility solutions.

What we’re not doing

Building and integrating all components across GitLab. The scope of this group is to provide guidance and governance for our design system and related tooling, and is staffed with dedicated Product Designers to support that. However, creating those components and implementing them throughtout the application is a massive lift that requires participation from every Group and Category. While Foundations has some Frontend Engineering capacity, it can’t be responsible for creating and implementing everything.

Maturity plan

Today, we consider our Foundations to be Viable. Below is how we think we’ll grow that maturity level over time:

Foundations Buddies

Foundations work covers a wide range of issues when it comes to our Design System. Historically we had a Working Group for GitLab UI, but the work on our Design System is an continuious effort.

We invite Frontend Engineers from other Teams and Community Contributors to pick up frontend-related issues if they have an interest in the UX/FE Foundation work. Issues that are ready to be picked up are labeled with the ux-foundations-needs-fe label.

GitLab Team Members are able to self-identify as foundations_buddy Domain Experts if they are interested UX/FE Foundation work. Doing so will help our Product Designers to reach out to folks in order to get Engineering support.

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