Active Healthy Kids Wales

A website reporting on children's physical activity

The Active Healthy Kids Wales research group are part of the Active Healthy Kids Global Alliance. The global alliance is a network of researchers, health professionals and stakeholders who work together to promote physical activity in children and youth around the world.

This summer, we worked with the Welsh research group to develop a website to host their biennial report card presenting evidence based on 10 quality indicators relating to physical activity.

In addition to the website, we were tasked to develop two interactive visualisations on the Swanlinx and Dragon Challenge project. These visualisations also formed part of the website with the goal to make the results available to the public.

project goals

Mobile First

The website and all visualisations were to be designed ‘mobile-first’ and be scalable across devices and platforms.


The Active Healthy Kids Wales website should set a high standard of design, provide relevant information and be usable across various platforms and devices. With the ultimate goal of providing an optimal user experience.

Increase Awareness

The platform should aid in educating policy makers and increase awareness around the issue of children's health in Wales.

Access & Clarity

As a point of access to the research the website should provide clarity to the findings.


To efficiently communicate the overall results of the report card to the user, the key findings were summarised visually on the homepage of the website. Through use of a smart navigation and intuitive layout, users are able to find and access more information about each individual indicator as well as links to supporting research.

A ‘mobile-first' approach to interactive map design

One of the key goals of the project was to develop the website and visualisations with a mobile-first approach. The reason being that designing for mobile is often the most challenging part of the conception and design process, and should therefore be undertaken first. Once we have a solid design for mobile, it becomes easier to scale up the interface across larger devices.

Developing for the web involves having to tackle various obstacles such as; hardware, performance, UX/UI and so on. Designing mobile-first, we identified a couple of specific challenges and outlined our approach we used to overcome these.

Challenge Solution
Lack of screen real estate Split the visualisation and navigation into separate views.
Clear user-interaction Introduction guide upon entering the visualisation. Not too many UI elements that would distract the user.
Responsive visualisation Use Javascript and SVG to ensure scalability of the visualisation for various screen widths.
Allowing for user exploration Provide multiple layers and subsets of the data that can be accessed on user interaction.
Mobile performance limitations Minimal client-side processing of the data and utilise compressed or lightweight data formats e.g. topojson rather than geojson.

While it may seem that a mobile-first approach involves more work and headache in the design and development phase, we found that the process offers many benefits:

  • Content first:
    As mobile devices have limitations i.e. screen space and bandwidth, designing within these parameters meant that we had to critically evaluate the content that was to be included.
  • Visual hierarchy:
    We had to establish a hierarchy of the UI elements and content for each visualisation. Meaning the user will always receive the most relevant and pertinent information first.
  • Optimisation and performance:
    Due to restrictions in terms of bandwidth, data limits and connection speeds we had to make the visualisations lightweight. When development is focused on the ‘worst case scenario’ or ‘least capable device’, we had peace of mind in knowing there would be no issues in terms of upwards scalability.
Access & Clarity

A benefit of presenting information interactively on the web is that we can layer the content in order to make it more digestible and cater to different user-groups. We worked with the client to create a content-inventory consisting of the core part of the report card along with ancillary information such as background on the research group and its aims.

From the content-inventory, we established a content-hierarchy and strategy on how to best communicate the information. We decided to structure the content in this hierarchical form in order to provide users with the most relevant information first as well as allow for further exploration of the research findings.

As a result of this, the home-page contains the graded results of each quality indicator. The indicators are presented in a colour-coded card layout in order to reinforce the grade and overall results.

From here, a user is able to click on a card taking them to an individual indicator page. Academic research materials are often very high in content and aimed towards peers. Therefore, we designed a layered individual indicator page that would provide the most important information upfront with in-depth content and supporting links easily accessible.

mockups for the active healthy kids wales website home-page and indicator page

Caption: Image 1. is a mockup of the home-page and image 2. is a mockup of the indicator page for the Active Healthy Kids Wales website.


The website along with the 2016 Report Card were launched at Swansea University in July this year. The Active Healthy Kids Wales website was developed in an effort to communicate the results of their research and aims, not only to their peers within the academic field, but also to influence policy makers and inform the general public. We hope that it will also increase awareness around children's health and activity in Wales.