HBSC – Data Browser

The Brief

The Health Behaviour in School-aged Children (HBSC) study is a unique cross-national research study into the health and well-being of adolescents across Europe and North America, conducted in collaboration with the World Health Organisation (WHO) Regional Office for Europe. HBSC got in touch with us to create a standalone website to showcase their data as a set of filterable dynamic charts. Previously these had all been designed as static flat images at great expense each time.

 

The Solution

We presented two different design routes and graphical styles for the site and we worked with HBSC to create a specification of all of the functionality that was required for the charts and filters. The technical specification evolved as we built the charts and worked on visualising the data. For example the charts had predominantly been designed as portrait flat images in previous years but on a desktop computer screen it made much more sense for them to be landscape so you could see all of the bars without scrolling, on mobile they needed to portrait to fit the small screen width. This drove out the requirement to be able to switch axis on the charts, this further benefited users who export the charts for presentations as they could pick the best layout for embedding them in their documents. We enjoy being agile and adaptive when working on projects as it’s not always possible to know exactly what you need at the very start of a project. Sometimes seeing things working on screen drive out great ideas.

The entire site is built upon WordPress and all aspects of the site are updatable via the CMS including the footer content and chart data. Lisa also designed a suite of graphics for sharing key data to social media.

The site build had a very tight deadline but we prize ourselves on always being able to deliver to the agreed date and we met this deadline. There is more development work planned with the future releases of the report data. Then it will evolve every 4 years as new data is produced.

View the Data Browser Website

Share it