GitLab CI/CD UX Team Design Reviews, 28 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Verify & Release UX Team Design Review | 28 May 2020

Description

00:00 - Juan | Group Code Coverage Analytics

26:30 - Dimitrie | Environment list page

A

Okay, all right, so what we're seeing right now here is the group level of develop right. So in this particular case we have the giddy up that orc level and we are at the analytics section right. So what we're planning to do is add in repository subsection here, a page repositories page, and then these are repository space likely.

A

The future is gonna, have all the other analytics that we can add at the group level, but we're gonna start with ours, which is test average, and the thing we have been talking about many things that we want to do here, but essentially the the most important thing here is seen the overall activity of all your projects. So the data that I'm showing here is like the amount of projects under this group that has that that half tests.

A

So in this case, like exhale, you have 45 projects that have tests the average test coverage across all your projects. So basically what that means is, if you have 45 projects, each one has different coverage value. This is the average of all of them and the total number of coverages. What that means is that each project can have multiple coverages so sometimes like it can have like our coverage for JavaScript for Ruby.

A

So let's say like each one of each each project to have two or three coverages so like here's showing that value like that, some of the value and then well yeah, but.

B

It would it make sense to like what is the purpose with the total amount of coverage. It's like what kind of like what is the use case for now that that number.

A

Yeah, it's a great question. I think that now that I'm, seeing it I, don't think it makes sense. We I don't think it makes sense with more context of against what is fracking.

A

But the idea of seen the total number of courageous is that that's another metric that will allow you to see how you are trending over time right to not only tests but how how many Corrections careers do you have in general right so to answer your question: I, don't think that by itself is super helpful, but for someone who knows this number by heart, if they see it trending up or trending down, then it has value, meaning.

A

The problem right now is that the weather that it shows it's I, don't I, don't think by itself means a lot, but you know like for the ABC. It's likely gonna be like that. What I would love to see in the future is if you come here, and you see it like when you go and you see your your stocks, but you know when you see when you- and it tells like. Oh- it's operates down. You know like so cover just cover your Apple down.

A

So to answer your question, your original question, this is just another metric that is useful for stakeholders to see how how they are testing zooming, but you are likely on point just by seeing it here. I, don't think it's so useful. So.

B

Problem wrote it up in the inductor okay.

A

Then the only thing that we want to show them is the the graph of how things are trending. So this is the average test coverage the last 30 days.

A

This is not really the last three days you can ignore the axis, but the whole idea is: you can see how you trend over time. You know so what you see like. Oh, it's, it's going down down down and then you went up and then yeah. This is kinda like a useful is a useful thing for stakeholders because they can justify their spending on certain areas and, like maybe there development practices are improving or are are decreasing or declining.

A

So that's one thing now the interesting thing about these is it's. Is this part right? So here we have an empty state that says that you have to select projects to display data. So if you open that picker, then you can select multiple projects and then, if you select those projects, then like here, it says that we have five projects selected so like there are all project X, but you can think that they are YC in whatever, and then he tells you from those five projects selected.

A

Then it tells you the coverage, the number of coverages and when he was last time that it runs a job that created these bodies.

A

So that's helpful for someone any stakeholder who needs to come and say, like you know, I want to look at this particular project and then they or these two particular projects, and they wanna see these data.

A

These other module is, can rock the amp is the real MVC behind these, which is the ability of downloading the whole data right like so. You can select the data here and you can select that they are there a date range and you can download the whole test for rush data. Nadia had a very good comment before about these, which is like these dozen. These two things look kinda like too close and too related.

A

So people can get confused with the idea that if you select things here, then you download that data here and that's not the case so.

C

A

Another and another couple of designs that address that.

B

Also wondering, by the way, if you, if you'd like, show those sub projects under that graph, like wouldn't it be desirable that the graph changes upon your selection so that you can see the trend across multiple objects, yeah, okay,.

A

Right now, II yeah I see what you're saying I think that makes a lot of sense. I. Think the problem with that is that I mean this graph is not related to this data. This graph is just for the average so like that would be like a separate graph.

A

But I guess we're right. I mean like the more that I have been thinking about this design, the more that I think that everything should be tied to just one single picture of projects and all the data to populate based on that. But I have talked with the engineers about these, and the problem with that is how complex is to make it make those queries. So we gotta get a little bit smarter about the way we will showcase data here.

A

I think I did add. Another couple of explorations like this is another exploration where, like the the projects are here below, and then you download the test crush data here. These one.

A

