improving digital health literacy in europe · information on the moocs and how to access them as...

This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 727474

IC-Health

Improving digital health literacy in Europe

D5.3 – Project Visual Identity and Website

Grant Agreement No: 727474

Project Acronym: IC-Health

Project Title: Improving digital health literacy in Europe

Funding scheme: Horizon 2020: Health, demographic change and well-being

Start date of the project: 01/11/2016

Contractual delivery date: 31/12/2016

Actual delivery date: 10/02/2017

Contributing WP: 5

Type: Report

Dissemination level: Public

Document description: The deliverable 5.3. aims to outline key information about processes and structures related to the development and maintenance of the project website and the definition of the project visual identity.


D5.3 Project Visual Identity and Website 2

Editors

Organisation Name

EHMA Michele Calabro’

Usman Khan

Maurice Hameleers

Contributors

All other partners involved:

Beatrice Avagnina, Michelle Perello (CE)



Table of content

Table of content ....................................................................................................................... 3

1. Introduction ....................................................................................................................... 4

1.1. The IC-Health project ............................................................................................... 4

1.2. Project website and visual identity ......................................................................... 4

2. Overall Website Description .......................................................................................... 6

2.1. Platform used ............................................................................................................ 6

2.1. Website early design and responsiveness ........................................................... 7

2.2. Accessibility standards ............................................................................................ 8

2.3. Website Structure ..................................................................................................... 8

3. Visual Identity ................................................................................................................. 12

3.1. Visual Identity – Step 1 .......................................................................................... 12

3.2. Visual Identity – Step 2 .......................................................................................... 14

Appendix A: Logo Book - Samples ..................................................................................... 18



1. Introduction

1.1. The IC-Health project

Citizens' digital health literacy is an essential element for successful eHealth

deployment. However, citizens often do not have the necessary skills to find,

understand and appraise online health information and apply their knowledge to make

health decisions. Digitally health literate citizens are empowered to play a more active

role in their health self-management, resulting in improved prevention, adherence to

a healthier lifestyle and better health outcomes.

IC-Health supports the improvement of digital health literacy in Europe. In particular,

the project will design 35 open access online courses (MOOCs) in seven different

national languages for different population cohorts including children, adolescents,

pregnant and lactating women, elderly and people affected or susceptible to type 1

and type 2 diabetes. The project started in November 2016 and runs for 24 months.

The research for IC-Health and the co-creation of MOOCs to enhance digital health

literacy (DHL) will take place in the sites of the thirteen consortium partners in six

European countries

The identified population cohorts, along with health professionals, academics and

other practitioners, will be organised in Communities of Practice (CoPs) and involved

directly in the co-creation of the MOOCs content and structure. Once the courses are

designed, they will be tested by the members of the CoPs and by other users. MOOCs

use and impact will be monitored and assessed in order to ensure their uptake and

sustainability beyond the duration of the project.

1.2. Project website and visual identity

Within the framework of the dissemination and communication activities for IC-Health,

EHMA, in collaboration with the consortium partners and thanks to the external support

of ECH Design, worked to develop the website and the visual identity of the project.

As set out in the Grant Agreement, the project website forms an important

communication channel for the IC-Health project and will, for example, provide

information on the MOOCs and how to access them as well as the standard project

information covering objectives, funding, partners, work packages, and results of the

project. The website will also provide one of the communication channels used by

WP5 for dissemination.

EHMA elicited requirements and testing and will provide content for the website. This

content will be incrementally updated with relevant information when available. The

website will be linked to the community platform developed under WP2 and used for

task 5.3.



Within this deliverable, details of the website structure, key technical characteristics,

visual design process and workings will be outlined. The document will be then

integrated throughout the project in order to include the wide range of visual-design

based materials (as already set out within the dissemination plan) and to further

illustrate the evolving process of the website.



2. Overall Website Description

The website of the IC-Health project, designed and maintained by Ech Design Ltd,

working with EHMA, is available at the following url: https://ichealth.eu. It was officially

made available online during February 2017 and will be maintained for at least two

years through the duration of the project. The main objectives of the IC-Health website

are:

Raises awareness of the project, project structures, objectives and work

packages as well as the project outputs, particularly the MOOCs.

Provides routes to access key deliverables such as the MOOCs

Provides a platform for keeping a range of stakeholders up to date with the

progress of the project

Encourages participation in stakeholder engagement activities such as focus

groups and the online Community of Interest as well as direct feedback

Establishes a search engine profile for the project and for the MOOCs to help

drive visitor levels

Provides a consistent voice and shared space for the various partner

organisations involved in the project.

2.1. Platform used

In The IC-Health website has been developed using the Wordpress content

management system (currently version 4.7.2). Wordpress was selected because of:

Design Flexibility – It places no restrictions on applying the chosen design

and layout choices.

Development Flexibility – Allows set up of easy to use content management

tailored to the content and has access to a huge and healthy plugin

community for new features.

Cost Effectiveness – The core software and the majority of plugins are free,

accelerating development of functionality.

Being well supported – The Wordpress community is extremely large and

active (Wordpress currently powers 1 in 6 websites on the internet), making

the website sustainable through and beyond the initial duration of the project.

Ease of use - Wordpress is easy to learn and some project team members

have experience of using it before.



The website also includes several Wordpress plugins to add additional functionality

around easy content management, search engine optimisation and contact forms.

The website architecture has 2 main parts: 1) The files that define the layout, colours

and images of the site. 2) The database that stores the text content and structure of

pages. It runs from a Linux hosting environment capable of running php files and

