Mental Health Foundation

Mental Health Foundation - website design

The Mental Health Foundation site, launched in January 2016, focuses strongly on user requirements and translating MHF’s brand online.


During the discovery phase of the project we interviewed stakeholders from many different roles within the organisation and a number of different users; both individual and professional. What surfaced was that it was key to ensure that the new site reflected MHF’s scientific, research-based roots alongside the obvious respect and popularity the charity has with the general public.

Information architecture

When developing a new website you often envisage delays and problems occurring, but none of these things happened with Headscape. The team were efficient, professional and, most importantly, very engaged in getting across our brand online and ensuring the site was produced to an extremely high standard.

Stuart Hill, Digital Manager, Mental Health Foundation

We spent a lot of time working with MHF on the site’s information architecture and, particularly, the labelling and priority of different sections. For example, we ended up greatly simplifying the main navigation to: Our Work, Get Involved, Your Mental Health and Publications; as well as including the two principal organisational objectives: Newsletter and Donate. Items such as About Us, News and Jobs were considered secondary and were therefore placed in the footer.

User interface design

MHF moodboard
One of the moodboards created to explore the formal/informal balance needed on the design.

The design look and feel of the site needed to reflect MHF’s new brand. We felt that it was important that the design was simple and clear using flat colours and clear, well-spaced typography. The site’s imagery is key to providing a warmth to balance the rest of the design. We agreed that imagery needed to reflect natural situations and “model” photography should be avoided.

Content management

The site runs on the Drupal CMS. We used Drupal Panel Pages to provide the MHF team with really powerful editing tools. The following example demonstrates the flexibility that is available with a row of three items followed by a row of four and a full-width panel at the bottom. All of these areas are fully editable: the second row, for example, could have a fifth item added to it with or without an accompanying image. Or, another panel could be slotted in between the first and second rows. It is a really useful tool for the creation of differing page layouts. The type of design changes that used to mean returning to the designer and developer to build.

MHF website screenshot
The ‘Your Mental Health’ landing page.