Kind of like an explanation: what we're getting from selecting here, I do your same comes to the fact that, like the data shown here, it's kind of like loosely pooed, you know and it's hard to like make it more I, don't know it yeah it's it's kind of hard to make it more specific to the type of tasks that you are doing here, so that the explorations are meant to do that. This is another exploration like instead of like you see the average here.

A

It's completely related to that, and then the next thing is that you see the quick summary and you can download three correct data here and then you select the projects and then, when you download these, then it downloads the data for those projects. But, oh sorry, actually, that's not how I, how I thought about it.

A

So the way that I thought about this one is that you select the projects that you're seeing and when you click on these, then a model will show up and then the projects that you selected here will be pre-populated here on this project. Speaker and you can change that, you can select them or you can change the date range and then you can decide to download the test Kourosh data, so this one is kinda like a bait-and-switch little bit, because I feel that people are gonna, be like hey, I'm gonna download.

A

This is for historical rush data for these five projects and when they click it, they think that it's gonna download, but it's gonna, take them to this extra step where they can decide to change the range or they can decide to like add more projects. This. This is my favorite right like this is the one that I think that really ties things together well and to your previous point, I think in this one the graph looks more separate from the rest of the design. I, don't know what do you think about that?

A

You still think that, like if I it doesn't still give you the idea that, if I select projects that the rock is gonna update in this one.

B

I'm gonna be honest: yes, well,.

A

That's that's perfect feedback. I think you.

C

Know when you mentioned this Demetrius avoid make sense, but I didn't have that necessary. The first Association when I was looking into that. So it's interesting to hear perspectives. No.

A

That's that's way: feedback.

B

You know I'll, you I'll give you what gives you because I can see like I can see from both sides right like hey, we have the little header there. That is like an h3 instead of an idea where the test coverage is to the latest test coverage. Data summary it's like h3 kind of like a new section, yeah.

C

B

Have the selection and you got the hit download history coverage data button, which kind of feels like alright we're looking at the graph? These are project they're selected, then, on the right side like you, can you can download it all? You have yeah like okay. It somehow gives the hints of that, at least from my personal opinion,.

A

There's no you're.

B

A

That's why I wanted to show these I think that you are on point ie I'm gonna explore more how to make these two themes.

A

Reg break them apart, better visually, so it doesn't give that idea, because that's something not what's going on. I mean this is just the overall activity. This is just like an average and then the thing below is like you're module. Are you go on you download your data? You see your data so.

A

Did you take? Did you put that in the note.

B

C

I'm having so many meetings after another right now and my note, taking.

A

In growth, no, no, if you can add just note so I don't forget about it. I'll be amazing, because I think that's long in the day and you're still keeping up I mean.

B

It was, it was part of the first point, but I will make another point. Even with the change you I. There is still the hints that the lower table yeah.

A

B

Influence the upper craft, alright.

A

And I'm gonna share this with James, because maybe he also has thoughts about updating the graph based on the projects. I, actually think that makes sense. You know now that, because your initial comment was, it would be cool if the graph updates, based on the projects that you have selected, so that kind of makes sense to me. You know like show me so I, don't know I'm gonna socialize, that those thoughts with James and the team to see where we land on that, but I think that that's good feedback. What.

C

Do you guys thing.

A

About this panel, so I forget for for forget a minute about the graph on this part. You are a consumer who needs to download data from your. Your group test, correct data from your group. You come here, you select your projects, you see this data and then you download historic coverage data, and then it gives you this extra step where you can change the range or you can design decide so like the more I.

B

Like the additional player data bottle gives like a really reaffirms like alright. What exactly am I gonna download, okay, I.

B

I see what you did there with the CSV. Like you know, you want to have that clear within the covered data button before they click on that here's, where you can download your CSV I. It's always one of those pattern that keeps repeating and any application where you can download something.

C

B

A certain format right is this going to be CSV. This is gonna, be CSV, comma separated or is it gonna be like good school spreadsheets has a couple of them. I think right in terms of the placement of the button. I think it's okay but like it's like the table shows below, but it can of course, be very long. So I can see why you're good that yeah yeah I'd, like I, think it's it's reasonable, like I feel like I, think it's it's it's good I'm like normally what I would would say it's like hey.

B

You would like to place it in the right bottom corner, but I can see why that is not desirable. Yes, yeah.

A

The this will change, though, because I think maybe I see view if you go too long, I think we would paginate eventually I, don't think we want to have like a super long table anyway. So I'm a little bit torn apart with the idea of the placement of the bottom as well. I thought about other ideas, but I.

A

