Onboarding tutorial: tutorial repo steps

[billygriffin]

Note: this is a follow-on issue in conjunction with #8148.

Problem:

Many users when they first download GitHub Desktop aren't certain what things they are able to do with it and how to do those things. We try to make primarily functionality in the app as discoverable as we can (and sometimes do it better than others), but that presumes a basic level of knowledge of Git.

The goal here is to help new users get more comfortable with working with GitHub repositories locally, understand how to use GitHub Desktop with GitHub, and give people muscle memory to repeat similar steps in a real repository.

Onboarding tutorial:

The work in this issue assumes the user has created their tutorial repository and that it has been automatically published as a private repository to GitHub.com. And they are now in this tutorial repository.

When they arrive in the tutorial, the user should be provided some indication of what context they're in and what they should expect.

The tutorial itself should consist of six steps that we think will provide them with a core workflow, and also introduce the concept of what things are typically done in an editor compared to those done in GitHub Desktop:

1. Install an editor
2. Create a branch
3. Edit a file
4. Make a commit
5. Push to GitHub
6. Create a pull request

When you complete the final step, you should have a completion state that gives you reasonable options for what to do next.

Considerations:

1. Some people will use an editor that is unsupported by GitHub Desktop, and we shouldn't force them to download a supported editor just to complete Step 1. Therefore they'll need to be able to skip this step and let us know they already have an editor.

2. If they don't have a detected editor, we can provide options for them to install (Visual Studio Code and Atom). Ideally, when they go through the steps to download and install an editor, it should not require restarting GitHub Desktop in order to detect it.

3. For the "Edit a file" step, we should account in our instructions for those who do have an editor detected in Desktop and those who do not.

4. The steps must be completed in order. The only steps that should be able to be skipped are step 1 (install an editor) and step 6 (create a pull request).

5. For the first version, the way to exit the tutorial is to navigate to a different respository (or add or clone one if the tutorial repo is the only one that exists). We may include a button or link to make this a bit simpler by opening the repositories dropdown.

6. Initially, users cannot make more than one tutorial repository.

We expect that this will be done in multiple feature iterations. I'll let @ampinsk respond with the actual flow for the first iteration of this.

[ampinsk]

Tutorial designs

This outlines the core tutorial steps and exiting behavior.

🖼 Full Figma Prototype

Steps 1-3

GIF overview

You will land on this welcome blankstate with the sidebar. For our MVP, we will only include a static blankstate but in the future this content will likely change. This blankstate is also not necessarily final.

1. Install an editor (skippable)

User will install an editor or skip this step if they already have one. If we detect they already have one, we will display this step as checked and start them on step 2.

2. Create a branch (not skippable)

User will create a branch any way (through the menu, key command, etc) and name it anything

3. Edit a file (not skippable)

User will open the repo or file in an editor in any way (using the surfaced button, key command, etc). They'll see the prepoulated README and make any edit. If the user has a detected editor, we will surface an open button.

Steps 4-6

GIF overview

4. Make a commit (not skippable)

User will enter any commit message and commit

5. Push to GitHub (not skippable)

User will push using the toolbar or key command

6. Open a Pull Reuqest (skippable)

User will open a pull request using the provided button or key command.

Finish

When the guide is complete, we'll show the user some jumping off points for what to do next

Exiting the tutorial

No other repositories

If the user has no other repositories, we'll send them back to the Let's Get Started screen, with an option to resume the tutorial

With other repositories

If the user has other repositories, we'll pop open the repositories panel where they can navigate to another repo, or add new ones. You can resume the tutorial by going back to the tutorial repo.

Sidebar details

• The steps can collapse and open.
• It should be defaulted to the step you’re on
• It should be responsive

In the future

• The sidebar might show/hide
• We might add callouts or motion to point to elements on the page

Clarifications

• Only one step can be open at a time
• Responsive design: At minimum app size, width of the sidebar will have reduced width.
• When a user leaves and comes back, the tutorial remembers the completed steps and opens to the step that is the first incomplete step.
• Content is not final yet, but will need to be finalized prior to releasing this in 2.2.

[tierninho]

Spotted this and was curious if we are leaving this tutorial open to Enterprise users, should that be the only type of user logged in? If so are all the text mentions going to change from GitHub to GitHub Enterprise to be consistent with the rest of the app?

[outofambit]

shipped in #8384!