Skip to content

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:

  1. Verify usage rate
  2. Conversion rate
  3. User invitation rate

UX Flow

We will guide users through two steps of iOS CI/CD set-up depending on what they have available.

Screen_Shot_2022-03-16_at_12.02.44_PM

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
Screen_Shot_2022-04-06_at_11.27.23_AM Screen_Shot_2022-04-06_at_11.27.09_AM
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
Screen_Shot_2022-04-06_at_11.46.20_AM
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
Screen_Shot_2022-04-06_at_1.09.12_PM Screen_Shot_2022-04-06_at_1.09.35_PM Screen_Shot_2022-04-06_at_1.10.00_PM Screen_Shot_2022-04-06_at_1.10.25_PM Screen_Shot_2022-04-06_at_1.10.49_PM
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
Screen_Shot_2022-04-06_at_11.54.19_AM
Provide users with a popover to navigate back into the guide if they want.

Figma File

Full UX Flow

Edited by Emily Bauman