Don't see where else could it go on? He reasonable, maybe like below the table, but like the bottom, it's it's my my.

B

Only my only point still would be, and I got the hint from looking at the button and the model you open. If you click on the button, you get the model that selects your data range I work for in the table below you, don't see any of that. So how would I know what data range I want at first is if the table doesn't give me like what am I looking at at the table, which data range is that like? Was it always a month, because you.

A

Said something at the beginning of here? No, that's! That's an excellent question. So when you, what the tip, what the what the tables showing you eats a snapshot of the coverage data during time, the last snapshot so like the last time that the job run, which was two days ago, the commercial was a 10 and the number of coverage were 3%. Now, that's why it says: download historic coverage, data and now that's why it's so explicit, because I, okay, now that I saw the last not should I want to get historic data.

A

You know like so you click on this guy and then you decide that you want to see the last three days that the job run. What was how how it was trailing- and you just opened that see as being your exciting.

C

I paid attention to the historic work in the bottle and I was trying to understand what does it mean, but I couldn't gas it? Okay, it didn't occur to me that it would specifically mean that this data is not historic and the other data that will be downloaded would be historic. That was no buildup on your feedback.

C

mmm I guess for me upon everything, makes sense, just like usually in the report I I'm used to seeing like filters first so like, for example, let's put it this way, I'm a little bit surprised to see in this like pop up here when I am already, it seems, like I'm, really committed to download this data. That I see usually I'm used to like, if I see a data in the report, I just gotta press download and then just don't watch whatever I see yeah.

C

So I would probably expect here to have those filters like earlier in the table for a filter for projects and for the date and when I would press the download button. I would probably also like, and my first initial thought was: why don't we just say download data or something why that long title now, I see that you explicitly meant something by that. But you.

B

C

Like if I could do, I would simplify this, of course like and place filters first and then, when I would press down water directly got.

A

That yeah I gave real shame. The only problem is that, if you are at here, then you have in each word from historic context to the table which.

B

What does what what what, if you simplify the button to the download history, instead of like anything else? Well,.

C

What was like what, if what would that mean to the user download history? I, don't know, I understand that we are trying to help people but I'm afraid we're confusing is all yeah.

A

Yeah, but you you, you get what I'm saying if you are like a a range filter here. That's not the only I'm gonna affect the table, because the table is just like a last snapshot of the. Unless we make the table historic coverage data table which I.

A

C

Users to separate data on historic and what historic like? What do you mean by saying historic data? What does it mean.

A

Yeah I think I think you're. It's good that you're asking that question. I di didn't explain that. Well, so a customer will come to this page right and maybe they just want to see what's the current state of their projects right so like this select five projects and they say like oh, this project is at 55. This is one is at 55. This one is at 70, these ones and 80, and this woman's had 85 whatever right and then that's everything that you got now.

A

Maybe you're preparing for a meeting with your VP of engineering, and they want to see data on how you have been trailing for the past two months right. So how will you get the data rights like you will go? You will click these and then for the projects that you have selected. You say like: okay, I wanna actually see all the projects that I'm in charge off and then you say, like the date range gonna be the last 60 days and then you download the test coverage data.

A

It gives you the CSV file and then the customer will go and massage that data in Excel or Google spreadsheet or whatever, and create the graphs or like what I really want to create to show to their stakeholders.

A

That's the goal so like there's, definitely a difference between historic and non historic, because when you are seeing not historic, you're, just like seeing the values, this is just like a summary of the values as they exist right now. The last time the job run does not make sense. When you start.

C

Make sense to you maybe I'm, lacking information. You know like a little bit on these projects in general. Does this make sense, yeah.

B

Like I think, like I, think a SeaWorld Kwan's getting an eye see the point of you know like like when is switch used I can see the table below snatcher I. Understand that that the graph below is showing historic data, then my if we want to export the data it to be reused in Excel to recreate a graph we already have but specific sub projects or a few sub projects like I understand. The CSV is always wanted. We're always desired, but I do kind of, like think like.

B

Why are we not shown that graph immediately like why? Why does that needs to be dependency on another tool to make a graph at least visible in get lab? Oh that's.

A

Totally comment and you're right that should be what it is, but I think the MVC. This is just because the NBC, it's that's. What James wants from up for an MVC like the me moon, Bible, candidate change for geese is gonna, be like downloading the data, but eventually we are gonna. Do what you just said, which is roughing inside good luck. So just assume that, like that's gonna, be the field in the future that the interim is gonna, be downloaded data I.

B

