darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 13:39:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refine broadcast tour based on research learnings

Browse Source 
We’ve shown the broadcast tour to a few users now. We’ve learned what
concepts about broadcasting are and aren’t getting through.

So what we’re emphasising here is:
- the thing that appears on the phone (the ‘emergency alert’) not the
  technology (a ‘broadcast’)
- how it’s different to other channels of messaging, eg text

We’ve generally spent a lot more time on the content and illustrations
this time around, so overall it’s should be clearer and shorter.

This also expands the communication of training mode into the header,
so it’s visible on every page (we can add another one for ‘live’
services later on).
This commit is contained in:
Chris Hill-Scott
2020-08-19 14:54:50 +01:00
parent 0dfbc1df67
commit 8578e64cc9
13 changed files with 3008 additions and 2596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/broadcast-tour/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 67 KiB

BIN
app/assets/images/broadcast-tour/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 71 KiB

BIN
app/assets/images/broadcast-tour/3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 32 KiB

5403
app/assets/images/broadcast-tour/artwork.ai
View File

File diff suppressed because one or more lines are too long

9
app/assets/stylesheets/components/banner.scss
View File

@@ -80,9 +80,16 @@
&-no-fixed-height {
height: auto;
padding-top: govuk-spacing(8);
min-height: 425px;
}
&-with-service-name {
margin-top: -10px;
padding-top: 0;
box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
}
.heading-medium {
@include core-24;
}
@@ -143,6 +150,8 @@
img {
width: 100%;
height: auto;
position: relative;
top: -1 * govuk-spacing(2);
}
.greyed-out-step {

17
app/assets/stylesheets/components/navigation.scss
View File

@@ -18,6 +18,23 @@
text-overflow: ellipsis;
}
&-service-type {
&--training {
@include bold-16;
position: relative;
display: inline-block;
margin-left: govuk-spacing(2);
padding: 0 govuk-spacing(1);
background: $grey-3;
color: mix($grey-1, $text-colour);
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 -3px 0 0 $grey-3;
}
}
&-service-switch,
&-service-back-to,
&-organisation-link {

2
app/main/views/broadcast.py
View File

@@ -23,7 +23,7 @@ from app.utils import service_has_permission, user_has_permissions
@user_has_permissions()
@service_has_permission('broadcast')
def broadcast_tour(service_id, step_index):
if step_index not in (1, 2, 3):
if step_index not in (1, 2, 3, 4):
abort(404)
return render_template(
f'views/broadcast/tour/{step_index}.html'

19
app/templates/views/broadcast/tour/1.html
View File

@@ -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>

23
app/templates/views/broadcast/tour/2.html
View File

@@ -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>

24
app/templates/views/broadcast/tour/3.html
View File

@@ -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>

43
app/templates/views/broadcast/tour/4.html Normal file
View File

@@ -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 %}

3
app/templates/withnav_template.html
View File

@@ -17,6 +17,9 @@
{% endif %}
<div class="navigation-service-name govuk-!-font-weight-bold">
{{ current_service.name }}
{% if current_service.has_permission('broadcast') and current_service.trial_mode %}
<span class="navigation-service-type--training navigation-service-type--training--with-arrow">Training</span>
{% endif %}
</div>
<a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
</div>