Merge pull request #3588 from alphagov/broadcast-tour-rework

Refine the broadcast tour based on what we’ve learned in research

app/templates/views/broadcast/tour/1.html

@@ -3,7 +3,7 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  Step 1
+  You’ve been invited to use GOV.UK Notify for emergency alerts.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,20 +14,15 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          You’ve been invited to use GOV.UK Notify to broadcast alerts
+          You’ve been invited to use GOV.UK&nbsp;Notify for emergency alerts.
         </h1>
-        <ul>
-          <li>
-            Broadcasting is a new technology for alerting members of the
-            public
-          </li>
-          <li>
-            It should be used when there’s an imminent risk to life
-          </li>
-        </ul>
+        <p class="govuk-body heading-medium">
+          Emergency alerts let you warn the public about an
+          imminent risk to life.
+        </p>
         <p class="govuk-body heading-medium">
           <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=2) }}'>
-            Find out how it works
+            Continue
           </a>
         </p>
       </div>

app/templates/views/broadcast/tour/2.html

@@ -3,7 +3,8 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  Step 2
+  In an emergency, you can broadcast an alert to every mobile phone in
+  the affected area.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,23 +15,15 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          A broadcast will alert every phone in an area
+          In an emergency, you can broadcast an alert to every mobile phone in
+          the affected&nbsp;area.
         </h1>
-        <ul>
-          <li>
-            The alert will appear even if the phone’s screen is locked
-          </li>
-          <li>
-            The phone will play an alarm sound even if it’s set to silent
-          </li>
-          <li>
-            Any phone that enters the area while the broadcast is live will
-            get the alert
-          </li>
-        </ul>
+        <p class="govuk-body heading-medium">
+          You do not need to know people’s phone&nbsp;numbers.
+        </p>
         <p class="govuk-body heading-medium govuk-!-margin-bottom-6">
           <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=3) }}'>
-            How to try it out
+            Continue
           </a>
         </p>
       </div>

app/templates/views/broadcast/tour/3.html

@@ -3,7 +3,7 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  Step 3
+  An emergency alert looks a bit like a text message.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,23 +14,15 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          You have a trial account
+          An emergency alert looks a bit like a text&nbsp;message.
         </h1>
-        <ul>
-          <li>
-            There’s no risk of triggering a real, live broadcast
-          </li>
-          <li>
-            Get familiar with the system now, so you’re ready to use it if
-            there’s an emergency
-          </li>
-          <li>
-            When you’re ready, apply for a live account
-          </li>
-        </ul>
         <p class="govuk-body heading-medium">
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
-            Continue to dashboard
+          It also makes a loud alarm noise, even if the phone is set
+          on silent.
+        </p>
+        <p class="govuk-body heading-medium">
+          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=4) }}'>
+            Continue
           </a>
         </p>
       </div>

app/templates/views/broadcast/tour/4.html

@@ -0,0 +1,43 @@
+{% from "components/banner.html" import banner_wrapper %}
+
+{% extends "admin_template.html" %}
+
+{% block per_page_title %}
+  You’re in training mode.
+{% endblock %}
+
+{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
+
+{% block content %}
+
+  <div class="navigation-service">
+    <div class="navigation-service-name govuk-!-font-weight-bold">
+      {{ current_service.name }} <span class="navigation-service-type--training">Training</span>
+    </div>
+  </div>
+
+  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="heading-medium">
+          You’re in training mode.
+        </h1>
+        <p class="govuk-body heading-medium">
+          There’s no risk of broadcasting a real alert.
+        </p>
+        <p class="govuk-body heading-medium">
+          Get used to the system now, so you know what to do in an&nbsp;emergency.
+        </p>
+        <p class="govuk-body heading-medium">
+          When you’re ready, you can turn off training mode.
+        </p>
+        <p class="govuk-body heading-medium">
+          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+            Continue to dashboard
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+{% endblock %}