GitLab Runner UX, 6 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: UX Showcase New runner creation flow

Description

Gina Doyle (Senior Product Designer: Pipeline Insights & Runner) presents about the new runner creation flow that will be released in the coming milestones.

Slides: https://www.figma.com/proto/fVM0BGwYZj13isBSuvrUEu/Gina---UX-Showcase-(Feb-6-2023)?page-id=0%3A1&node-id=904%3A5593&viewport=301%2C338%2C0.14&scaling=contain&starting-point-node-id=1%3A20
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/383139/
Prototype: https://www.figma.com/proto/fVM0BGwYZj13isBSuvrUEu/Gina---UX-Showcase-(Feb-6-2023)?page-id=919%3A174&node-id=921%3A5347&viewport=1061%2C531%2C0.2&scaling=min-zoom&starting-point-node-id=921%3A5347&show-proto-sidebar=1

A

Hello, everyone, I'm Gina, I'm, a senior product designer for pipeline insights and Runner and I'm very excited to share this. Today, it's been one of my favorite projects at git lab so far, because I feel like it really improves usability and it's the new Runner creation flow uh within the runner Fleet category, one of the groups that I I work on so the first thing I wanted to talk about was just how this impacts, everyone on the call, um if you've ever had to as product designers, if you've ever had to review an MR.

A

Where maybe it's for the runner group, you need to create a runner on your preview environment, whether that's GDK or a review app. You may have already come across and know the pla the pain of the confusing steps of how to create a runner. It's also once you create one, it's not very clear. If you complete the task successfully or not, um you do a lot of context. Switching which I will I will share in the next slides of what that current experience is like.

A

But then it also impacts our gitlab.com Runners, which are those shared Runners that are are like SAS customers would use and it also impacts our self-managed customers. So Runners right now are registered using a registration token, and that token is something that you can just like copy from the UI and that's what registers that Runner and each Runner has in in each area.

A

So if you're, let's say you're in the admin area, you use that same registration token to uh register all the runners in that instance, and if that registration token is compromised, someone could technically steal it and secretive data could be leaked until you rotate that token.

A

But you would have to then, as an admin of the instance, find that compromise token, which is a very manual process and then manually rotate each one or, if you're looking at like instances and groups and projects, you would have to find them all. So it really highlights that the registration token is a pretty large risk um and that's something that we knew internally and the runner team wanted to take on to make it more secure.

A

So now, I'll just focus on the UI and walk you through the current experience.

A

um So if you're, if you might have already seen this, if you're already familiar with how to create a runner, but the first thing here is when you bring up this modal to install a runner, you have to choose an environment, and at this point, without knowing much about runners, how do you know which environment to choose um and even like why they're important and then the second thing here is: there's this large thing to download and install a binary.

A

um It seems like a pretty large step and I'm wondering if it's needed every time, I create a runner and then not to mention the code that shows up the each one is a separate command, but they're all displayed in the same code block um so I'd have to manually copy them all and then I don't know if I need to actually run them all before I move to the next screen this. What I was just talking about that registration token.

A

It's I blurred it out here, because it's technically a secret, and if this is public, I don't want people seeing it, um but we we'll have to then copy this command to register the runner and then put it in the CLI. So it's a bit of context, switching on the user's side at this point- and this is a screenshot of me just doing this- uh so the first thing is when you paste the command.

A

You have to then enter all these inputs, even though they're already included in that command, so you're just like entering down and it's confusing why this input is even needed in the CLI, because you kind of already did it in the UI and then, as a pro tip, when you're reviewing Mrs to not have to do this portion of this command. You can add the non-interactive flag, so you don't have to continue pressing enter.

A

But if you do that, just make sure that you include your executor in your command and you can usually pick show if it's just for reviewing an MR, so that will make your process a little bit quicker uh and then once you're done with all of that, then you have to pick an Executor, and at this point it's the question is: what's the difference between those executors and even like what is an executor and then the last thing here is you get this uh output that says that your Runner was registered successfully and a lot of people um internally actually miss this, because it Blends right in with the the other things that you're seeing.

A

um But it is your confirmation, confirmation, message and I think we should make that a little bit more delightful and then, once you are done with the CLI, then you come back to the UI and you have to refresh your Runners page so that you can see that new router and it's um the question is like: why doesn't that just come up instantaneously and now that I have registered it? It's saying that it's never contacted gitlab because I have to run it, but I.

A

