GitLab Pipeline Authoring group, 15 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: UX Research for CI/CD templates

Description

GitLab CI/CD team is on a mission to Make GitLab CI/CD Magic. ✨

In this video Nadia, the Product Designer at GitLab (Verify:Pipeline Authoring) walks through the insights from a card sort study aimed at making CI/CD templates more discoverable.

Research issue: https://gitlab.com/gitlab-org/ux-research/-/issues/1365

- What Verify:Pipeline Authoring team has done so far to improve the discoverability and usability of CI/CD templates in GitLab

- Insights from the card sorting study

- MVC next steps

- Blue sky vision: CI/CD templates marketplace

A

Hey everyone: this is nadia the product designer at gitlab, verify pipeline authoring team, and in this video I will walk you through the ux research. I ran to better understand how github users would group all of the different csc templates that we have so just a little bit of a background on why we're doing this. So um the verify pipeline lettering team is working on creating an easy cicd onboarding experience within github ui.

A

um A crucial part of that is improving the user experience for cicd templates, so csc templates are yaml templates that that one can use to create their pipeline either the whole pipeline or to add kind of a piece or a component of a pipeline to their csd pipeline.

A

So the current problem is that we have lots of cicd templates um but they're, really under leveraged in the product, they're uh difficult to find they're difficult to use um they're difficult to search. So just to show you what the current experience look looks like. So when you're getting started with ci cd, you need to create um a csd general configuration and we have these templates available, but there is no information about each template. So just the name itself, it doesn't provide you enough information to decide which template to use and yeah.

A

You could just try them out, but the way it works once you apply a template. It overrides everything that you have in your editor, um so it's not the the easiest way or the best way to kind of browse. The templates like applying uh all of these different tablets all over again until you stumble upon something that is a good fit for your project and your needs um also, the templates are not grouped really well. So we have this gigantic general group.

A

uh We have pages group pages, it's like a gitlab feature, specific group and yeah. We wanted to better understand how github users would group these templates, and this information can help us understand. How can we surface these templates and present them in a way that they're easy to search and browse and uh discover so um what? What have we done so far to um improve cica templates so we're in in true mvc fashion? We we are starting with very small things.

A

So, um of course, there are many things that we need to address with css templates, including the content of the templates themselves, but it's out of scope for this particular effort, but the first step that we took was collect descriptions for all of the different cicd templates. So we collaborated across multiple stages and functional groups to gather those descriptions, um and now, with this research, we um gathered insights around how gitlab users group and sort gitlab cicd templates.

A

So back to the study itself, it was an unmoderated card sort study, meaning um each cse. Template was a card and um the participants were asked to sort those cards into groups and name the groups as well. So um we had, uh all of them were github users. We had eight participants in total and their roles ranged between engineer, front and back end and also devops engineers, most of them used gitlab cicd to help them use jenkins, ci and uh yeah. We wanted to answer such questions as what groups would make sense to uh place.

A

The csc templates in what group names would make the most sense and what are the different ways uh to order and sort the existing csd templates in general. What are kind of the different approaches?

A

So if you want to learn more about how I analyzed the study um feel free to check out these screenshots, these are kind of the steps they took, but now, let's dive into the findings themselves, so first off uh the most interesting finding was that assassin templates can be sorted using several different mental models or they can be sorted based on kind of different things like their functionality, a stage or phase in the workflow like build or testing or deployment or qa their language or framework platform front end versus backend, and probably there are more ways to sort them as well.

A

So we had eight participants. Probably if we had more participants, we would find out even more ways to sort those templates. So the point is that every template can have several different kind of descriptors. Is the word attached to it? um So choosing just one group and allowing you to just search by that group um may not necessarily make it easy to find this template for many other users.

A

So um this kind of got me thinking that maybe a better way, a more inclusive way to make those templates discoverable would be to allow you to search and sort by different types of attributes, but I'm not gonna go into any solutions for now. This is just this was just defining. So there's no one single way for grouping the cic templates. There are main different attributes that we could attach to each template.

A

