From b19ca72fec0813821e5a5e517d259ba47e7f5847 Mon Sep 17 00:00:00 2001 From: Dilwoar Hussain Date: Tue, 14 Apr 2020 13:16:33 +0100 Subject: [PATCH 1/2] Add icon for banner Iterate the banner design to try to increase the clickthrough rate. Design details: - Mobile design matches the landing page header CTA (breaks across two lines, with a larger arrow icon) - The CTA link needs a discretionary line break after the colon - Delete the line break between the last two sentences of the banner on both mobile and desktop (To match landing page) Our analysis has shown that the switch from the red to black banner increased interaction (hides) but reduced clickthroughs. CTR for old banner (red) = 4.3% CTR for current banner (black) = 3.7% Interaction rate for old banner= 5.2% Interaction rate for current banner= 5.7% --- app/assets/images/covid-arrow.png | Bin 0 -> 2042 bytes app/assets/images/covid-arrow.svg | 3 +++ app/assets/stylesheets/helpers/_header.scss | 24 +++++++++++++++++++ app/views/notifications/_global_bar.html.erb | 6 ++++- 4 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 app/assets/images/covid-arrow.png create mode 100644 app/assets/images/covid-arrow.svg diff --git a/app/assets/images/covid-arrow.png b/app/assets/images/covid-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..ea612012c911c579e42ebdaffac045e43ae9657e GIT binary patch literal 2042 zcmV)rfrg*`SsUwj&p}gL)jb2! zNF&XoXZkhw92=yAY{aFi-_-&f1s6w0^dSZqozbHhBA5V*SUo2>%Kj8d0K}4Bvjl+& zr0_tG=Kw2u4(8%?xdaCh;0PoxCTUZM@C^x@!izA?kW_(l68xRy&PZ$m4q&xNl1Jjk zZvpWgbSCZ~3H_92kgmRx)EQWcbt2c~UBK?tXp&s&ElHh&MOYzHwRh142=SI4PQeK% z1tXHsUw2>uMny`2QFKXd-WAvveN~|-#T!V|dz0;{5s{tyZu=5#mNnetrba zXcZ}k6=MAN5QT@}$%Lo(I#aDSk*Yl$kwjy2qOPH}-P9s-kk}Y)GFyurB(_G2%vK@? ziP~r_v$4oQqIO!zY$S4!*cmMIb(8HT%_aooY|S9C17bCNt50o_aWy z5ouLVwT!SMQ=MEZu$@{3UV;mREK?mn++ahbJfGoGx(Qe2R2~RkV>2S7ksHytPOvgZ z8{_Itk?80ln-FCR*m%FsB60C*3NCNo2v6qGdU}0{$Os$%5Ue3MnJ?+}MWm}~wMa-Z zY3efnREku^h&2;P8?gdmekxRvL?YR1bB693+G_K=!WX2>C?b)l^HQve`okhW&_xDmJazqAr zs>(N+5lkXl+nPX#_#_iWU~Oa(e`LmEz({-X9;ZNP13|Wyo^NI z*7Jv~*D7Y$@hKQ3aES+^ zkvY5_5?2;PrA+UQ1-LDdkjLBib5Nw5K{ycBJrJ{qtcqnV+?U9Af*rmLwEB&%$?*>h z%6BDou6TD|Vuh5NQ+=m7rtd8nTUL%t4){d96z#(@DW3izW^1qrqUm3Y}E-kl!fc zN4xj^^bN{|`Yt3got7{g+RYr9O5f{DrA0cev%}xGT!t~fo@owx?>yz!r9`H;qJjZN z=Ztq(6u0(wMeo%isUviu3N(oryyUqpyn`MwR^}5IuReoFKlmdQv%SDiH*GeFHN|MX zR<$@By;DOK5rdPM6_{g9;oU6dURtuwS%sN8xt89U6qsXO1!cK745KTO`o_K}mF?eG z`o6wpXGyKWI+5$h%9Vf@hNbderF$FYtz)&wbyRyQt5{A+?4KQ`;DrAD8KmMn7bEI= z{HF_NL>7_TP2_E~d`TOg@zr~LYnys3cc#ZXUbW=1(b)qQmT=KpdM+VpJl;!eXz!Zv YKjhZUA?F+#xc~qF07*qoM6N<$g1j%c2><{9 literal 0 HcmV?d00001 diff --git a/app/assets/images/covid-arrow.svg b/app/assets/images/covid-arrow.svg new file mode 100644 index 000000000..dafb97d2d --- /dev/null +++ b/app/assets/images/covid-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/helpers/_header.scss b/app/assets/stylesheets/helpers/_header.scss index ba20b832b..93b259234 100644 --- a/app/assets/stylesheets/helpers/_header.scss +++ b/app/assets/stylesheets/helpers/_header.scss @@ -516,6 +516,30 @@ $covid-grey: #262828; } } +.global-bar-title__icon { + display: inline-block; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + box-sizing: border-box; + padding-left: 50px; + min-height: 45px; + background-image: image-url("covid-arrow.png"); // PNG fallback for SVG + background-image: image-url("covid-arrow.svg"); + background-repeat: no-repeat; + background-position: 0 50%; + background-size: 37px auto; + + @include govuk-media-query($from: desktop) { + // IE10/11 specific - vertical align in flexbox is ignored + // unless an explicit height is set + @media screen and (min-width:0\0) { + height: 45px; + } + } +} + .global-bar-dismiss-wrapper { margin-top: govuk-spacing(4); } diff --git a/app/views/notifications/_global_bar.html.erb b/app/views/notifications/_global_bar.html.erb index 69a9c9cea..062e7f40b 100644 --- a/app/views/notifications/_global_bar.html.erb +++ b/app/views/notifications/_global_bar.html.erb @@ -2,6 +2,7 @@ show_global_bar ||= true # Toggles the appearance of the global bar title = "Coronavirus (COVID-19): what you need to do" title_href = "/coronavirus" + title_icon = true link_text = false link_href = false @@ -15,6 +16,7 @@ title_classes = %w(global-bar-title) title_classes << "js-call-to-action" if title_href title_classes << "govuk-link" if title_href + title_icon_class = "global-bar-title__icon" if title_icon dismiss_classes = %w(global-bar__dismiss global-bar__dismiss--show dismiss) dismiss_classes << "govuk-link" @@ -35,7 +37,9 @@
<% if title %> <% if title_href %> - <%= title %> + + <%= title %> + <% else %> <%= title %> <% end %> From 60cc708180574c4ecf7eb2fd5b26eb27941278b1 Mon Sep 17 00:00:00 2001 From: Dilwoar Hussain Date: Wed, 15 Apr 2020 12:09:13 +0100 Subject: [PATCH 2/2] Adds alt text support for covid logo --- app/views/notifications/_covid_logos.html.erb | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/views/notifications/_covid_logos.html.erb b/app/views/notifications/_covid_logos.html.erb index 3c0dcbf90..ebf1a4475 100644 --- a/app/views/notifications/_covid_logos.html.erb +++ b/app/views/notifications/_covid_logos.html.erb @@ -1,4 +1,9 @@ - +<% + alt_text = "Stay at home. Protect the NHS. Save lives." +%> + + + <%= alt_text %> @@ -19,7 +24,6 @@ <%= tag.image(src: image_url("covid.png"), - class: "global-bar-image govuk-grid-column-one-third", - alt: "Stay at home. Protect the NHS. Save lives.", + alt: alt_text, "xlink:href": "") %>