Update pipeline zero state to suggest IOS specific templates (when is_creating_ios_app is true)
Problem
Projects are overloaded with options when configuring stage integration at GitLab. There are very specific actions that we can direct users through if we know what they are building. We should determine what the user is building and help guide them through the value that GitLab can add to their application.
Proposal
When we know that a user is building an IOS application we should update the first time experience to guide them through set up for what is needed in order to deploy onto IOS.
Test
Group: 50% of projects with is_creating_ios_app = true
Metrics:
- Verify usage rate
- Conversion rate
- User invitation rate
UX Flow
We will guide users through two steps of iOS CI/CD set-up depending on what they have available.
Proposed design for empty-state page:
When we notice users are building for iOS, we change the empty-state page to the following:
Pre-Runner Setup | After Runner Setup/Runners are Available |
---|---|
This step only shows when there are no iOS runners available or we cannot detect an iOs runner. Setup a runner links users into the Runner setup flow. Configure pipeline and Use templates are disabled until runner is set up. See what else brings users to the documentation. | This step shows when users have set up a runner or have available iOS runners. Configure pipeline links to the pipeline configuration walkthrough. Use template brings users to the iOS with FastLane template with no guide. See what else brings users to the documentation. |
Figma File
Full UX Flow
Proposed design for runner setup:
When a users goes through the link in the runner setup box, this is the flow they are dropped into:
Runner Modal |
---|
Provide the install a runner modal, with the macOS section preselected. Provide users with a popover with instructions, as well as a link out to more documentation. Provide users with the token in the modal. |
Figma File
Full UX Flow
Proposed design for pipeline configuration:
When a users goes through the link in the pipeline configuration box, this is the flow they are dropped into:
Step 1: Getting Started | Step 2: Learn about Pipeline Stages | Step 3: Set up CI/CD Variables | Step 4: Build your project | Step 5: Hit Commit |
---|---|---|---|---|
Let's get started brings users to the next step. Throughout the walkthrough users can open and close steps using the chevron beside the name. | Next brings users to the next step. Learn about stages brings users to the documentation. | Add in copyable variables for users. Next goes to next step. Learn more about variables goes here. | Next brings users to the next step. | Finish closes the drawer. |
Figma File
Full UX Flow
Proposed solution when users close the flow:
Popover |
---|
Provide users with a popover to navigate back into the guide if they want. |