End-to-end mockup of mass integrations
Problem to solve
To give our engineers and other stakeholders a clear view of the work we're doing in &2137 , we need a set of end-to-end mockups that represent the final design of the features.
Proposal
Create a set of mockups that show every part of the mass integration workflow, including:
-
Instance level -
List of integrations -
Create new integration -
Empty -
Configured -
Confirm -
Success
-
-
Integration detail -
With groups/projects overriding settings
-
-
Edit integration -
Disable integration
-
-
Group level -
List of integrations -
Create new integration -
Integration detail -
With inherited values from instance level -
With projects overriding settings -
With inherited values from patent and overridden settings from children
-
-
Edit integration (with inherited settings) -
Edit integration (with inherited settings & project overrides) -
Disable integration
-
-
Project level -
List of integrations (no change) -
Create new integration (no change, same as "Edit integration") -
Integration detail -
With inherited values from group/instance level -
With inherited values being overridden
-
-
Edit integration -
Disable integration
-
Designs based on user stories
Remember who we are designing this for: Devon
1.0 As an Instance administrator…
- 1.1 I want to be able to set the integration settings for all Groups within my Instance, so I don't have to set them all manually.
- 1.2 I want the Groups in my Instance to be able to override individual settings, so they can be customized for specific needs.
- 1.3 I want to be able to disable the ability for Groups to disable the inheritance or override inherited values, so that I can control what they are using and enforce compliance.
- 1.4 I want to be able to mask inherited values so that Group owners cannot view those values, so that I'm able to control who has access to credentials or other confidential information.
2.0 As a Group owner…
- 2.1 I want to be able to set the integration settings for all Projects within my Group, so I don't have to set them all manually.
- 2.2 I want the Projects in my Group to be able to override individual settings, so they can be customized for specific needs.
- 2.3 I want to be able to disable the ability for Projects to disable the inheritance or override inherited values, so that I can control what they are using and enforce compliance.
- 2.4 I want to be able to mask inherited values so that Project owners cannot view those values, so that I'm able to control who has access to credentials or other confidential information.
Note: The Group user stories are very similar to the Instance ones, therefore a clickable flow is not needed. See the "States" section below for UI reference.
- 2.5 I want to be able to update an inherited setting and only push my changes onto projects that that already had the same settings set so that I do not override the settings for projects that have chosen to not inherit any settings.
3.0 As a Project owner...
- 3.1 I want my project to inherit the Group integrations, so that I don't have to set them myself.
- 3.2 with specific integration needs that differ from my Group, I want to be able to override the settings on a per-field basis, so that I can set custom settings specific to my project.
- 3.3 who does not want an integration, I want to be able to disable the inheritance entirely.
- 3.4 with a project inheriting settings, I want those inherited settings clearly displayed in the Project Service page, so it's clear where those settings are coming from and what they are.
- 3.5 with a project owner overriding inherited settings, I want those overrides clearly labeled and the original value displayed, so that it's clear what I'm overriding and what the overridden value was.
4.0 Additional states…
- 4.1 Show what radio buttons and checkboxes look like when inheriting and overriding
- 4.2 What does “Active” mean at each level
- A new GitLab installation is created, in which 100 projects are created, no integrations exists at this point
- Instance owner populates a single field (partial setup)
- Instance owner populates all required fields (full setup)
- 4.3 Disabling an Instance level integration that already had 100 projects using it’s settings
- 4.4 How does "Saving" work
🔗 See wireflow
Video walk-throughs
📺 Design walkthrough of sections 4.2 and 4.3 (posted on 2020.05.10)📺 Design walkthrough of entire flow (posted on 2020.04.09)📺 Design walkthrough of entire flow (posted on 2020.03.17)
Feedback
- To leave feedback on a prototype, first, create a free Figma account here: https://www.figma.com/signup and leave feedback within Figma
- For feedback, not related to a specific screen, please leave that type of feedback in this Issue.
Todos
-
Create flows and mockup -
Get feedback from team -
Iterate on designs based on feedback -
Get Technical Writing involved -
Get feedback from team again -
Get feedback from admins that current use Service Templates (UXR Issue)
Edited by 🤖 GitLab Bot 🤖