2019Q2 UX Scorecard for setting up GitLab-CI

OKR Job to be Done

JTBD: When I have created my project, I want to set up automated testing inside GitLab, so I can assure every commit before merging.

Scenario

Devon (DevOps Engineer) needs to set up automated testing inside GitLab for an existing project (node js project), so he can assure every commit before merging. He wants to see it in use as soon as possible, so he knows that his contributions are reliable and he can report back with objective results.

Expectations & goals

Goal: Improving the way GitLab-CI is setup for existing projects by finding out what pain points currently exist.

Expectations:

Easy and intuitive initial setup
Quick and real feedback upon changes
Quantitative metrics to report back to with
Recommendations to improve the current setup
Clear references to documentation

Tasks

If your JTBD spans more than one stage group, that’s great! Review your JTBD with a designer from that stage group for accuracy.
Document the current experience of the JTBD, as if you are the user. Capture the screens and jot down observations. Also, apply the Emotional Grading Scale below to document how a user likely feels at each step of the workflow.
Use the Grading Rubric below to provide an overall measurement that becomes the Benchmark Score for the experience.
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.
Post your video to the GitLab Unfiltered YouTube channel, and link to it above.
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. Add that issue as related to this issue.

Emotional Grading Scale

Expand/collapse scale

🎉 Positive: The user’s experience included a pleasant surprise—something they were not expecting to see. The user enjoyed the experience on the screen and could complete the task, effortlessly moving forward without having to stop and reassess their workflow. Emotion(s): Happy, Motivated, Possibly Surprised
😐 Neutral: The user’s expectations were met. Each action provided the basic expected response from the UI, so that the user could complete the task and move forward. Emotion(s): Indifferent
😠 Negative: The user did not receive the results they were expecting. There may be bugs, roadblocks, or confusion about what to click on that prevents the user from completing the task. Maybe they even needed to find an alternative method to achieve their goal. Emotion(s): Angry, Frustrated, Confused, Annoyed

Grading Rubric

Expand/collapse rubric

A (High Quality/Exceeds): Workflow is smooth and painless. Clear path to reach goal. Creates “Wow” moments due to the process being so easy. User would not hesitate to go through the process again.

Frustration: Minimal to none
Task Completion: Successful
Steps to Accomplish Task: Minimal

B (Meets Expectations) Workflow meets expectations but does not exceed user needs. User is able to reach the goal and complete the task. Less likely to abandon.

Frustration: Low
Task Completion: Successful
Steps to Complete Task: Minimal

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.

Frustration: Medium
Task Completion: Successful but with unnecessary steps
Steps to Complete Task: Average complexity

D (Presentable) Workflow has clear issues and should have not gone into production without more thought and testing. User may or may not be able to complete the task. High risk of abandonment.

Frustration: High
Task Completion: Unlikely, but there may be a chance that there is completion
Steps to Complete Task: Excessive

F (Poor) Workflow leaves user confused and with no direction of where to go next. Can sometimes cause the user to go around in circles or reach a dead end. Very high risk of abandonment, and user will most likely seek other methods to complete the task.

Frustration: Very High
Task Completion: Very Unlikely
Steps to Complete Task: Lacking

Current experience

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.

Frustration: Medium
Task Completion: Successful but with unnecessary steps
Steps to Complete Task: Average complexity

📹 Experience walkthrough on Youtube

✍ Experience Map in Mural.ly

1. Exploration: Finding out about GitLab-CI and where/how to activate it

Step	Screenshot	Emotional grade
Clicks button "set up CI/CD		😠 Negative: Confused - There aren't many indications that there is CI product available for use, also there seem to be multiple related ones.

2. Configuring: Configuring GitLab-CI to get an initial PoC going.

Step	Screenshot	Emotional grade
Clicks on first dropdown with value ".gitlab-ci.yml"		😠 Negative: Confused - How will this view help me setup gitlab-ci? There is no indication of it at all, except for a file name. There is a template option with the same name which I can apply. It is not clear if it has been applied already yes or no. Though the file seems empty. Apparently this is for choosing different template types... Are those immediately related to setting up gitlab-ci?

