Release UX Scorecard: Deploy to Gitlab Pages

Deploy to Gitlab Pages

JTBD: When using a static site generator, I want automatic deployments every time I commit a change, so that I can keep my site up to date without manual builds.

Checklist

• 1. Document the current experience of the JTBD, as if you are the user. Capture the screens and jot down observations. Also, apply the following Emotional Grading Scale to document how a user likely feels at each step of the workflow. Add this documentation to the epic's description.
• 2. Use the Grading Rubric below to provide an overall measurement that becomes the Benchmark Score for the experience, and add it to the epic's description.
• 3. Once you’re clear about the user’s path, create a clickthrough video that walks through the experience and includes narration of the Emotional Grading Scale and Benchmark Score.
• 4. Post your video to the GitLab Unfiltered YouTube channel, and link to it from the epic's description.
• 5. If your JTBD spans more than one stage group, that’s great! Review your JTBD with a designer from that stage group for accuracy.
• 6. Create an issue to revisit the same JTBD the following quarter to see if we have made improvements. We will use the grades to monitor progress toward improving the overall quality of our user experience.

Grading Rubric

C (Average) Workflow needs improvement, but user can still finish completing the task. It usually takes longer to complete the task than it should. User may abandon the process or try again later.

Current Experience

Clickthrough video https://youtu.be/WiVq7pQ0RMg

Experience map Mural

Assumptions

• I know from reading the features of GitLab I am able to build and deploy a site though GitLab Pages.
• I have a repository that uses a static site generator
• I am familiar with the build process of the SSG I am using.

Step 1: Discovery

Score: Negative: I am confused about how to proceed

I want to configure my site to deploy to GitLab pages, but I am unsure where to begin. Looking at the project screen I do not see any reference to Pages, so I begin to hunt around the UI in hopes of discovering it.

After some searching, I am able to locate a Pages section under the Settings section of the main navigation sidebar.

I am brought to the Pages settings page. After looking through the options I do not see a way to deploy. I do see a link to the documentation. Having no other options I decided to read the documentation to see how to proceed.

Step 2: Documentation

Score: Neutral: I was able to figure out what to do next, but had to put in the effort to do so.

I spend some time reading through the documentation. I am able to find the information I am looking for relatively quickly, although there is a lot of other information I am not interested in at this time.

I am a bit confused by the large block images, they stand out so my attention is drawn to them. They look like links, but clicking them only takes me to the image file. I would have expected it took me to documentation related to the block, in this case static sites

Reading on I get a good introduction to the concept of building pages with GitLab and what a yaml file is.

Reading the next section I am a bit frustrated. I do want to create or fork a project. I already have a project, I just want to add pages to it. I scroll to the bottom of the page but still don't find what I am looking for. I remember the section above had a link to create and modify. I scroll up and find the link

I read through the page, this seems like the exact information I was looking for. Other then the introduction on the previous page, I wonder why this is not the page that is linked to directly.

I am clear on my next step, I need to edit the yaml file.

Step 3: Create Yaml File

Score: Positive: Navigation and creation are simpler than expected.

I navigate back to the repository.

I am happy to be able to use the WebIDE and not have to leave the UI to open a code editor.

Using the WebIDE, I am happy to see there is a shortcut to create gitlab-ci.yml

Step 4: Edit Yaml File

Score: Positive/Negative: Positive if a template exists for my type of SSG, in this case, it does not

I am unable to find a template so I have to refer back to the documentation and learn the correct syntax to execute the build steps I know are needed for my type of SSG. I am familiar with building my site, but having to fit that process into the syntax required here makes me feel a bit lost since I have never worked with a yaml file before.

Step 5: Commit and hope everything works ok

Score: Neutral: I am happy to see the build in real time, but I am not sure where to go after the commit and after a pipeline succeeds.

I commit the changes to the yaml file, but I am not really sure where to go from here. I eventually notice a link at the bottom of the page below where I had clicked the commit button.

I see the pipeline run and complete. I am delighted to see this in real time.

Once complete I am not sure where to go. It seems like everything was successful but I don't know how to see my site. I click in the pipeline to see if that has more info, but this doesn't seem to be what I am looking for.

Step 6: Find the site

Score: Negative: I am happy about success, but it takes me some time to find and it takes up 30 min for my site to go live.

I decide to try back in the Pages setting again so I navigate back there. I do see a link to my site. Clicking the link, initially, I get a 404. I wait around 20 min eventually the site is up. I am confused why it said congratulations and yet it still took 20 min before my site was live.

404

Site is up

Step 7: Edit and auto build

Score: Positive: Now that I know where things are, I am able to achieve my goal of committing a change and have an auto build.

I make an edit to the repository to see if it triggers an automatic build.

Now that I know where to look I am happy to see pipelines running

Success!

Step 8: What is next

Score: Negative: The page design is overall confusing.

Looking at the page setting page I am confused about what these settings do and the overall layout does not make much sense to me. The big red section looks daunting, but since it is so bold my eye is drawn there. I see a save button in the middle of the page, but not sure what this would save as there is only one checkbox. Is this for all settings or just the checkbox?

Page Templates

Template	Experience	Needs clearer readme	Broken CSS
Hugo	😄	✅
Jekyll	☹	✅	✅
Html	😄
Git Book	😄	✅
Hexo	☹	✅	✅

Notable SSG with out templates

GatsbyJS

Vuepress