Yeah I suspect you mean. So if that, if we're, if we're being confused by having both historic and a snapshot, that in the same view, would it be a possibility to say hey, we have a tab for historic data and a tab for snapshot data, so they're not showing side by side. I like that, I.

C

B

Would be like I think it's it as.

C

Well, to kind of like ya, know.

B

What I mean information information, the Hartley problem.

A

I think that here's one interesting theme, so you remember like that: I show the first designer, like we said. Maybe that's not to sound like now. Will you go back because our matric making sense right like the idea of having beasting as its own, like this is its own widget? Oh.

A

You're mute imagery.

B

Yeah I think it's separate. It's already a lot better. How that relates towards the snapshot. Data yeah is less clear to me, though.

A

Ya know so I think I think what we're getting at here is like if we could do something like these, where, like all the modules are very well defined, that they, ha they are their own function, that they don't relate to each other.

A

That could be you know through tabs or like a bearer issue, a hierarchy, vertical hierarchy or whatever. Then it could solve the problem right, yeah.

C

Quan- and you know what you can slap me into the face couple of times, because I think I gave you this without like I, remember, yeah I think my feedback was to combine those two but like yeah, I guess, I didn't understand the difference between the latest test coverage and the historical again like I was understanding what doesn't mean. What's the difference between the two, so maybe that's the direction we could also improve in but yeah I I. Remember you had that initially, so yeah.

B

A

To make it explicit.

B

Like overall activity overtime, last activity like those two sections, yeah bead tabs or not that doesn't matter as long as they are so separate, you can yeah.

A

B

Right this, this, the one can influence the other. That's.

A

Perfect I think I didn't really have an idea. I'm gonna, well, I'm gonna fix these, so yeah, that's perfect, oh well, I was better than I thought like feedback wise. This was super helpful. So thanks guys, I really I really needed these feedback. I.

B

Liked the page too, banks are pretty.

D

Hope it was helpful and sorry.

D

A

Was great, thank you. Alright, that's it I, don't have anything else. I mean like I could keep talking about these right. I, don't wanna I, don't wanna overkill it because then I think I have good enough feedback.

C

Nominating a topic, it was a gray, interesting, great discussion.

C

Jimmy D: do you want absolutely.

C

B

Can quickly show something which is really me. Let me look it up this one. Take it's gonna take long which it's cross-functionally, something that is I, think interesting to show off. You see, show alerts.

B

Let me go to the fitme document.

B

Okay, do you see my finger file?

B

Okay, let's jump ahead to page two, because that includes the last revision.

B

So this is in the final stage of being accepted.

B

Basically, this is the review or the environments list page, which can also be called the deploy board if you're connected with a Cuba, Nettie's cluster- and you can see hey while the deployment is that is in progress.

B

You can't see the pods changing, for both cases were introduced, an alert as to be displayed directly within context of the environment and the pretty interesting, because the deploy can show that something has gone wrong or that were actually gonna roll back and exceed upon that with additional actionable things such as canceling the deployment as it is in progress or even Auto rollback and I'm canceling that order rollback of the deployments so, which makes it a little bit opt out or instead of up in to rollback, though those are the kind of differences.

B

So basically, the idea here is like I will show you quickly to go to, for example, to a project which actively uses this and from which I got like a little bit of the screenshots, because this is partly screenshot at least the top.

B

Design systems really nice example, it's a live project, but it also depends on Auto DevOps, which makes it so that it has a lot of these things. Pre-Installed makes pre pretty good use of it. So this is the current deploy board or environments list with Cuban Ares active and, as you can see, this is like missing a lot of like like it has been touched in a long time. Ui wise things have just been added. It's like not ideal to see.

B

What's going on, so what I've been trying here is introduced, minimal, UI markup in order to include this additional piece of information that is added on the bottom of like actual named environment. So we have the review environments here as well. Let's see if it's like 63 environments, there's like separate UI involved with this. So basically I don't want to touch this too much. You can see here that this is its own little widget. Here. Let me see that I explored a little bit with environment, so yeah here you can see, for example, environments.

B

This is as as it as addition. I need to update this nation. Will just I just see the basically the thing that I would love some feed on if you have any, because I think it's gonna be alright. The D thing think if you have touched this UI that you see any direct problems with its did. I forget anything.

B

It might just touch something else which is currently in progress in a different stage group that touches the same UI. That would be very welcome.

B

The other side is like I, think the changes I made UI wise apart from adding this, but mainly updating the rest, to be able to better be able to fit this new information into it. I think I've kept it as minimal as possible, so that you why? Why is it won't be a lot, a lot of hassle to implement that again from this to this.

A