Don't know that until I click on this popover and then see gitlab Runner run so there's a lot of things that could be improved in this from both the ux side and just like the secure portion of not sharing secretive data, and so our question for the group was: how can we make the render creation process easy and secure? And then how do we also educate users about the runners and I broke it down?

A

um I won't be talking about the secure part. Much, but I did a link to the blueprint documentation that the development team has been working on. So what they have decided to do is use a one-time, only authentication token to register Runners, so it will not be shown in the UI. Like you see the registration tokens today and it's also a unique ID for each Runner.

A

It's still going to live in the runner's config file, which you probably would never have to touch, but you could go into your file uh once you install a runner and that's where you can access that auth token again, but it just won't show up in the UI and then this is really helpful for customers who are automating the creation of their Runners, because, instead of having to keep track of many many tokens, because every time you automate it, it will generate a new token they'll be responsible for much fewer tokens this way.

A

So if something bad did happen, where it was compromised, they'd be able to rotate that token. A lot quicker um and also a note on that is we're working on automating that token rotation so that they don't even have to do that.

A

They don't have to worry about it and then on the improving the ease of use, size side of things, we're going to move this process to a step-by-step guide in the UI and we'll mark everything as optional, so that it will be really easy to create a basic Runner and then we're also going to improve learnability at the same time by add adding term definitions and links to the docs to learn more so now, I'll just show you in the Prototype of the new thing how this looks and how it relates back to those original points.

A

I was bringing up. um Actually let me restart, so this probably looks no different than what you've seen today in the admin area. You just click new instance Runner and now you're brought to a form.

A

um The first thing is that we still need to support the old registration flow, because we can't break our customers scripts, that they may be using to automate stuff. So you'll see that we do that through this link, but we really try to make the new flow more prominent because it is more secure and efficient. So we want them to use it. The second thing here is that we immediately display the different platforms that you can install the runner on.

A

um We categorize these by environments now, to give you a little bit more of an indication of the difference between these, but Justin made a great point that this still doesn't really help explain why a platform is useful or like why we need to pick a certain one, so I'm I'm going to work on improving that, um but for right now this is choosing where you want to install the runner so either on an operating system. Most of us will use Mac OS because we use Macs. You can install it on a cloud template.

A

We only have AWS that supports this right now, but eventually we'll have gcp, and then we have containers. This is a little bit more advanced, so we link out to documentation right now, which is something that we're going to continue doing until we can make this more of, like a actual, step-by-step guide that we can move to the UI, uh but just to show you like what this would look like.

A

So if you chose AWS you'd be able to pick through these pre-configured Runners, which is actually a lot easier than having to install it locally.

A

For most of us, though, we'll be looking at Mac OS. So all of these options now are optional and we actually get to pre-fill out the runner description for you.

A

So you don't even have to worry about that, because at this point we scarily know your IP address and the name of your computer, so that's most of ours would show up as your first name MacBook Pro um and then at this point, if I create the runner, because I don't need to fill out any of this then I'm, given a better, step-by-step guide of how to register that Runner.

A

The first thing that I noted is that that installation, uh copy copyable command thing was not clear and it wasn't clear if you had to do it every time. As long as you install gitlab Runner once on your machine, you don't have to install it again, so we make that a little less prominent here. But if you do need to install it, you can still access. All of that information here and we split out those commands so that you know which one to copy first and you have more step-by-step instructions.

A

um The second thing here is that I mentioned that Runner token will only show once so. We wanted to make that really clear here and give you a chance to copy it if you need to, and then we also because you're going to be pasting this in the CLI we still have to have you choose your executor through the CLI.

A

um This was kind of something that was an unfortunate decision we had to make. But in order to keep the executor choices up to date with the UI, it would have taken a lot of effort because they change every so often and if they're out of date in the UI, then it can make things more complicated. So right now we're just deciding to at least give you information about what executors are and then link to this wonderful table in the docs.

A

That explains exactly what each executor choice is and why you would pick one over another and then, once you choose your executor, then you'll come back and run the skit lab Runner run command, which will start your Runner so that it can start picking up jobs um and then some other simple things that we added was a delightful message.

A

Now that you've created a runner because creating Runner is a big deal, we've received a lot of feedback that it's not easy to do right now, so we're trying to make that better and then the last thing here is we'll send you back to the runners page, which in turn will actually reload that page and your Runner will show up immediately rather than you having to wait there and refresh it for it to show up.

A