providing access to a MySQL database.

The website is hosted with the Managed Wordpress hosting service WP Engine. The

benefits of this service are that it is focused on the Wordpress system to ensure the

fastest page loads, security and reliability of keeping the site online at all times. The

entire site (files and database) are backed up daily, to allow restoring to a previous

backup in the event of any unforeseen problems.

We are using the domain name ichealth.eu. This was selected based on being

succinct. A version with the hyphen in IC-health was not available. We are making use

of an SSL certificate to provide an https address for the site. This ensures information

sent to and from the site (e.g. newsletter signup details) is transmitted securely and

provides a green trust signal in a user’s web browser to give confidence.

We monitor the website’s usage through inclusion of Google Analytics code on each

page.This enables viewing statistics on numbers of visitors, pages visited, duration of

visit, how they arrived at the site and a wealth of other information.

Other key metrics we will monitor the site against are sign ups to the newsletter, clicks

through to the online survey and when they are launched click throughs to MOOCs.

2.1. Website early design and responsiveness

The logo and branding for IC-Health are under finalization phase. While these are

being agreed, we are making use of an interim logo for the project which makes use

of a clean sans-serif font and blue colours:

The design for the website is making use of these colours and a minimalist design

aesthetic to concentrate on structure and ease of browsing. Once the branding is

agreed, the chosen design will be rolled out to the website.



The website makes use of a Responsive Layout to make best use of and adapt to

different screen sizes. For example a 3 column layout will collapse to 1 column at

mobile sizes. The main menu adapts to being a dropdown menu at mobile sizes.

2.2. Accessibility standards

To ensure the site is accessible and inclusive to as wide a group of stakeholders as

possible the design of the site as a minimum should meet Web Content Accessibility

Guidelines (WCAG) 2.0 - https://www.w3.org/TR/WCAG20/

These guidelines include, but are not exclusive to ensuring contrast between text and

background colours, providing text descriptions for all images, being suitable for

browsing with a keyboard or alternative to mouse and providing a recognisable and

easy to use navigation.

The current website meets a large number of these standards, but is still under its final

development and finalization phase. It will completely meet the standards within the

coming weeks and will then be finally reviewed by the project consortium.

2.3. Website Structure

The initial structure and map of the website, as agreed with the Consortium partners,

covers the key points of the IC-Health project, and features six specific sections: home,

The Project, Co-Creation, Results, News & Updates, Contact & Get Involved.

- Homepage: the homepage represents the landing page of the ichealth.eu

website and aims at providing key information about the project, its latest

developments and key contact information. More specifically, the homepage

will have a carousel banner that will feature up to three visual summaries of key

aspects of the project (e.g. methodology, survey launch, MOOCs launch).

The right column of the homepage will feature, contact information and a social

media feed based on the IC-Health social media accounts and on the

#ICHealthEU hashtag, which will allow to cluster all the social media posts

related to the project.

https://www.w3.org/TR/WCAG20/



- The Project: the project section will feature sub-sections with key information

on the project methodology, objectives, partners and work packages, as

outlined within the Grant Agreement. More specifically, the partners sub-section

will be dedicated to providing the audience with brief summary of the partners’

missions and expertise, also including the members of staff involved in IC-

Health.

- Co-Creation: the Co-Creation section features specific information on the co-

creation methodology which is at the hearth of IC-Health. The section includes

details on the Communities of Practices and on the online platform that will

serve as support for the co-creation implementation phase.



- Results: the results section will serve as a ‘repository’ for all the deliverables

and the key materials produced by the IC-Health consortium (e.g. Leaflets,

infosheet, etc.)

- News and Updates: the News and Updates section will feature press releases,

news, articles and updates on the project meetings, workshops and

conferences.

-

- Contact and Get Involved: the contact and get involved section will allow

interested stakeholders and the general public to submit requests for

information and get in contact with the project consortium. It will be tailored

throughout the project based on the consortium needs.



- Other Info: the website will also feature a footer including information about the

project funding and the European Commission emblem as per Article 29.4 of

the Grant Agreement.

As mentioned analyzing the different sections, the website will be amended, expanded

and ameliorated throughout the project to better mirror the needs of the consortium.

For example, MOOCs dedicated section will be published as soon as the MOOCs will

be finalized and made available online.



3. Visual Identity

EHMA worked to identify a range of possible logos and related visual identity that could

best convey the key ideas behind the IC-Health project methodology, principles and

objectives.

Included below, a list of the preliminary logo and template designs (Round 1) and a

second set based on initial feedbacks from the partners. As mentioned above, it is

important to stress that the logo included in the website will be then replaced with the

final version of the IC-health official logo agreed by the Consortium partners.

Once the final logo and visual identity will be agreed, the visual design section of this

document will be updated with key information about colours codes, fonts and how to

apply them in order to produce templates and documents that correctly reproduce the

project’s visual identity.

3.1. Visual Identity – Step 1



3.2. Visual Identity – Step 2



Appendix A: Logo Book - Samples

IC Health - Logo Options v210/02/2017

Themes explored in this exercise:

communicationoverlapping of resources, coming togetherhealthtechnologydigital pixelsbold fontswhite (thinking) spacepart of one wholecollective silos of information

Where possible, we’ve tried to avoid ‘standard’ or dated icons / motifs and instead loosely represent the digital health theme through a range of colurs and abstract shapes.

Bold fonts have mainly been used. Where we’ve used a more subtle font, we’ve allowed more white space to give it equal weight and mroe space to impact.

improving digital health literacy in europe · information on the moocs and how to access them as...

Documents