What does that is that critical status at the bottom is that related to the amount of failed instances.

B

So you got a look a little bit here, add with a little grain of salt. This is just like, like copy directly as like a screenshot how the alert influences the deployment that is, that is related to what kind of an alert is this, but basically, what did she do? Is the alert should influence if there's going to be a rollback either triggered manually or automatically so hey this? This is critical alert.

B

Some HTTP error has been exceeded by whatever percentage we have currently set somewhere or decided it as a team process that, if it exceeds I, know 10%, then a rollback is gonna, be initiated and then that rollback will be visible here, because you will see that you will see the year the printer, the percentage change and you seal the in changes like you see the instances changed towards the new or the old deployment, basically yeah.

A

Because it's a reason, the yeah. No, what are you? The first thing that I thought was that that status was kind of like a like a summary of the overall health of the instances that make sense, sir, which one so go to where it says critical, HTTP rate exceeded. So that's kind of a read him like that: ready checks, status, I almost kind of I was really not to whatever is going at the top, where it says instances because there's a fail.

B

A

B

See what you mean? That's this good feedback, so the alerts have pre-configured icons with pre-configured colors, okay,.

C

B

I've included that I can which can change to a different color and a different shape, based on what kind of like an error or alert. It is I, see I, see why you like color wise, make the connection mm-hmm. If that.

A

Is a little like a problem? It almost makes me think that, like the legends create this mental model, for me, that, like the whole thing is failed, you know. Does that make sense. What I'm saying like the whole environment failed? That's what I get from seeing the color much.

B

So yeah so like yeah I, like that, where this alert comes from is from post-deployment monitoring, right, hey deployment has been, has been done and your during your deployment or after the deployments are Prometheus server picked up that something has gone wrong and indeed it has a relation towards that direct deployment, because that is the one either active or in effect, and the thing is here: you have the environment, then you have the deployments or the server status basically, and it's in senses like they only show case if the deployment is finished or in progress.

B

Basically, and if some of the pots are like the virtual machines, I know it's not. The direct translation is because Cuban Eddie's like if something is wrong there, but this kind of relates to do how the application you were creating and it's running in that environment. How that is behaving got it yes, I would say. If there's an alert there that is critical, then the deployment is not like. The deployment itself can be done well, but effective has on the environment is like really bad yeah.

A

But I think that makes sense, I think the only feedback that I had then is that I I don't see a reason white. The legends need to repeat on every widget like yeah.

B

A

On there, like, like somewhere at the top of the patient in the you, don't have to repeat them every every time, yeah.

B

I'll take a note of that and bring that up with product management. Is it did you write that down in the document? I can refer back to that. My.

C

B

Yeah I'm not touching anything of the deployment board, or at least a pods and keeping any stuff in this like this out of scope, it is nothing to do with what we're currently trying to do, but I do think it's worthy of a separate issue of UI polish and.

A

It's definitely low-hanging fruit, I think, and it will improve the idea that I think will clean up a lot the noise. So you know that the instances are running, but you know that the deployment went wrong somewhere and it's because it exceeded the HTTP error. I will make that widget like more concise, I feel yeah.

B

Yeah I agree: it's a lot of information and it seems like a little bit of filler data right like it to make it obvious. Hey. We got Kiba daddy's here. There's things going on. Look at me, while it's still only a legend, basically yeah it.

C

Would be so much cleaner, I think I agree with you on, but I like the borders, and you know the visual help on this page is much better complaining to the environment. Squeals I really like these borders and balls tax. It helps me to like relate information together. I mean enough. I didn't pay too much attention to this critical, thingy and I bought at the bottom, but maybe you should have started to ask us like hey.

C

What do you think production or staging that I would see if you would take attention and agree, I would remove this legend. It's it's. It actually takes all my tension away.

B

I'll open up an issue thanks for that, but yet it would have been a good question in the beginning. Maybe this bit, you know it is a bit of a strange, a strange one to know like what is the status of what like. We both have the deployment and we have the actual environment as it is active right and those two things are now displayed in separate sections and but yeah like next time. We'll take that into mind.

C

All right, yeah.

B

That was it for this. For this one sorry.

C

Sorry I have to run when I go to the thing being that's happening in the release it Thanks. Also, if you for being such visual items, I.

B

What what what thing big is happening? It's.

C

A management I wanna attend for the first time in thewhat they're happening I'm already like, but see what, how is that happening? There.

A

Thanks for the feedback was problem, I'm also gonna jump into another meeting, but I really appreciate the I love.

C

A

Sessions, thank you.

B