Step	Screenshot	Emotional grade
Clicks on second dropdown with value "apply a gitlab ci yaml template"		😐 Neutral: Indifferent - I have a lot of options to choose from...

Step	Screenshot	Emotional grade
Applies a template (node js)		😐 Neutral: Indifferent - The template is now clearly applied. It seems though additional edits are needed inside of applied template/ It is uncertain why I would need to do that. I am unsure what tests will now be run and what they will do. The documentation help link also requires me to copy and paste is manually, which seems inefficient.

Step	Screenshot	Emotional grade
Commits changes and adds .gitlab-ci.yml file to the repository		😐 Neutral: Indifferent - If I commit my changes, i'll be adding a .gitlab-ci.yml file to my repository. I am unsure if this helps me further.

3. Receiving feedback: Finding out if the configuration worked.

Step	Screenshot	Emotional grade
Browses around the page after committing the gitlab-ci.yml file		😠 Negative: Confused - I see my file has been created successfully and the ci configuration is deemed valid. This is good to know, though I have no indication of it actually doing something. There is no clear next path as well...

Step	Screenshot	Emotional grade
clicks ci/cd in left sidebar		😐 Neutral: Indifferent - This is the only other related to ci step that I can take. If something is happening I might be able to find out there. This was not obvious though due it being one of many options in the left sidebar.

Step	Screenshot	Emotional grade
Browsing around page		😠 Negative: Frustrated - Apparently the pipeline failed all tests, even though my project is a node js project and the template was for nodejs projects. After closer inspection the stage button includes 2 jobs run, this is quite hidden information while i was looking for it immediately. I can already get some stats and metric of my pipeline. It is not really clear to me how I can dive deeper into this pipeline...

Step	Screenshot	Emotional grade
Navigates to pipeline detail page by clicking the status badge		🎉 Positive: Motivated - Now I can clearly see 2 jobs were failed

Step	Screenshot	Emotional grade
Click on failed jobs tab		🎉 Positive: Motivated - It' nice that I get excerpts of what failed inside of the jobs. Seems there were modules missing. It is unclear how to proceed to fix this.

4. Reacting: Adjusting the configuration if failed

Step	Screenshot	Emotional grade
Click "project" in left sidebar		😐 Neutral: Indifferent

Step	Screenshot	Emotional grade
Click ci/cd configuration		😠 Negative: Annoyed - I am back at the blob view of the configuration file. I do however need to have an additional tab open now to see this configuration side by side with my errors.

Step	Screenshot	Emotional grade
Click on failed status icon (open in a new tab)		😐 Neutral: Indifferent - Strange that this states commit failed... It is nice that I am immediately back at the pipeline view I was before, though I need to navigate manually again to the failed jobs tab.

Step	Screenshot	Emotional grade
Navigates back and forth between failed jobs tab view and .gitlab-ci.yml blob view		😐 Neutral: Indifferent - It is now clear that the script is looking for certain files which I might not have. I'll need to figure out if this is indeed the case.

Step	Screenshot	Emotional grade
Click "project" in left sidebar and click on ci/cd configuration		😠 Negative: Annoyed - These files are not existing, so why would a template expect them right off the bat?

Step	Screenshot	Emotional grade
Edit out the lines looking for missing files and replace them by a simple echo command.		😐 Neutral: Indifferent - The edit button is not very obvious, also there is now an web ide button as well. I want to see a green pipeline after every commit, after that I can begin optimising and making it more specific.

5. Validating: Validating that the job(s) run the adjusted scripts and the pipeline is now green, plus is indeed run after every commit.

Step	Screenshot	Emotional grade
clicks ci/cd in left sidebar		🎉 Positive: Motivated - It seems the pipeline is running. And aftter a short time it also updated the view to show me that it was completed succesfully.

Step	Screenshot	Emotional grade
Click on job inside of the stage dropdown		🎉 Positive: Motivated - It is nice that I can directly navigate towards a job and see the successful output, including the job being scrolled down.

Edited Oct 17, 2019 by Valerie Karnes