Designs currently exist in a separate tab inside of an issue making discoverability of the designs challenging. Users are only provided a number indication that designs exist which limits the visual queue of an area intended for visual items.
Intended users
Users who interact and provide feedback on designs. As well as those users looking to gain information on an issue and all of the components that may be involved.
Further details
Feature discovery of Design Management is challenging as the designs are hidden in a tab that may not make it clear to users that designs are present on the issue.
Proposal
At the bottom of the issue a section similar to Related issues should be added that shows the available design thumbnails of an issue. This provides easier access to the designs and more important information to the users looking at issues.
Empty State
Permissions and Security
The box should only be available on issues for users that have the appropriate license to utilize Design Management.
What does success look like, and how can we measure that?
Increased visibility of the designs feature will help to increase adoption across organization. By adding this extra visibility here we should see more discussions happening on Designs.
Not to derail here--just another thought, Jira provides a similar feature that's kept more broadly to attachments in general. Since designs are typically served as attachments, maybe it's best to be more broad here?
I could see this benefitting devs that are sharing screenshots, JSON files, architectural API diagrams, etc. related to an issue. But then it becomes less about "design" management and more just "knowledge" management.
Not to derail here--just another thought, Jira provides a similar feature that's kept more broadly to attachments in general. Since designs are typically served as attachments, maybe it's best to be more broad here?
That's a very interesting idea, I like it! It goes back to "Everybody is a designer", and that means artifacts from other professions could be treated exactly the same as e.g. wireframes.
I mocked up a quick and dirty concept here in Figma.
I'm not entirely happy with the segmented controls within a dropdown, so perhaps two buttons is a better route (probably more accessible too), but it's hopefully enough to convey the thought. This way, everyone could have structured discussions around pinned files. I'm not sure how/if comments would extend to embedded links since they take you out of the GitLab context.
I mocked up a quick and dirty concept here in Figma.
Great job, I like it, thanks a lot! :)
I'm not sure how/if comments would extend to embedded links since they take you out of the GitLab context.
That's a great question, and I'm not sure we have the answer to that already. I think this is something we will have to have some more strategic discussions and research around. Our focus is to make GitLab the single source of truth. However, as the Product Designer persona is new for us, we need to understand how much this approach impacts their workflow and how we can manage that.
For example, as a Designer, I will often have to act on the comments of the designs that I uploaded and change certain aspects. When I use e.g. Sketch Cloud to share and upload my designs, I directly have these comments within the Sketch environment. This means I have all information right at the place where I have to act on it, making this process super smooth and fast. When that discussion around the designs is happening inside of GitLab, I suddenly have to have two systems open to read on the comments and change the designs, which is disrupting my workflow. We still have to understand better how that workflow can be simplified and improved with GitLab.
Christen Dybenkochanged title from Design widget should provide thumbnails in Issue Descriptions to The design tab should be more visible in the Issue UI so design thumbnails are easily seen
changed title from Design widget should provide thumbnails in Issue Descriptions to The design tab should be more visible in the Issue UI so design thumbnails are easily seen
Christen Dybenkochanged title from The design tab should be more visible in the Issue UI so design thumbnails are easily seen to The design tab should be more visible in the Issue UI
changed title from The design tab should be more visible in the Issue UI so design thumbnails are easily seen to The design tab should be more visible in the Issue UI
Christen Dybenkochanged title from The design tab should be more visible in the Issue UI to Make the Design Collection should be more visible in the Issue UI
changed title from The design tab should be more visible in the Issue UI to Make the Design Collection should be more visible in the Issue UI
Darva Satcherchanged title from Make the Design Collection should be more visible in the Issue UI to Make the Design Collection more visible in the Issue UI
changed title from Make the Design Collection should be more visible in the Issue UI to Make the Design Collection more visible in the Issue UI
@cdybenko Are you referring to the Sticky Issue Title issue we're working on? If so, we've discussed a follow-on issue to make the navigation tabs sticky on issues, like they are on MRs, which could improve the visibility of the Designs tab.
@cdybenko yea let's discuss. The core problem we are starting to experience with issues is that we are accruing "clutter" in the main content area with a steadily growing list of things that may or may not be used by various teams/users. This is only going to become more apparent and bothersome once we add tasks, surface requirements in issues, better link incidents and/or vulnerabilities, etc. I think we need to step back and rethink the interaction model on issues as a whole. Would love to bounce some ideas around with groupknowledge and groupproject management
@mikelong@gweaver@mnearents I'm on board for teaming up on this, whether it is a sticky tab or a complication for a grid of thumbnails that sits nicely under the description.
@hollyreynolds I wanted to loop you into this issue and hear your thoughts. We're trying to help people understand where to find designs since we know the design tab isn't sufficient. I know there is a larger effort to improve issue/MR experience which will likely affect this, so this is an MVC solution. The latest design can be found here: #14744[designs_first_class_grid.png]
@hollyreynolds I mentioned JIRA and their toolbar yesterday. Would it be better to have a toolbar in our issues than to have these big empty states for designs and linked issues?
@rkuba can we get a weight on moving this for %13.2? This involves moving the design tab contents up to a permanent location right below the Issue Description.
There are a lot of small things we'll need to do, including:
Restyling the grid
Ensuring it (the widget) is responsive (or at least as good as any other widgets that can appear on an issue). The Designs tab has issues on mobile, see #210280 (closed). I would like us to give some intentional UX thought about this as well.
Update relevant specs, including:
Vue/frontend specs
Feature/e2e tests (and check any tests that previously relied on the designs tab)
Remove the design tab HAML code
Update documentation
redo all the screenshots that show designs tab
remove references to the designs tab (and let users know where to find it now)
I suspect we'll also need to add notes about this on the documentation for Issues
Decide on how to handle /design urls (they are handled on the frontend, so we can probably just leave them be)
@cdybenko a small bird that's on vacation told me that it's probably more a 8 point story, due to it breaking all existing routes, and with the things around updating documentation and everything I think this is very justified. So if we want to do this, that should probably be the sole focus for one person for the milestone and we should not do anything else on design from the frontend perspective, to not create a moving target.
@rkuba I agree with that - I should have said at least 5 points . We say in the handbook that we don't generally want to have stories above 5 points. Should we try and break this down further? I haven't thought too deeply about it so far, but perhaps others might have some ideas for a smaller first iteration
@rkuba@tomquirk@ntepluhina we discussed this in our meeting on Thursday and figured that @alexkalderimis would create a backend task for editing the routes. Would this scope be outside of what is here?
Also, is there anything that gets us smaller than 8? We didn't change any of the UI other than we'd use smaller buttons and swap classes for smaller buttons .btn-sm and .col sizes.
In terms of iterations, I see a couple of opportunities (in order of implementation):
Update Designs tab styling to match this new design (small buttons and smaller columns). This would cover some of the test updates that need to happen.
Do some of the routing work (like renaming version query param to design_version)
Add the new Designs section, but behind a feature flag. If enabled, Designs tab would be removed, and Designs section is made available. This could allow us to defer the documentation updates until later (when we remove FF and enable the feature for all users). We could consider opting for the FF approach regardless, and doing a percent rollout.
This breaks down the work a little, however still probably puts the entire effort at an 8
@cdybenko I think @tomquirk s breakdown makes a lot of sense , but yes, this will not reduce the workload. We try to move a LOT of content here, which looks small from the outside, but is a large undertaking. A lot of effort went into getting the data model and structure into a certain place. Moving it means to move a lot of little pieces to make this all work.
Imagine moving an IKEA Furniture from one room to another, but you need to completely disassemble it to get it to through the door to the next room. It will take some time to get all the pieces moved over and fit back together.
@cdybenko can we make the "Designs" area less obtrusive until there are designs attached? I have the same feedback for the "related issues". It takes up real estate before there is any data -- if there ever will be.
@gweaver we'll go forward with the bigger dropzone for a few releases to get the word out about designs and get feedback but happy to make it smaller as needed!