NHSBT Digital Brand Guidelines

Digital Guidelines
Your handy guide to communicating effectively and consistently online
Design
elements
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
NHSBT Logo
Logo artwork:
The NHS Blood and Transplant (NHSBT) logo should
always be used to show that the site is ours. It must be
aligned to the right of any page and you should make sure
that there is enough space left around it.
The minimum buffer space should be at least 15px round
the logo.
Colour versions:
The logo as it is should always be placed on a white or light
coloured background. If used on a coloured background e.g.
on social media assets, the logo should be reversed out.
Nothing should be added to or changed on the logo,
including the exclusion zone, for example a drop shadow,
fading, use of italics, images, words, and numbers (see
page 5.)
Exclusion zone:
Minimum size:
100 px
3
Identity mark
Example website alignment:
The identity mark (and accompanying wording) for each
service should always align to the top left of any page. For
social assets, it should be at the bottom right of the page.
It’s important that it is large enough to be clearly legible. If
being placed on a white coloured background the identity
marks should always be in the service brand colour, if being
placed on a coloured background the identity mark should be
reversed out.
If a service does not have their own identity mark e.g.
Hospitals & Science, you should contact NHSBT to confirm
how best to represent the Service, currently this is written
using Frutiger typeface. If this is not available please use the
Arial typeface.
Example social post alignment:
When appropriate, and when not wanting to include a call to
action or message, you can use the identity mark without the
support of any wording e.g. the two hearts for Blood without
wording.
4
Identity mark
Blood donation
Organ donation
Platelet donation
Preferred mark
Preferred mark
Preferred mark
URL mark
URL mark
URL mark
Emotive mark
Emotive mark
Emotive mark
Thank you marks
Thank you marks
Thank you marks
Other services
Clinical only
5
Incorrect logo /
identity mark use
It is important that you use the NHSBT logo and identity marks
correctly. Artwork files should never be altered in any way.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
Things to avoid
01.Never change logo colour;
02.Never change or alter the identity marks;
03.Never distort logo or identity marks;
04.Never rearrange elements within the logo or identity marks;
05.Never add special effects to logo or identity marks;
06.Never change the scale of elements;
07.Never change/replace typefaces and never use an
ampersand within our name;
08.Never remove elements of our marks;
09.Never use the identity mark on a clashing colour
background;
10.Never rearrange the text;
11.Never use multiple colours or attach the heart graphics to
service identity labels;
12.Never add new messages or change the colour of the text;
13.Never use old identity marks;
14.Never use old corporate logos;
15.Never intersect the graphic or place anything within or over
the heart graphics.
BLOOD & TRANSPLANT
6
Ribbon Graphic
The NHSBT ribbon graphic should be used across the
majority of all NHSBT communications. It flows through all of
our different services and departments, and unites us as one
organisation working together.
NHS Blood and Transplant ribbon
It gives us flexibility to denote different areas of our work
through colour. When using the ribbon it should always be
displayed in the colour associated with the relevant service
brand.
Due to scaling up/down issues the ribbon is not used on the
design of our websites, however it is used on online assets
that may be uploaded to the websites, and also heavily
features on our social media channels.
Example ribbon crops
There are three key ribbon graphic artworks available; the
ribbon on its own, the ribbon with white below and the ribbon
with white above. The white area allows for inclusion of text,
and it should always be placed within the bottom third of the
asset.
The ribbon graphic should be cropped to run full-bleed, and
you should NEVER use the full graphic. Instead you should
use roughly one or two of the consecutive sections. A crop
at the left-hand end, where the waves are higher and closer
together give the asset a sense of dynamism. A crop at the
right-hand end has a more controlled and corporate feel.
7
Organ Donation ribbon
British Bone Marrow ribbon
Give Blood ribbon
Cord Blood ribbon
Platelet Donation ribbon
Tissue Donation ribbon
8
Using the Ribbon
Graphic
Our ribbon graphic should be used as consistently as possible
across all NHSBT communications.
It is one of the core elements of our visual identity and will unify
our communications, whilst giving us the flexibility to denote
different areas of our work through colour. Its consistent use
on all our communications will immediately identify them as
coming from NHSBT, driving brand recognition and portraying
us as a joined-up organisation.
01
02
03
04
06
07
08
Things to avoid
01.Never stretch the ribbon graphic;
02.Never rotate the ribbon to beyond 30 degrees;
03.Never use the ribbon vertically;
04.Never show the full graphic;
05.Never position copy too close to or over the ribbon;
06.Never flip the ribbon vertically, as the shadow should only
appear beneath the ribbon;
07.Never redraw the ribbon graphic or change the colour of
the original ribbon artworks;
08.Never use extreme abstract crops;
09.Never overlap multiple different service ribbons;
10.Never use multiple ribbons to create a band device for
headings or copy;
Don’t place
copy too close
to or over the
ribbon
05
Don’t create a band
with multiple ribbons
to hold copy
09
10
9
Online colour palettes
Primary colour palette
There’s a specific colour palette for each NHSBT service.
Any service can utilise the main corporate NHS Blue and NHS
Light Blue in addition to its own service colour. The corporate
palette should also be used on Organ Donation – Clinical, and
Tissue Services - Commercial sites.
Corporate
Primary
Tissue Donation
Accent
NHS Blue
#0072c6
NHS Light Blue
#0091c9
Organ Donation
Primary
Primary
NHS Green
#009e49
Accent
NHS Aqua Blue
#00adc6
NHS Light Blue
#0091c9
Accent colours
The NHSBT services all have a specific accent colours to
support their own primary colour. The accent colour is used to
support the dominant primary colour.
Blood Donation
Primary
NHS Dark
Green
#006b54
Cord Blood Bank
Primary
NHS Dark Pink
#a00054
The aqua blue of Organ Donation is ONLY to be used for
public facing materials/assets.
The only time these colours should be changed is for AA text
legibility. You’ll find more details of this on page 25.
Accent
Accent
Cord Blood
Accent
#ca005d
British Bone Marrow Registry
Accent
NHS Red
#d81e05
NHS Dark Red
#931638
Primary
NHS Purple
#56008c
Accent
BBMR Accent
#952d98
Platelet Donation
Primary
NHS Orange
#e28c05
Accent
Platelet Yellow
#f59d00
10
Secondary colour palette
The NHSBT secondary colour palette is used to differentiate
our other NHSBT services and can also be used sparingly
across digital designs to support creativity.
NHS Dark Green
#006b54
NHS Green
#009e49
NHS Light Green
#7bc142
NHS Aqua Green
#00a9a1
NHS Aqua Blue
#00adc6
NHS Light Blue
#0091c9
NHS Dark Blue
#00529b
NHS Purple
#56008c
NHS Dark Pink
#a00054
NHS Dark Red
#931638
NHS Red
#d81e05
NHS Orange
#e28c05
NHS Yellow
#fff100
11
Wireframes
& templates
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Wireframes
Before any templates are designed the layout and structure of
a page is defined using wireframes.
These blueprint layouts show where key messages will
feature, where navigation will be placed and how it will work
and include other page components such as accordions and
pods.
The next few pages show how wireframes translate into
finished designs.
13
Wireframes
Homepage examples
Blood - Desktop
Corporate - Desktop
Corporate - Mobile
14
Designs
Homepage examples
Blood - Desktop
Corporate - Desktop
Corporate - Mobile
15
Wireframes
Landing page examples
Blood - Desktop
Corporate - Desktop
Corporate - Mobile
16
Designs
Landing page examples
Blood - Desktop
Corporate - Desktop
Corporate - Mobile
17
Wireframes
Sub page examples
Blood - Desktop
Corporate - Desktop
Corporate - Mobile
18
Designs
Sub page examples
Blood - Desktop
Corporate - Desktop
Corporate - Mobile
19
Typography
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Desktop
typography
Example H1 element
Example H1 element
To ensure a consistent and legible
style across all sites the following type
styles have been developed and should
be strictly followed. Use the typeface
Arial and pay close attention to the
recommended size and line-height as
they will ensure easy reading.
Font: Arial, Bold Size: 36pt / 3.6em Tracking: 0 Line Height: 42pt
Colour: #333333 or primary service colour e.g. #0072c6
The brand colour associated with a
particular service can be applied to H1
titles and hyperlinks to ensure they stand
out. However the colour should not be
used on any other elements to avoid
causing confusion between static text and
links.
Example H2 element
Font: Arial, Bold
Size: 22pt / 2.2em
Tracking: -10
Line Height: 28pt
Colour: #333333
Example H3 element
Font: Arial, Bold
Size: 16pt / 1.6em Tracking: -10
Line Height: 24pt
Colour: #333333
Example body text
Font: Arial, Regular
Size: 15pt / 1.5em
Tracking: 0
Line Height: 22pt
Colour: #666666
Example smaller body text (to be used in pods etc)
Font: Arial, Regular
Size: 14pt / 1.4em
Tracking: 0
Line Height: 20pt
Colour: #666666
21
Desktop
typography
...continued.
Inline text link example
Font: Arial, Bold
Inline text link rollover example
Colour: Primary or secondary service colour e.g: #0072c6
Phone number example:
0113 820 8686
Font: Arial, Bold
Size: 14pt / 1.4em
Tracking: 0
Colour: #333333
Address example:
Westgate House,
Edgware Community Hospital
Burnt Oak, Broadway
Edgware,
Middlesex,
HA8 0AD
Font: Arial, Bold
Size: 15pt / 1.5em
Tracking: 0
Line Height: 22pt
Colour: #666666
22
Mobile
typography
For a comfortable reading experience on
mobile, the type should be scaled down
in size. Please follow these styles for
consistency.
Example H1 element
Example H1 element
Font: Arial, Bold Size: 22pt / 2.2em Tracking: 0 Line Height: 28pt
Colour: #333333 or primary service colour e.g. #0072c6
Example H2 element
Font: Arial, Bold
Size: 20pt / 2.0em
Tracking: -10
Line Height: 26pt
Colour: #333333
Tracking: -10
Line Height: 24pt
Colour: #333333
Tracking: 0
Line Height: 20pt
Colour: #666666
Example H3 element
Font: Arial, Bold
Size: 16pt / 1.6em
Example body text
Font: Arial, Regular
Size: 14pt / 1.4em
23
Mobile
typography
...continued.
Inline text link example
Font: Arial, Bold
Inline text link rollover example
Colour: Primary or secondary service colour e.g: #0072c6
Phone number example:
0113 820 8686
Font: Arial, Bold
Size: 14pt / 1.4em
Tracking: 0
Colour: #333333
Address example:
Westgate House,
Edgware Community Hospital
Burnt Oak, Broadway
Edgware,
Middlesex,
HA8 0AD
Font: Arial, Bold
Size: 15pt / 1.5em
Tracking: 0
Line Height: 22pt
Colour: #666666
24
Keeping text accessible
All NHSBT sites are tested for AA accessibility.
One of the elements that helps this is the legibility of text and
this can be affected by the contrast between the type and
its background. So where the background colour is too light
or dark it may sometimes need to be adjusted to meet AA
requirements.
There are a variety of colour contrast checkers available for
you to test your text. You can find one here: http://snook.ca/
technical/colour_contrast/colour.html
25
Navigational
elements & buttons
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Global navigation
This should sit at the top of the page. It’s here that the user can search, view accessibility information, increase the size of the
text throughout the site and sign in if needed. It’s been specifically designed to be unobtrusive, intuitive and not to be confused
with the primary navigation. So it should be used exactly as it is shown here.
Just duplicate it and change the colour to match the service brand that it relates to.
27
Primary navigation
The primary navigation is one of the most important parts of any site. Poor navigation causes confusion, slows users down
and, if they can’t find what they’re looking for quickly enough, they often just leave the site. Therefore the primary navigation
has been designed to be as simple and intuitive as possible.
The bar should always be in the relevant service brand colour with white text on a dark background or black text on a light
background.
28
Auxiliary navigation
Any links that do not fit inside the primary navigation or are deemed to impact the overall user journey can be placed into the
auxiliary navigation. This should be aligned right above the NHSBT logo. It can either be shown in the service brand colour or
in black. For smaller sites there’s no need for an auxiliary navigation.
29
Social links
Social links should be aligned right beneath the primary navigation and follow the style set by blood.co.uk i.e. they should be
displayed as square, and styled as a single flat colour.
30
Breadcrumbs
The breadcrumb trail should be aligned left beneath the primary navigation bar and be the same text size as the auxiliary
navigation. Links should be in the service brand colour.
31
Drop down
menu
Some sites use a drop down menu within
the primary navigation to help users get
to the page they want in as few clicks as
possible.
This drop down design should be used,
changing the colours to reflect the
Service, in this example the blue is used
for the Organ Donation site.
32
Secondary
navigation
Level 1
Level 2
Level 3
Level 4
A secondary navigation helps to speed up
finding content deeper within the site. A
secondary navigation replaces the need
for a drop down menu and exists at page
level on the left hand side of the template.
An arrow icon should be used to show
the user that there are inner pages in that
section. If there are no inner pages in a
section then there isn’t a need to include
an arrow icon.
Ensure all links are in the service brand
colour and that the active page that the
user is currently on, is coloured in black.
33
Mobile navigation
More and more people are using smart phones to browse the web so it’s very important to provide a tailored mobile
experience for them.
Desktop sites can be cumbersome and frustrating to navigate on mobile devices so all sites should now be built
responsively. The mobile navigation should be designed as shown here, ensuring the site logo is maintained and the
global navigation is completely removed. The auxiliary navigation should be incorporated into the mobile navigation whilst
social media links should be placed at the very bottom of the page.
Auxillary Links
Level 1 links (primay nav links)
Level 2 links (within Who we are)
Level 3 links (within News)
34
Button styles
Using consistent designs is very important to make users
familiar with the function of a particular button style. The user
should never be surprised by what happens or where they are
taken when they use a button.
Only the colours of the NHSBT service should be used to
colour the buttons. It’s also very important that every clickable
element on a site has a rollover.
Link and button attributes
Text links
Text links should be bold in the appropriate service colour and
have an arrow icon. If the text link is within a sentence then
there should be no icon. Text links should reflect the same size
as the body copy of the page content.
External links
•
Static
Rollover
Standard text link
External site link
New window link
Any link which directs the user to an external site or open
up a new page must show the appropriate icon. This
not only shows the user what will happen, it’s also an
important aspect for AA accessibility.
35
Button links
•
•
•
Links with a higher priority than a text link, such as a call
to action, should be presented as a button with rounded
corners and have a gradient fill with the primary service
brand colour.
Main call to actions, such as 'Register' should be
presented as a button with rounded corners and have a
gradient fill. The colour used for the core call to actions
should use a different colour from the colour palette to
make them stand out and enables the user to associate a
particular colour with a particular action e.g. Register.
Font size should be never smaller that paragragh text and
the padding around the words should be minimum of 10px
pixels.
Static
Rollover
Active
Standard CTA button
On page action button (user is not directed to a new page)
High priority CTA button (non-service colour used sparingly)
Document links
•
Document download links should have an icon of the
document type and show the document’s size in brackets.
Document download link
36
Pagination
If a section you are creating contains several pages, for
example a news index, then pagination is essential. It
means users can easily see how many pages there are
and which page they are currently on. It also lets them
move easily from page to page.
Desktop pagination
To support optimisation, ensure you use this desktop and
mobile design and simply apply the relevant service brand
colour.
Mobile pagination
37
Imagery &
iconography
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Imagery
It is important that all our NHSBT imagery should reflect
our three core values: caring, expert and quality.
It is important that our imagery is consistently strong and
feels part of a coherent set. Our photography is reportage
in style and is similar to that of broadsheet photojournalism
(e.g. The Guardian). It has a fly-on-the wall feel. It shows
a snapshot of a moment, where the camera feels invisible
and makes the audience feel part of the situation. It feels
honest and truthful, not staged or posed. The reportage
feel can also be used to document our processes too. Our
photography should tell a story – some images show the
overall context and others show interesting close-up details
to draw in our audience.
Our preference is full-bleed photography, however cut-out
imagery can be used sparingly too, e.g. for case studies.
When selecting images for use in NHSBT communications,
think about whether they:
• Demonstrate that we value professionalism, equality
and accessibility;
• Enhance the reputation of the NHSBT and reflect the
pride we have in our work;
• Adhere to our communications principles;
• Show people in real-life situations;
• Are colour balanced (colours should appear bright and
fresh, without any colour filters);
• Are straightforward, accessible and clear;
• Engage your key audience.
39
Imagery
Things to avoid
When choosing imagery for NHSBT communications from
either our image library or an online stock library try to
avoid:
•
•
•
•
•
•
•
•
•
•
Showing needles;
Photoshop filters;
Dark, poor exposure;
Blurry action shots;
Badly cropped compositions;
Objects out of context;
Objects in the distance/lost in background;
Messy backgrounds/cluttered environments;
Composition of people (will the image work in your
portrait/landscape format?);
Abstract and confusing images.
All imagery can be found on thirdlight.com Please visit the
site to request an account to access the image library.
40
Icons
Iconography is a versatile tool to use on any website. It
can bring content to life where other imagery would be
inappropriate or too blunt. It’s also a very good way to give
context to links and content, enabling users to very quickly
see the subject of a piece of content without needing to
read it.
To give NHSBT iconography a consistent feel, keep it as
simple as possible and only use one flat colour. Icons can
be enclosed within a circle to give them more definition and
standout.
Avoid being too playful or abstract with the icons. They
should be as clear and informative as possible.
Here are two useful sites where you can download or look
for icon inspiration:
http://www.flaticon.com
http://thenounproject.com
41
Carousel
& pods
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Carousels
Carousels have been used in the past to showcase key
content and to direct users to act or to read more about a
topic.
As the carousel or banner is usually the first thing a user
sees when they visit a site, you should ensure that your
most important content or initiative is on the first slide.
Many of the NHSBT sites have their own unique needs
and audience and thus have a design specifically for their
purpose. To encourage consistency across the different
sites the carousels outlined have been developed to
accommodate content for most situations.
43
Blood donation example (multiple):
Multiple slide carousel
Multiple slides can be held as per the Blood and Organ
Donation examples and the carousel should rotate
automatically.
You should have a maximum of four slides and clearly label
the navigation bar at the bottom of the carousel. Images
need to be carefully chosen and text should be clearly
readable. Ideally you should have one message and call
to action per slide and always indicate that there is more
content to be discovered on other carousel slides.
Organ donation example (multiple):
Carousel core call to actions
The main NHSBT services also include the main call to
action pods, overlaid on the main banner area to ensure
visibility and a consistent location throughout the site.
Single slide carousel
Hospitals & Science example (single):
You can replace the rotating carousel with a single slide
carousel or banner by removing the navigation bar.
44
Right hand side pods
In order to highlight important content, or to show content
which relates to the page’s theme, you can use right hand
side pods. These generally link the user to other pages
within the same site or can even be used to pre-populate
forms.
Here is a selection of pod designs with many varieties.
Each perform slightly different tasks, but they all share the
same consistencies which you should follow:
•
•
•
•
•
Always align text left;
Make a grey 1px border and a white or light grey
background;
Use the same typography and button styles as the rest
of the site;
Make them bold and visually interesting through
images and icons;
Keep messaging as succinct as possible.
45
Cross linking pods
Some templates allow for pods to be displayed within the
main content column. These can be used like right hand
side pods to advertise other pages of the site, or they can
be used on landing pages to show the inner pages within
that section.
The same rules apply with these as with right hand side
pods:
•
•
•
•
•
Always align text left;
Make a grey 1px border and a white or light grey
background;
Use the same typography and button styles as the rest
of the site;
Make them bold and visually interesting through
images and icons;
Keep messaging as succinct as possible.
46
Accordions
Accordions are a great way to show lots of copy in a concise way. For example they can show frequently asked questions and
expand to show the answers.
Please ensure that the titles on each line are in the relevant service colour and that, once expanded, the text is black. The
background colour should be light grey and white.
47
Mobile accordions
The accordion should work in the same way on a mobile
device. You will need to change its width in order to fit the
device. The text size should also be reduced in line with the
mobile typography CSS.
48
Maps
& tables
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Maps
Google maps is a great way to showcase locations on a webpage:
•
•
If you have multiple locations to show on one map e.g. Donor Centres, then please use the design in Fig 1;
If you need to highlight a single location within a piece of content then simply embed the Google map on the page as per
Fig 2.
Fig 1.
Fig 2.
50
Tables
For tabular data please use the following table layout and
styling.
Use colour and embolden text to signify the start of a new
group or category.
51
Forms, tooltips
& lightboxes
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Forms
Forms are extremely important as filling them in is often
the critical point at which site visitors take their next step to
becoming registered donors.
Forms should be short, ask as few questions as possible
and show clear validation to help users fill them in correctly.
Mandatory fields should also be indicated with a red star *.
Please use the following style and layout for all your
form designs to ensure users become familiar with the
consistent design.
53
Forms
Validation
Forms should validate as they are being completed.
Research has found that users are more likely to complete
a whole form if it validates as they go along, particularly if
they get positive affirmation after each element is filled in
successfully.
Therefore a green tick should display after each field is
filled in correctly.
For each one not filled in correctly there should be a red
cross with a label describing what action is needed.
54
Forms
Tooltips
To further increase the usability of forms we can introduce
tooltips. These enable us to tell the user why we need
certain information or offer assistance such as how to
create a strong password.
Please use this tooltip design and simply re-colour the
question mark icon to match the service brand colour.
55
Lightboxes
Occasionally the user will need to do something before
they can continue and a lightbox is a great way to get them
to perform a quick task such as clarifying an answer.
But they should only have brief text and be used sparingly
as too many can disrupt a user’s visit.
56
Techincal
guidelines
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Device considerations
Remember that on tablet and mobile devices hovering and
clicking both involve tapping so where hover states are used to
navigate this can confuse and delay access to information.
To cater for these devices, websites should be designed for a
resolution width from 1280px to 320px:
•
•
•
Mobile (Breakpoint for mobile is 767px);
Tablet (currently reflects the desktop site);
PC screen (1280px).
Responsive and adaptive design means creating scalable
solutions that work across all devices and there should be
no requirement to use a different Content Management
System for your mobile and desktop sites as this could
compromise content consistency.
You should also consider adapting your content hierarchy
based on the device while ensuring all navigation options
are available on all devices.
You should also avoid:
•
•
•
•
•
Frames;
Image maps;
Tables;
Pop-ups;
Dynamic effects that specifically require mouse or
keyboard for navigating.
Limit the use of forms as it can be difficult for mobile users to
input many characters.
58
Browser compatibility
Taking the individual site usage statistics into account, ensure
all NHSBT websites support the latest browser versions of:
•
•
•
•
Internet Explorer*;
Firefox;
Chrome;
Safari.
*currently supporting IE8 and above
It’s almost impossible to install all different browsers in one machine. But thanks
to some tools and web services out there, finding out how your website looks
like in other browsers is possible.
Use one of the following cross-browser testing tools:
- Browser Shots (free);
- BrowserStack (subscription);
- Virtual Box (best for extensive Internet Explorer testing).
59
Plug ins, Programming
Languages & Web
Technologies
Interactive elements should be built in HTML5 and jQuery due
to their widespread use and compatibility with smartphones
and tablets.
Avoid using Flash, but if you have to make there is a non-Flash
fall back too and, for accessibility, NHSBT websites should be
navigable without JavaScript.
Video content should be uploaded to YouTube and embedded
via a YouTube embed code.
You should also be aware that NHSBT are migrating all sites
across to the Umbraco CMS (currently only used on Hospitals
and Science).
Coding to
Support SEO
Use 301 redirects for any page that has been indexed by
Google before it is removed from the site. This will show
the page has permanently moved to a new location. You
should also create a custom and relevant 404 page so a
user is directed to a relevant area of the site.
An XML sitemap will show search engines the priority of
each page and the structure of the site’s navigation.
Use subject-related text hyperlinks when linking to pages.
The text should be contextual and relevant and should read
naturally.
Choose friendly URLS which are concise and relate to the
page content without being over descriptive and, finally,
consolidate CSS and JS files into external files to improve
search engine crawler efficiency when reading page level
code.
60
NHSBT Policies
NHSBT websites should be built to comply with the NHSBT
cookie policy, privacy policy and any other relevant online
policies.
Any personal data stored must comply with the NHSBT
privacy policy.
61
UX
considerations
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Personas and User
Requirements
It’s important to have a clear picture of your target user by
understanding their online behaviour, for example what other
sites they visit, dual screening, and where and when they go
online.
Example user persona:
You also need to understand what they want to achieve from a
visit to the site and to consider the order in which they will scan
each page. Visit http://goo.gl/BqckRq for a very good guide to
visual hierarchy.
Finally, always provide a clear call to action.
63
Business Goals
Decide what the website needs to achieve and what we
want our users to do.
For example is the primary function to let users register or
book appointments or is it a website to give information?
Then combine the business goals and user requirements
to create a set of user journeys for each task that is likely
to be performed on the site. Consider which journeys
are more likely to be performed on particular devices
e.g. people who visit via a mobile may just need to find a
phone number or to discover how to get to a donor centre
while visitors to a desktop type might be looking for richer
information.
Best practice and
usability
Most users don’t read websites, they just scan them
looking for the information they need. They are also
impatient and will leave a site if they don’t find it quickly.
So make sure that:
•
•
•
•
Content is clear, consistent, informative and usercentric;
You do the most with the least amount of cues and
visual elements;
Navigation is intuitive;
You always strive for simplicity and ease of use.
Remember, the simplest solution is usually the best.
64
Form usability and
validation
There are some important principles to remember when
designing effective forms:
•
•
•
•
•
•
•
•
•
The first box in each section should be aligned to the left;
The user should always be able to tab to the next field;
Give input assistance to help users avoid making mistakes;
If they do make a mistake an inline error message should
appear in a contrasting colour with relevant instructions;
The field (or fields) with the mistake should also be
highlighted in a contrasting colour;
Don’t ask for any information that isn’t totally necessary –
and if it’s not obvious why you need a particular piece of
information give an explanation;
Break up large forms into steps and let the user know how
far along they are to completion;
There must always be a prominent Submit button;
After submitting it should be followed up by a confirmation
page.
Testing
It’s vital that you test at every stage – right from when you
develop the wire-frames. It should be carried out on all the
relevant browsers and devices that the user stats indicate
are relevant.
It’s also a good idea to carry out testing or exit surveys on
live sites to find out about the user’s experience of using
the site.
NHSBT now operate an agile methodology and need
alphas to be tested continuously throughout a project’s
lifecycle.
An alpha doesn’t need to be a complete, end-to-end
transaction to enable testing. It allows NHSBT to gain user
insight some understanding of the service.
65
Using analytics for
insight
Use Google Analytics to learn how visitors use the site on
different devices and look at site search data – the word or
phrase users type into a search box is often what can’t be
easily found on the site.
From your findings you can revise the navigation and visual
hierarchy and provide appropriate content.
For inclusion, please contact digital ([email protected]).
66
Accessibility
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Accessibility
Making our websites accessible means users with disabilities
or poor eyesight can still navigate, interact with them.
NHSBT sites must comply with W3C's Web Content
Accessibility Guidelines 1.0, Level AA, and should where
possible adhere to as many Level AAA requirements as
possible.
The following pages explain key areas to consider but full
details of the website accessibility guidelines can be found on
theW3C website. http://www.w3schools.com
The NHSBT Accessibility policy can be found here:
http://www.nhsbt.nhs.uk/accessibility
Other useful reference sites include:
•
•
Unicorn – W3C's Unified Validator http://validator.w3.org/
unicorn;
MarkUp Validator http://validator.w3.org;
•
CSS Validator http://jigsaw.w3.org/css-validator.
68
Text Size
Colour
Although websites are designed to a set text size, the user
should have the option of adjusting it. Preferably there will be
an on-page tool to do this. If this isn’t possible then they should
be able to do it through their browser settings.
Think carefully about the use of colour.
This means page designs and CSS layouts must be created
and programmed so they don’t break the look of the website if
the user does increase their text size.
Important text should never just be crated as image text as this
will not re-size.
Text colours should contrast well to their background to
ensure good legibility. You should also consider colour
blind users. For example the instruction ‘Please click the
red button’ will not be very helpful for people with red/green
colour blindness.
There are several colour contrast checkers available
online.
For example you will find one at http://snook.ca/technical/
colour_contrast/colour.html
69
Accessibility: Navigation
and Text as Graphics
Navigation should be text rather than image-based because it
lets users read the text and allows search engines to find key
terms relating to the website’s subject.
Images should only be used as links or for messaging if
relevant alternative text is provided. An image link should have
an alternative text link nearby.
Hyperlinks should always indicate what clicking on them will
achieve. For example it’s better to say “more about platelets”
rather than “click here”. This also helps search engines
register that the linked page is about platelets.
Sound, Animation,
Video and Other
Technologies
If sound is used in a video then provide a transcript for
people who are hard of hearing. Similarly, if animation or
diagrams are used to explain something then provide the
same information in a text format that the partially sighted
and people using screen readers can see.
You should also make sure the site is fully navigable
without JavaScript.
70
Social media
guidance
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Opengraph and Twitter
Card metadata
Type
Content
og:title
Page title. Maximum 70 characters
og:description
A description that concisely summarises
the content of the page. Do not
re-use the title text as the description or
use this field to describe the general
services provided by NHSBT or its
component services. Maximum 300
characters.
og:type
This should be set to “article”
og:site_name
Name of the whole website – i.e. “NHSBT –
Blood Donation” or “NHS Organ
Donation”. This should be consistent
across the whole site.
og:url
The full canonical URL of your page.
og:image
See below
og:image:width
This should be set to “1200”
og:image:height
This should be set to “630”
fb:app_id
This should be set up by a Facebook
developer and be consistent
across the whole site.
When pages from NHSBT Websites are shared on Facebook
or Twitter we can define a lot about how they will show up in
people’s Social Media feeds.
All pages should have this information as it ensures the links
are optimised to appear in the way you want them to be.
Facebook Opengraph
metadata
This information should be included in the metadata to control
the appearance of the link on Facebook.
72
Twitter Card Metadata
This information should be included in the metadata to control
the appearance of the link on Twitter.
Type
Content
twitter:card
summary_large_image
twitter:site
Twitter account username, i.e. @nhsbt,
@GiveBloodNHS etc.
twitter:creator
Twitter account username, i.e. @nhsbt,
@GiveBloodNHS etc.
twitter:title
Page title. Maximum 70 characters.
twitter:description
A description that concisely summarises
the content of the page. Do not re-use
the title text as the description, or use
this field to describe the general
services provided by NHSBT or its
component services. Maximum 200
characters.
twitter:image
See next page.
73
Opengraph / Twitter
card images
Do:
This should be a unique image that represents the content.
Don’t use a generic image like the NHSBT or campaign
graphic, the author’s photo or any other image that is used on
multiple pages.
Logos, titles or writing should be avoided, as the image
will show in different sizes and with different cut off points
depending on the platform and the device being used. You can
brand the image using devices such as the ribbon.
•
•
Facebook Opengraph Size: 1200 x 630 pixels;
Twitter Card: Size 1024x512. Image must be less than
1MB in size.
Don't:
74
Social media
elements
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Social Media Sharing /
Send icons
This functionality is currently provided on NHSBT websites by
AddThis, so design is dictated by that platform.
Facebook, Twitter and Google+ share buttons:
In future the best practice will be to use the functionality native
to each platform. Information on this can be found on the
following links:
•
•
•
Facebook: https://developers.facebook.com/docs/sharing/
reference/share-dialog;
Twitter: https://dev.twitter.com/web/intents;
Google+: https://developers.google.com/+/web/share.
76
Using Social Media
logos on your Page
Please follow each network’s own guidelines. You can find
these, and download any relevant assets, from the following
links:
•
•
•
•
•
•
•
Do:
Don't:
Twitter: https://about.twitter.com/press/brand-assets;
Facebook: https://www.facebookbrand.com;
Google+: https://developers.google.com/+/brandingguidelines;
YouTube: https://www.youtube.com/yt/brand/en-GB/usinglogo.html;
Instagram: https://help.instagram.com/304689166306603
Pinterest: https://business.pinterest.com/en/brandguidelines;
LinkedIn: http://developer.linkedin.com/documents/
branding-guidelines.
As long as these guidelines are followed, you can customise
the buttons for consistency.
77
Plug ins – Like buttons,
Page boxes, Twitter
feeds
Using a social plug-in can create dynamic content by
displaying the latest information from a Twitter feed or hashtag,
show what’s happening on the Facebook page or let people
“like” the webpage.
Twitter Feeds
Feeds can be set up to pull through:
•
•
•
•
•
A timeline (i.e. @GiveBloodNHS or @ nhsorgandonor);
Public results on a search (such as a hashtag) which can
be filtered automatically by Twitter for inappropriate content;
A ‘favourites’ list;
People on a custom list;
A curated collection of individual tweets.
This has the same effect as liking anything directly on
Facebook – it shares the action with the user’s followers.
Creating a Page Box will allow people to like the Service’s
Facebook page (e.g. Blood on Facebook) directly from the
web site, as well as showing them which Facebook friends
have also liked the site.
These feeds all require developer accounts to set them up.
You can open these here:
•
•
•
Facebook Like Box:
Facebook Like Button:
Twitter feed: https://dev.twitter.com/web/embeddedtimelines;
Like Box for Pages: https://developers.facebook.com/docs/
plugins/like-box-for-pages;
Like Button: https://developers.facebook.com/docs/plugins/
like-button.
78
Talking on Social Media
Talking to people on Social Media is essential to NHSBT.
It helps to recruit new Blood and Platelet donors, increase
session bookings and get more Organ Donor Registrants. It’s
also a valuable customer service channel to support and grow
the community of loyal supporters.
The audience of Social
Media
Tip 1
Tests show that posts saying “Book”
rather than “Register” will provide
better results.
Tip 2
Posts with photos on them, especially
photos of people, perform better than
plain text posts.
The audience are usually already registered, active donors.
They don't like ongoing persistent appeals for blood/calls to
action. Sharing a variety of content such as news articles and
case studies help fans feel they are part of something really
important.
Celebrity-led content tends to perform more strongly on Organ
Donation pages than Give Blood pages.
Overall, they don't need to be encouraged over what they're
doing they're committed donors - so celebrating what they're
doing will create wider engagement and reach to their friends.
79
Tone of Voice
We always try to make our posts informative, clever,
compassionate and trustworthy.
NHS Blood Donation
Spelling and grammar are crucial. Double check through
them, or ask someone to check before posting.
Even getting you/your/you're or their/there wrong will damage
the credibility of your post.
5 Minutes ago
It’s Friday and we need O neg donors. Donors with this
powerful blood type are called the universal donors. O
negative blood is more in demand and more often in
short supply. Book in today and help save lives this
weekend 0300 123 2323
NHS Blood Donation
5 Minutes ago
We need more donors. Register to-day
80
Community
Management
Talking to people on the Facebook and Twitter pages is the
best way to instantly gather an understanding of what’s being
said about the services NHSBT offer.
A full social media policy and strategy is in place to grow and
manage the accounts – and all access to the platforms is
managed and regulated by the digital team. To get access
to a platform, please contact the Social Media Manager;
([email protected]).
81
Profile Pictures
This is based on current social platform layouts and is subject
to change.
Facebook
Our page's profile picture:
•
•
•
•
•
•
•
Design size at 400x400 pixels;
Displays at 160x160 pixels on your page on computers;
140x140 pixels on smartphones and 50x50 pixels on most
feature phones;
Is located 16 pixels from the left and 176 pixels from the
top of your cover photo on computers;
Is located 24 pixels from the left, 24 pixels from the
bottom and 196 pixels from the top of your cover photo on
smartphones;
Should be just the service’s symbol or stacked graphic on
a white or transparent background;
When you post an update, comment or like someone
else’s page, the profile picture will appear at 90 x 90 px;
Rectangular images will be cropped from the centre of the
image.
Twitter
Our account’s profile picture:
•
•
•
Design size at 400x400 pixels;
Displays at 200x200 on your page on computers, and
varying smaller sizes in different apps/placements;
Displays at 24x24 on timelines on computers.
Do:
Don't:
Cover Photos
Generally
•
•
•
Be aware of crop points;
Use minimal text – inspirational pictures work best;
Can be branded using the ribbon graphic – and by
breaking the ribbon across the picture, it gives it depth.
82
Facebook
851px
Our page cover photo:
176px
315px
Cover Photo Size 851px x 315px
•
•
•
•
•
Displays at 851 pixels wide by 315 pixels tall on your page
on computers and 640 pixels wide by 360 pixels tall on
smartphones;
Doesn't display on feature phones (i.e. non-smartphones);
Loads fastest as an surge JPG file that's 851 pixels wide,
315 pixels tall and less than 100 kilobytes;
Images smaller than the dimensions mentioned above will
be stretched to the larger size;
For profile pictures and cover photos with a graphic or text,
you may get a higher quality result by using a PNG file.
160x160px
(Design at
400x400px)
64px
46px
1500px
297px
420px
Cover Photo Size 1500px x 500px
Twitter
•
•
•
Our page cover photo is 1500x500;
The top and bottom 70 pixels will be covered by menu bars;
This will resize responsively – the visible width will depend
on the width of the user’s screen.
200x200px
(Design at
400x400px)
123px
Google+
•
•
•
Our page cover photo is 2120x1192;
The profile picture is 250x250 and will be cropped and
displayed automatically into a circle;
This will resize responsively – the visible width will depend
on the width of the user’s screen.
60px
1360px
Upload as
250 x 250px
Cover Photo Size 2120 x 1192px
Upload at least 920 x 520px
520px
440px
83
Facebook App tabs
Theme customisation
App tabs are available on Facebook.
No other design customisation is available on Facebook or
Google+.
The images for these must be designed at 111px by 74px. If
you want to “tile” all three app tabs together to stitch a single
image together, just remember there is an 8 pixel gap between
each one.
Twitter does allow colour palettes to be used. Use the relevant
colour pallet for the service.
The apps themselves must work in an iframe, at 810px wide,
and follow overall NHSBT Digital Guidelines.
84
Facebook post assets
•
Posts on Facebook that are accompanied by an image
perform 40% better than those which are just plain text. By
following these guidelines you’ll be able to create assets that
will both get your message across and be engaging.
•
•
•
•
•
•
•
They should be 1200x1200px and will be displayed as
504x504px on desktop timelines and smaller on mobiles.
A full size version will be available if people click through.
Use a higher resolution so they appear clearly on devices
with high density displays, such as Apple’s retina displays.
Images for the page don’t need to be formally branded.
The most important aim is to create something shareable
that the community can feel they own and which illustrates
the point you need to make.
The image itself should, where possible, include the
business unit and NHSBT logos and a minimal amount of
text. Text can be added to the bottom 25% of the image
underneath the ribbon, or another similar device.
The standard rules around using the identity marks should
be followed.
If a campaign graphic is being used, this should appear in
conjunction with the identity marks of the service brand.
As a guide, photos of real situations/people should be
used for appeal posts, however illustrations can be used
for campaign and information posts. The assets should
have as little white space as possible.
•
Photos from events or similar situations can be used as-is
from cameras/smartphones and be posted directly to the
page to show an on-the-ground presence.
Consider the text that will go along with these assets – you
don’t need to put the same text in twice, but you could pick
out a highlighted quote or question to put into the asset.
Assets gathered from the community should be re-posted
without amending.
Example Facebook posts:
85
Twitter Hashtags
People use the hashtag symbol # before a relevant keyword or
phrase (no spaces) in their Tweet to categorize those Tweets
and help them show more easily in Twitter Search. These are
best used for events or campaigns.
Clicking on a hashtagged word in any message shows you all
other Tweets marked with that keyword.
There are some vital considerations when creating hashtags:
•
•
•
•
•
They mustn’t be longer than 15 characters;
They should always be unique to the conversation;
They must not be too generic – they might get hijacked;
It’s a good idea to tailor the hashtag by including the
current year or location e.g. #NHSBloodWeek14;
You must check whether a hashtag already exists using
the Twitter search tool.
86
Twitter picture assets
These should be:
•
•
•
•
•
•
A GIF, JPG or PNG;
At a ratio of 2:1;
At least 506x253, ideally 1024x512px;
A file size of no more than 5MB for static images or 3MB
for animated GIFs;
Corners will be rounded by Twitter upon upload;
Avoid adding branding – ideally the picture will carry the
branding through t-shirts/stands etc.
Example Twitter posts:
87
Paid for activity
If a timeline asset is to be used as a promoted post, the asset
should have no more than 20% text coverage. A “link” asset
should have the following dimensions: 1200x630.
Do:
Don't:
88
Writing
content
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Writing content for
SEO: On page elements
Page Title
The page title should be in the following format: ‘description of
page’ | Brand. The title should be no more than 70 characters
in length.
Default titles should generally be of the format ‘[Page Name] |
[Site Name]’.
Meta Description
Descriptions should be no more than 155 characters long
and should describe the purpose of the page as it is the main
tool to encourage clicks on your search engine ranking page
listing.
Page <h1>
The <h1> is the main heading of the page and should
summarise this within the content. This helps users to
understand a page’s purpose.
Alt Attributes
All images should include an alt attribute. This text appears
when an image is not accessible and is used by search
engines to understand the context of imagery. The alt attribute
should describe the visual and semantic content of the image.
This can either be inserted by the development team or via the
CMS if available.
Internal Linking
If any of your content relates to other areas of your website
then it should be linked. This helps the user discover more
content across your site and also clearly marks the relationship
between different content pages as a signal to search engines.
Links should be named appropriately in context to what they
are linking to e.g. “who can give blood” is a better link than
just “click here” .
Review and retirement
Ensure that content is reviewed on a regular basis, especially
for sites that are constantly updated. Links may become
broken and content outdated. Any content that needs
retiring should be redirected to the next appropriate page to
ensure that value is consolidated and the user experience is
consistent.
90
Keywords
2. Is it shareable?
Keywords should be used to inform the content but not
define it. Keywords or phrases relating to the topic of each
page should be included to improve the relevancy of search
engine results in line with your service and organisation. The
content should always be written for people and not for search
engines.
•
•
•
•
•
Is there something to provoke an emotional response?
Is there a reason to share it??
Is there a call to action to share it?
Are there easy ways to share it?
Has it been personalised with a hashtag?
3. Will it generate a response? Make it clear, concise and engaging.
Writing content for
the user
There are four key questions to ask yourself when creating
content for the NHSBT sites.
1. Is it easy for the user and/or search engines to find?
•
•
•
•
•
•
•
•
•
•
Is the call to action prominent?
Is there an opportunity to make a comment?
Does it invite the reader to share?
Are there links to other related comments?
Is there a summary of what to do?
4. Is it readable? •
•
•
•
Is the copy succinct and easy to read?
Are there sub-heads and short sections?
Are there any bullet points or numbered lists?
Is it in the right tone of voice?
Does it have an H1 tag?
Are there at least two H2 tags?
Does it have metadata including title, descriptors and
keywords?
Are there links to other related content?
Do all the images have alt tags?
91
Search
guidance
02 Design elements
42 Carousel & pods
67 Accessibility
12 Wireframes & templates
49 Maps & tables
71 Social media guidance
20 Typography
52 Forms, tooltips & lightboxes
75 Social media elements
26 Navigational elements & buttons
57 Technical guidelines
89 Writing content
38 Imagery & iconography
62 UX considerations
92 Search guidance
Analytics
Standardisation
Google Tag Manager
Google Tag Manager is used across the core NHSBT websites
to manage tracking tags, predominantly the Universal Analytics
tracking code. Google Tag Manager has been implemented on
the following websites:
•
•
•
•
www.nhsbt.nhs.uk;
www.blood.co.uk;
www.organdonation.nhs.uk;
hospital.blood.co.uk.
•
•
www.blood.co.uk (incl. H&S website);
www.organdonation.nhs.uk.
The UA syntax is editable through Google Tag Manager and
there should not be any analytics code hardcoded on any of
the core websites.
Goals & Events
As part of the analytics set-up all core websites have goals and
events for key interactions including registration completions,
session searches, appointment bookings and asset
engagement e.g. pdf downloads.
Each website has its own Tag Manager container within the
NHSBT Tag Manager account except for the H&S website
which uses the same container as the Blood website as it is a
subdomain.
Universal Analytics
Universal Analytics has been implemented as standard via
Google Tag Manager on the core NHSBT websites including:
•
www.nhsbt.nhs.uk;
93
Visual Website Optimiser
For conversion rate optimisation Visual Website Optimiser
(VWO) is used as an A/B and multi-variate testing tool. This is
implemented on every page of the Blood and Organ Donation
websites and allows for the testing of on page elements
without the requirement to hard code changes or build
separate pages.
The VWO code is present on all pages of each site and should
be implemented just before the </head> tag.
94
CRO example
Conversion Rate Optimisation allows testing of on page
elements in a number of different variants from a straight A/B
test to one with three or more variations.
These changes are carried out within Visual Website Optimiser
and are implemented as an overlay to the current site where
traffic is managed between the variations.
We have shown a previous test carried out on www.blood.
co.uk as an example below. This was incorporated in the
‘Who can give blood?’ page with an introduction of the session
search CTA in the main body content.
This test drove an improvement in the session search
conversion rate of 277.2% as a result of an update to the
copy, some layout changes and the introduction of the session
search CTA within the body copy.
95
Get in touch
If you have any questions about anything that appears within these guidelines,
or how to use them, please email
[email protected]