Use task list pattern for request to go live

We’ve found a significant property of users (about 25%) who request to
go live aren’t completing all the items on the checklist.

In 1 of 6 (17%) of the usability testing sessions we did on this process
we saw someone skip straight past the checklist page because of big
green button syndrome. While 1 in 6 people would normally be a small
number[1] in the context of a usability testing session, it’s enough to
cause a big workload for our team (assuming it is the sole cause of
people not completing the items on the checklist).

The initial reason for using the tick cross pattern for the checklist
was:
- it was coherent with the rest of Notify
- the task list pattern didn’t have a way of showing that something
  still needed doing – it put more visual emphasis on the things
  the user had already done

There’s been some interesting discussion on the GOV.UK Design System
backlog about users failing to complete items in the task list. A few
people have tried different patterns for communicating that items in the
task list still need ‘completing’.

So this commit:
- adds a task list pattern
- uses the task list pattern for the request to go live checklist

The task list is adapted from the one in the design system in that:
- the ‘completed’ label has a black, not blue background (because Notify
  often uses blocks of blue to indicate something that’s clickable)
- it adds an explicit ‘not complete’ label which is visually not
  filled in (sort of how ticked/unticket radio buttons work)

1. With the caveat that looking only at task completion, or quantifying
   qualitative not good practices and the intention here is to show that
   the numbers are close enough to say that they could be symptomatic of
   the same problem. Leisa Reichelt’s Mind the Product talk is good on
   this https://vimeo.com/284015765

app/assets/stylesheets/components/task-list.scss

