Does a Healthy lifestyle and living near water go hand-in-hand?

BlueHealth is a research project funded by the European Union focused on understanding how urban water-based environments can affect health and wellbeing. fffunction were invited by The European Centre for Environment and Human Health to design and build a website to explain the project and share news and research findings.

View the project

Designing for a pan-European audience

Because BlueHealth is a pan-European project, the audience is too: partners come from countries including the UK, the Netherlands, Estonia, and Italy. A key aim for our work on the website was to ensure that our designs worked for audiences across the partner region and beyond.

The best bang for our Buck (Euro) from research

We needed to find ways to learn about all sorts of factors across the context of multiple countries. Things like: research, and researchers; waterways and how they’re used in urban areas; policy, culture, language and imagery. We opted to conduct remote stakeholder interviews. These semi-structured interviews allowed us to gather a wealth of useful research insights.

Structure and sketches

We took all the insights from research and used them to inform our work on the Information Architecture of the site. We specified a navigation hierarchy, labels, and categories to give structure to the content in the site and to help users achieve their goals and tasks. We then sketched out the key templates in the site, establishing layouts and content hierarchy, again all led by the insights from our research and our users’ goals and tasks.

Working with the partners, not just for them

ECEHH the UK partner for BlueHealth (and our client) were very keen that we continued to involve the other research partners in our design work. We had the opportunity to attend all partners meeting being held in Cornwall and we went along to present our work on research, information architecture, and visual design. We took lots of time to give all the partners the opportunity to give their feedback and discuss our ideas.

Creative coding for imagery

Images of water spaces in all their forms are an important part of communicating the BlueHealth project through our designs. But we had a problem: the project doesn't have a stock of high resolution images of these spaces, and no budget to get them. So taking some inspiration from This is My Jam (sadly gone, but not forgotten), we implemented a custom filter to automatically generate abstract versions of images. The outputs work a treat in our template designs.

BlueHealth Generative Art Before BlueHealth Generative Art Before
BlueHealth Generative Art After
BlueHealth Generative Art After

Designed in a pattern library, built in Wordpress

As with all our projects now, our design work was in-browser and delivered in a pattern library. The pattern library brings together design guidelines and markup and CSS to deliver modules and page templates. 

The site was built in Wordpress with a custom theme which maintains a clean separation of content, and code for markup, styling, and functionality.

View the pattern library

Loaded and launched

Less than a month after we shared our initial work with the research partners, the build was completed, ECEHH had loaded the initial content for the site, and it was launched. The site now profiles the work of more than twenty research projects and seventy researchers across the EU and traffic is growing steadily.

We’ll work with ECEHH and the BlueHealth partners to maintain and evolve the site as the project continues.

Take a look

View the project