um So that was the that part of the Prototype, but we're still working on making this better. um We still want to measure success about the runner and or about this new flow, and so we're gonna work on collecting feedback through a feedback issue.

A

Again, I've done this in the past and have used a banner to link to an issue, and it's worked very well, which is why we're gonna go with that again, because we actually get self-managed customer input, which we typically never get.

A

um But it is a pretty manual process to collect all that feedback. So we do need to figure out a way to to make that better and then some other future iterations that we're working on is we'll be able to provide feedback immediately when that Runner registers. So when you're, like inputting those commands on the UI, we'll be able to say like have a in progress run or not detected yet and then once you actually register, it will be like a check.

A

I, don't know confirmation message that it registered um and then add more information about platforms and why they're important and then we'll be adding this new flow to the groups View and project View and make some tweaks to the automatic token rotation so that those um security people don't have to like manually rotate those tokens like they are today and then I think the the last thing I just didn't mention was this will all be behind a feature flag at first, so we will be able to incrementally roll it out and collect feedback that way, which will be really helpful for us, since, if we don't, we don't really have a choice of whether this is going to go on the product or not.

A

It needs to because it's more secure. So it was an easier way to measure success like along the way that that's my last slide. Let's take a look at the dock.

B

I was just curious about the timing of the release.

A

Yes, so it's a breaking change, so it will be released behind a feature flag in the admin area in 1510, but it won't be fully released until 160, because we have to wait for a major um version.

B

um How how did you MVC this or did you? Are you designing and building the entire thing.

A

Yeah, that was a very difficult process. I have to say it was difficult to create a small MVC without really giving up a lot of usability decisions so that whole thing that I just showed will be the MVC and I kind of worked together with the developers um that were working on how this is going to change on the back end. As long as as well as my pm and technical writing to get docs all updated for this as well.

B

So that's kind of in line with the discussion that we saw happening in the product group in yesterday's ux meeting. So that's kind of cool uh Daniel, Mara.

C

Yeah the um the feedback Banner you spoke about. um Do you have an example of that? Or is there an issue that you're used to document that process? Because if you think it's a really good feedback tool, it'd be nice to kind of maybe explore that more across the whole system, because I think there's a we. Don't really have a good method for getting feedback from users um a lot of times. Also they don't have any sort of like in a self-managed environment. We don't really have any insight into what they're doing so.

C

It's kind of difficult in that case.

A

Yeah, let me share my screen and I'll post this link in the comment we did this for um when we released like a new Runners layout, we had added a feedback Banner there and, like you, can see how many comments we got from this issue.

A

It was the most feedback we've ever received from customers, since we've added anything to runners and I had um I had to Showcase a little while back that talked about using this and I think there were some concerns about like having to manually track all that and kind of feeling responsible to respond to all the customers so that they know that you're actually doing something about it um and then also, even if, like a banner, was the right component, because we used banners for different in different ways across the product.

A

um I haven't taken any steps forward as far as documenting it, but I will post that link so that you could, if you wanted to try it out, you could use it. I think the biggest thing was just if you're gonna create a banner just make sure you have an issue to take it down like right. When you create the issue to add, it then create the ones to to take it down after a certain amount of time or whatever your success metric would be.

C

That sounds good thanks.

D

And I also just wanted to add one point that, like since I was mostly working for the advantage instance I, think that's almost the only way to get the direct feedback using the banner. So of course like it's, it might be the not the best ideal approach to gather feedback, but I think it's possible. It's it's impossible to use the snow plow um to tracking all this behavior for the sub manager, so I post one on this approach and then just just wanted to say.

D

Thank you because I went through this process like 10 times installing Runner and every time I made the same mistake. I didn't start the runner and I also choose the different version. So I saw the wrong comments, so it didn't work out well and I think this is a huge Improvement. So thanks for sharing your thought process, how did um how did the design goes and with the Prototype? Thanks for sharing your work.

A

I'm glad it was it's going to be helpful.

E

Becca yeah I've used the banner before um for asking for feedback um when we launched the SAS configuration page and got really good feedback. But I just wanted to add a note that you, you need to check it manually and if you, if you don't use emails for notifications, um which I I don't regularly um customers, don't always um at you, don't always pin you so um I, just kind of like twice a week would like check in on it um just to make sure there wasn't any other activity yeah.

E

But this seems like great Improvement um yay for the security component of it as well. So good job.

B

Thanks all right, gonna move on to Mike.