@@ -0,0 +1,41 @@
+$indicator-colour: $black;
+
+%task-list-indicator {
+  @include bold-16;
+  display: inline-block;
+  padding: 3px 8px 1px 8px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -15px;
+  border: 2px solid $indicator-colour;
+}
+
+.task-list {
+
+  border-bottom: 1px solid $border-colour;
+  margin: $gutter 0;
+
+  &-item {
+    border-top: 1px solid $border-colour;
+    padding: 15px 0;
+    padding-right: 20%;
+    position: relative;
+  }
+
+  &-indicator-completed {
+    @extend %task-list-indicator;
+    background-color: $indicator-colour;
+    color: $grey-4;
+    // Just a pinch of letter spacing to make reversed-out text a bit
+    // easier to read
+    letter-spacing: 0.02em;
+  }
+
+  &-indicator-not-completed {
+    @extend %task-list-indicator;
+    background-color: transparent;
+    color: $indicator-colour;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -62,6 +62,7 @@ $path: '/static/images/';
 @import 'components/vendor/breadcrumbs';
 @import 'components/vendor/responsive-embed';
 @import 'components/email-preview-pane';
+@import 'components/task-list';
 
 @import 'views/dashboard';
 @import 'views/users';

app/templates/components/task-list.html

@@ -0,0 +1,16 @@
+{% macro task_list_item(completed, label) %}
+  <li class="task-list-item">
+    {{ label }}
+    {% if completed %}
+      <span class="task-list-indicator-completed">Completed</span>
+    {% else %}
+      <span class="task-list-indicator-not-completed">Not completed</span>
+    {% endif %}
+  </li>
+{% endmacro %}
+
+{% macro task_list_wrapper() %}
+  <ul class="task-list">
+    {{ caller() }}
+  </ul>
+{% endmacro %}

app/templates/components/tick-cross.html

@@ -14,7 +14,6 @@
   </li>
 {% endmacro %}
 
-
 {% macro tick_cross_done_not_done(yes, label) %}
   {{ tick_cross(yes, label, truthy_hint='Done: ', falsey_hint='Not done: ') }}
 {% endmacro %}

app/templates/views/service-settings/request-to-go-live.html

@@ -4,7 +4,7 @@
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/banner.html" import banner_wrapper %}
-{% from "components/tick-cross.html" import tick_cross_done_not_done %}
+{% from "components/task-list.html" import task_list_wrapper, task_list_item %}
 
 {% block service_page_title %}
   Request to go live
@@ -15,30 +15,30 @@
     <div class="column-whole">
       <h1 class="heading-large">Request to go live</h1>
       <p>
-        Before your service can go live on Notify, you’ll need to:
+        Before your service can go live on Notify, you need:
       </p>
-      <ul class='bottom-gutter'>
-        {{ tick_cross_done_not_done(
+      {% call task_list_wrapper() %}
+        {{ task_list_item(
           has_team_members,
-          'Have more than one <a href="{}">team member</a> with the ‘Manage service’ permission'.format(
+          'More than one <a href="{}">team member</a> with the ‘Manage settings’ permission'.format(
             url_for('main.manage_users', service_id=current_service.id)
           )|safe,
         ) }}
-        {{ tick_cross_done_not_done(
+        {{ task_list_item(
           has_templates,
-          'Create <a href="{}">templates</a> showing the kind of messages you plan to send'.format(
+          '<a href="{}">Templates</a> showing the kind of messages you plan to send'.format(
             url_for('main.choose_template', service_id=current_service.id)
           )|safe,
         ) }}
         {% if has_email_templates %}
-          {{ tick_cross_done_not_done(
+          {{ task_list_item(
             has_email_reply_to_address,
-            'Add an <a href="{}">email reply-to address</a>'.format(
+            'An <a href="{}">email reply-to address</a>'.format(
               url_for('main.service_email_reply_to', service_id=current_service.id)
             )|safe,
           ) }}
         {% endif %}
-      </ul>
+      {% endcall %}
       <p>
         You also need to accept our <a href="{{ url_for('.terms') }}">terms of use</a>.
       </p>

tests/app/main/views/test_service_settings.py

@@ -503,19 +503,19 @@ def test_should_raise_duplicate_name_handled(
 
 
 @pytest.mark.parametrize('count_of_users_with_manage_service, expected_user_checklist_item', [
-    (1, 'Not done: Have more than one team member with the ‘Manage service’ permission'),
-    (2, 'Done: Have more than one team member with the ‘Manage service’ permission'),
+    (1, 'More than one team member with the ‘Manage settings’ permission Not completed'),
+    (2, 'More than one team member with the ‘Manage settings’ permission Completed'),
 ])
 @pytest.mark.parametrize('count_of_templates, expected_templates_checklist_item', [
-    (0, 'Not done: Create templates showing the kind of messages you plan to send'),
-    (1, 'Done: Create templates showing the kind of messages you plan to send'),
-    (2, 'Done: Create templates showing the kind of messages you plan to send'),
+    (0, 'Templates showing the kind of messages you plan to send Not completed'),
+    (1, 'Templates showing the kind of messages you plan to send Completed'),
+    (2, 'Templates showing the kind of messages you plan to send Completed'),
 ])
 @pytest.mark.parametrize('count_of_email_templates, reply_to_email_addresses, expected_reply_to_checklist_item', [
     pytest.mark.xfail((0, [], ''), raises=IndexError),
     pytest.mark.xfail((0, [{}], ''), raises=IndexError),
-    (1, [], 'Not done: Add an email reply-to address'),
-    (1, [{}], 'Done: Add an email reply-to address'),
+    (1, [], 'An email reply-to address Not completed'),
+    (1, [{}], 'An email reply-to address Completed'),
 ])
 def test_should_show_request_to_go_live_checklist(
     client_request,
@@ -552,7 +552,7 @@ def test_should_show_request_to_go_live_checklist(
     )
     assert page.h1.text == 'Request to go live'
 
-    checklist_items = page.select('main ul[class=bottom-gutter] li')
+    checklist_items = page.select('.task-list .task-list-item')
 
     assert normalize_spaces(checklist_items[0].text) == expected_user_checklist_item
     assert normalize_spaces(checklist_items[1].text) == expected_templates_checklist_item