um Another thing, sassy templates, that don't have descriptions, are very difficult to identify. So um almost all cse templates currently have the descriptions defined not in the product, but we have it in a spreadsheet. We gathered this information and we used it in the card sort. So each card had the template name and its description, um but we did have a few templates that we weren't able to gather descriptions for, and those templates were much more likely to end up in the I don't know uh bucket.

A

So it's just just the name itself is just not enough information to have any understanding of what this template is uh and another thing uh participants uh wanted more information about the templates, so just the description itself also wasn't enough, so they wanted to preview the template and uh they wanted to know more about the template, usage and things like that and the different use cases and the job that can help you solve.

A

um So you know, ideally, we would want to provide information for every template feel free to check out the insights on dovetail as well. If you're interested the recordings of the participant sessions are in dovetail as well so okay, so how are we going to be applying these insights?

A

um Actually, we, we, you know our our assumptions and our hypotheses basically got confirmed through this research. So uh most of these issues have already been created, but uh this research uh validated a lot of the ideas that we already had so um the low-hanging fruit. The things that we can start acting on right now are providing descriptions for cic templates and github ui, so we're thinking for now to provide a tool tip to uh all of these different templates. It's not the best experience for sure.

A

Ideally, you would have access to a brief description right away somehow in this drop down, or we might have to explore other ways to surface these templates in the ui of course, but as an mvc. This would already be some help.

A

um So uh next I have a design issue to actually dive into which groups we can use for the existing css templates within the limitations of the existing ui that we have so yeah. You might be wondering okay, so my team, my group uh maintains some of the cse templates and I wonder what how it's gonna be grouped. So, what's gonna change, so I will make sure to loop.

A

Everyone in this design issue that I will start working on soon and um I will make sure to include everyone uh in the discussions around how to group those templates to make sure that everyone can weigh in so, if you're, maintaining some csv templates.

A

I will try to reach out to everyone interested next. We will allow you to filter the templates by category so right now, when you filter here, you can only filter by the names of the templates, but the categories themselves are not searchable, um so we will fix that and then the next steps that will um have much more impact on making this um feature more usable generally, making cesar templates more usable.

A

So there's a design issue where we've been exploring how to better surface cesiu templates and github ui. So we've been exploring um some ideas like this.

A

That just gives us more real estate to work with and we would be able to present the groups here so making the groups more discoverable as well and then allow you to search and we're also working on making the templates easier to apply. So you would be able to preview the template and you would be able to use the template in a few different ways.

A

So you would be able to include that template as an external pipeline um kind of or you would be able to just edit the template directly in the pipeline editor or copy the template content as well, and then the most interesting efforts are coming after that.

A

So I would like to explore how we could make the templates searchable or filterable by many different attributes, so perhaps associating some kind of tags or like labels, with templates kind of like we do with issues allowing you to search by different attributes or filter by different attributes, and then some more disruptive, kind of or innovative features that we're thinking about is actually creating a marketplace of csd templates and then tying that marketplace to gitlab ui.

A

So, as an mbc of that, we have a proposal to store cse templates in external uh project or external group, where every assassin template is a project that could have a readme with additional information about each templates usage. All of those details that um gitlab users need to understand can this template actually help them solve their problem?

A

And things like that? This is a huge effort. It's very early in um the development workflow, we're just um kind of gathering insights and the popular authoring team is going to have. um I think, big and think small sessions about this soon as well. So um keep an eye out on updates for that, uh and we have this issue for the ci template marketplace that is uh sort of similar to this.

A

But if you want to learn more about this issue check out this issue as well, because there are also some interesting community contributions that we're looking at. That could maybe help us solve uh this problem.

A

But um yeah there's just lots of discussions happening. So if you have any ideas around assassin, templates usage in git, lab cicd templates marketplace and how we should change this asset templates to really be well positioned in in the space as we're um maturing uh our product offering uh feel free to comment in these issues as well, so yeah I'll feel free to poke around here.

A

If you want to get raw data for the study, you can check it out here and uh if you're interested in the next steps for this research or for uh generally improving csc templates, uh feel free to get in touch with any questions. And I'm happy to tell you more. Thank you. Bye.