Product discovery for design management MVC
Product discovery for https://gitlab.com/gitlab-org/gitlab-ce/issues/52356
Right now, working and collaborating on design files is not supported very well in GitLab. Design proposals are available in issue descriptions and are shared and discussed in comments. It's not always clear which is the latest version. While we have the option to mark and comment on specific image spots in the blob view and in merge requests, the actual design collaboration happens much earlier in the process.
We need to try to determine what achievable MVC would look like that would provide the scaffolding for future iteration.
Problem
Issues are the single source of truth for planning features: the problem being solved, what the solution is, how it will work and what it should look like. Collaboration between designers, engineers and product managers is essential.
Currently it is hard to share a collection of designs/screens/mockups (markdown table) and impossible to leave comments on each image (e.g. image discussions in merge request diff).
There are other problems too, but these do not need to be solved in the first iteration:
- handover from designer to developer (what is the final version)
Proposal
-
Manage
assetsdesignsThe first iteration should be the smallest possible iteration. Initially this means creating a new asset. In subsequent iterations it should be possible to upload a new version of the asset and archive the asset.
-
Comment on
assetsdesignsIf possible we should re-use the merge request image commenting feature. Subsequent iterations should also allow commenting on the image as a whole, like discussions on issues below the asset.
-
Linking to
assetsdesignsWe have issues (#), merge requests (!), epics (&), users (@) and we should have a quick way to refer to assets too. Not needed for the first iteration, but integrating assets into the planning merge request workflow is the primary way to increase visibility. It would be worthwhile to do some brief exploration of this.
Deliverables
-
UX
- designs for asset list, asset creation, and comment
- wireframes/explorations for integrating assets into issue discussions and descriptions
-
backend
- high level plan for implementation of minimal data model
-
frontend
- high level plan for implementation and feedback on the use of existing UI components like image discussions
Design
Data model
- Design
- image
- file name (not editable)
- order
- Version
- Consists of many designs
- Adding, removing, replacing or reordering designs will create a new version
- The user can add an optional note when saving a version which helps to start a discussion. The designer can use this note like a changelog.
Designs tab
Design tab | Select and Remove | Versions dropdown | Pending changes | Add note and Save | Discard changes |
---|---|---|---|---|---|
- This new addition will show a thumbnail grid of all the designs associated with the issue.
- Developer+ members can add, modify, remove and reorder designs.
- When adding new designs, based on the file name, older designs are replaced.
- In the future we may add more metadata (like title, description, etc.) for each designs.
Design detail modal
Empty state | With discussion |
---|---|
Discussions
When a new version is created | Started by a user |
---|---|