UX Resources
This page includes information about UX Resources to help you do your job. It is not intended to be an all-inclusive list or to limit the methodologies or approaches you might take in your daily work. If you believe that something useful is missing, please submit an MR!
UX team workflows
UX Department Google Calendar
We use the shared UX Department Google Calendar (link is only available to GitLab employees) to advertise upcoming meetings and events. Anyone in the UX Department can add events to this calendar but only managers can make changes to events and manage sharing. These invites are only viewable by GitLab employees.
To add the UX Department Calendar to your list of calendars:
- Go to your calendar
- Scroll the left sidebar down to
Other calendars
- Press on
+
- Select
Subscribe to calendar
- Enter in the search field
gitlab.com_9psh26fha3e4mvhlrefusb619k@group.calendar.google.com
and then press enter on your keyboard
NOTE: Please do NOT remove any meetings from this calendar or any other shared calendars, as it removes the event from everyone’s calendar.
Design resources
The following resources are intended primarily to help Product Designers.
GitLab Design project
The GitLab design project is primarily used by the Product Design team to document workflows and processes. For details, please visit the project README.
YouTube Channels
- UX Team
- UX Scorecards
- UX Forum
- GitLab Design Talks - Iteration
- GitLab Design Talks - Collaboration
- GitLab Design Talks - Design Leadership & Career Development
Pajamas Design System
The GitLab Design System, Pajamas, was developed to increase iteration speed and bring consistency to the UI through reusable and robust components. This system helps keep the application DRY and allows designers to focus their efforts on solving user needs, rather than recreating elements and reinventing solutions. It also empowers Product, Engineering, and the Community to use these defined patterns when proposing solutions.
- Visit design.gitlab.com
- View the Pajamas UI Kit on Figma
- View the project
- View dev object model (video)
SVGs
Our SVG repository manages all GitLab SVG assets by creating an SVG sprite out of icons and optimizing SVG-based illustrations.
Jobs to be Done (JTBD)
We use the JTBD framework for viewing products and solutions in terms of the jobs customers are trying to achieve. It’s about understanding the goals that people want to accomplish. JTBD is used throughout the design process to determine scope, validate direction, evaluate existing experiences with UX Scorecards, and assess our Category Maturity with Category Maturity Scorecards.
Design Reviews
View how we collect synchronous and asyncrhonous design feedback.
Tools
Figma We use Figma for designing and prototyping. Our Pajamas UI kit contains design assets, components, and styles for GitLab’s design system, Pajamas. Additionally, there is a Figma plugin available that allows designers to upload design files directly into a GitLab issue. Every product designer should receive access to Figma during onboarding. If you don’t have the access you need, reach out to your manager. If you are not a product designer but want View access (including the ability to leave comments), create a free Figma account and ask your stage group designer for a link to the relevant files.
Figma admins and their role scope are defined as:
Admin | Scope |
---|---|
@tauriedavis | Tech stack owner, user management (Provisioning/deprovisioning), billing |
@vkarnes | Tech stack owner fall back |
@jeldergl | User management (Provisioning/deprovisioning), design ops |
@danmh | Design ops |
Figjam We use Figjam for collecting design feedback, mapping workflows, brainstorming, affinity mapping, and anything else where we need a visual, whiteboard-like workspace.
Everyone in the UX department and all Product Managers can get a Figma account with the ability to create new Figjam boards. If you want to share your Figjam board to get feedback from members of your team who do not have a Figma account, you can send an anonymous link via the Share dialog.
Dovetail We use Dovetail to manage and analyze research findings. If you need access, please submit an Access Request.
Tutorials
The UX team is encouraged to make improvements directly in the product when they find something that is small and easy to change.
- Technical Tutorials for Product Designers - video playlist for best practices on technical topics
- How to do UI Code Contributions
- Step by Step Guide to Make Code Changes
- Using data for design decisions
- Implementing frontend click tracking for designers
Prototypes
Coming soon.
Research resources
The following resources may be helpful to UX Researchers, Product Designers, and Product Managers, since all of these roles conduct user research. For more information, see the UX Research section of the handbook.
UX Research project
The UX Research project contains all research undertaken by GitLab’s UX researchers and is only used for the organization and tracking of UX research issues.
System Usability Scale
Once each quarter, we run a System Usability Scale (SUS) survey to measure user perception of the GitLab product. We send the survey to members of the wider GitLab community, with the goal of asking for a response from any individual no more than once per year.
UX performance indicators
We track our effectiveness through UX performance indicators (PIs). Our e-group reviews these PIs once a month in the Engineering Key Review.
User personas
User personas represent the people who actually use GitLab. The UX and Marketing teams use personas to inform decisions around the user experience and design.
From the GitLab team
Not only do our team members create great work for the wider GitLab community, but they also create some amazing industry-related resources to push our craft forward.
- Building Design Systems: Unify User Experiences through a Shared Design Language, by Taurie Davis and Sarrah Vesselov
- Craft Awesome Web Typography, by Matej Latin
- Hemingway - Figma plugin, by Michael Le
- GitLab-ipsum, by Patrick Deuley and Jeremy Elder
Experimentation for the User Experience Team
How to do UI Code Contributions
Step by Step Guide to Make Code Changes
ac0e3d5e
)