GitLab UX 2020 Year in Review

A global pandemic and broad social unrest have made this year difficult for everyone. When times are as tough as 2020 has proven to be, it's easy to focus on the negative and forget about the many good things that happened along the way. But our product designers, user researchers, and technical writers spend every day doing great work, and we can't let that slip by unnoticed.

In this post, I want to be intentional about celebrating our successes during a year when many of us wanted to just curl up under a comfy blanket and wait for the turmoil to pass. So, let's take a moment to reflect on some of the things we can feel really proud to have achieved.

Usability is now a key consideration in our category maturity model

Historically, we rated the maturity of our product areas fairly subjectively and based almost entirely on feature availability. This year, that changed when we introduced Category Maturity Scorecards that are based on user research. Now, we start by considering the Job to be Done (JTBD) that our users need to accomplish, and we gather user feedback to rate the entire experience -- not just functionality, but usability, too.

We've learned some amazing things through this new approach, and those learnings have enabled us to make valuable recommendations to improve our product experience in areas like Code Review, Logging, and Issue Management. We have several additional scorecard initiatives underway, which means that our focus on creating an exceptional experience will only continue to grow.

So often, UX departments complain that they have to fight for executives to acknowledge the importance of usability on business outcomes. In this case, refining category maturity started as an idea from Sid, our CEO. This is honestly amazing! It's the kind of user-centered focus that UX teams get really excited about.

As the person who leads UX at GitLab, it was awesome for me to watch our cross-functional team immediately get on board. Because measuring product maturity isn't an industry standard, through our value of Iteration it took us some time (and a false start) to determine the right approach. Fortunately, Product leadership was both enthusiastic and patient, UX Researchers were persistent in taking feedback and making methodological refinements, and Product Designers were courageous in trying something they've never done before. Even better: Technical Writing has been involved, too, as we've identified documentation improvements that will refine our product maturity.

This was truly a team effort, and I appreciate everyone who participated. 🤝

Our design system evolved from an idea into reality

When I joined GitLab in early 2019, our design system, Pajamas, was a scrappy project that the design team was working hard to get off the ground. We had designed a set of 28 single-source-of-truth components and were working hard to build them into GitLab UI, our Vue-based component library. We now have a robust design library that's implemented in Figma, and a large collection of SSOT Vue components are available to use in the product, too. Even more exciting: We're just finishing with implementing our 8 most impactful components across the entire product UI (buttons, alerts, dropdowns, modals, tabs, popovers, and tooltips), which will result in better performance and consistency when we're done. (We're so close!)

Most amazing to me was watching product designers and technical writers jump in to do much of this component migration work themselves. This was no small feat, because frontend development is not something that many of us are deeply skilled at. But, apparently we're both tenacious and brave, because we did the work anyway (with lots of help from our Frontend Engineers and the awesome documentation that our UX Foundations team created). In the process, we've gotten to know both our product features (which are complex) and our code base (which is also complex) even better, which makes us more effective in our day-to-day jobs.

Speaking of our UX Foundations team, this is another related success. At the beginning of 2020, we got the budgetary support to create a team that is dedicated solely to maintaining our design system and tooling. The team may be small, but its impact certainly isn't. They've already made some big improvements to things like:

• Improving tooling for designers: The move to Figma allows for greater collaboration, as well as community contributions. Sketch is only available on Mac platforms and there are no real-time collaboration features. Figma allows us to provide a UI Kit that is available across platforms, while being available for community contributors to use for free. It also promotes collaboration through its use of real-time editing capabilities and version history. We were able to streamline developer handoff by simply linking to the design file, reducing the need for additional plugins such as Sketch Measure.
• Making our color palette consistent and accessible: We addressed color contrast for accessibility and normalized the palette across hues, so that we can better systematize variable use throughout the UI.
• Improving consistency in our icons: With the creation of our own SVG Library, we've been working to deprecate our use of Font Awesome throughout the year. With the help of the Frontend department, we've closed out 156 out of 168 issues related to this effort.
• Moving towards more accessible workflows: Near the end of the year, we've started focusing more on building accessibility standards into our workflows. We are currently auditing and updating our voluntary product accessibility template, as well as incorporating accessibility audit guides into Pajamas.

Actionable insights

User research is so incredibly valuable... when you take action on it. But it can be a challenge for research teams to condense their powerful findings into small but compelling insights and then track those insights to determine whether they actually make it into the product.

In the second half of this year, our user research team made two big strides in this area. First, we started using Dovetail to help us more easily analyze research data to find meangingful insights and share it collaboratively with Product Managers and Product Designers (and anyone else who may be interested). But, they took this a step farther by also beginning to track actionable insights as a performance indicator.

The considerable effort it took to get both of these programs in place will be worth it as we watch our research efforts result in an even better product.

Beautifying our docs

Complex products like GitLab require high-quality documentation. Some things you just can't (and shouldn't) communicate through the UI, so users rely on great docs to get their daily jobs done.

Our Technical Writing team (many of whom have been with GitLab less than a year) worked hard to improve our docs site during 2020, including:

• Several UX research projects to discover - and fix! - problems users encounter when using the docs site.
• A "Beautification" effort that focused on an updated visual design. Our 2020 GitLab Contribute event included many rapid improvements to the docs site, and we made many more afterward. (Did you notice?)
• Ongoing content improvements, including making our docs more consistent, findable, detailed, and easier to read.
• Adding (a lot of) metadata information to product docs to help connect content contributors with Technical Writers.
• Coding innovations for automation, such as grammar checking with Vale, a linter, to automatically catch errors before they’re merged.

We’ve also completed work on a Docs Strategy roadmap to drive even more improvements in the upcoming months.

And so much more...

• GitLab Design Talks: In this fun video series, watch designers, technical writers, researchers, and product managers talk about Iteration and Collaboration at GitLab. (Special thanks to host Nick Post!)
• UX Showcase: See 100+ videos highlighting exciting UX work happening across GitLab. I learn something new everytime I watch one of these.
• Blog posts: Read about a variety of topics we were thinking about in 2020, including:
  • Designing in an all-remote company
  • Running an asynchronous sketching workshop for UX
  • Synchronous collaboration as a remote designer at GitLab
  • A tale of two file editors
  • How holistic UX design increased GitLab.com free trial signups
  • Improving iteration and collaboration with user stories
  • Designing incident management from scratch
  • Why GitLab is the right design collaboration tool for the entire team

Again, the GitLab UX team does amazing work every single day, and there is no way to capture all of that effort in a single blog post. As this year wraps up, I hope you personally take time to think about your own successes and the impact they had on our fast-moving company.

I also hope you know that we value every one of you. You are appreciated. 💜