BES homepage design

British Ecological Society

Website user experience design
BES homepage design
Client: BES & Made Noise
Services: Stakeholder and user research; content planning; IA; interface design, build management; population
Partner(s): Made Noise & BrightMinded

Working with the British Ecological Society to shape their brand and website is something we’re immensely proud off. 

UI and UX sketch and design for BES website


We were so chuffed to be working with the British Ecological Society (BES), a brand that we’d admired and worked with for a number of years in various guises. We could see how we could help unify their brand and bring order and calm to their online and offline communications.  

Working in partnership with Made Noise we spent time getting to understand and empathise with the internal team, key stakeholders, membership and their wider audience. By the end of the process we’d interviewed and gained feedback from over 200 people, which was no mean feat.

Once the research was completed and evaluated, we spent time digesting this feedback with a working group from BES. Together we established what were quick wins; what were no-gos; what was working well and what could be improved. This process gave us all brilliant insights, enabling us to assess their strategy, shape their brand and optimise their digital communications.

British Ecological Society website design wireframes

Working together

Using the insights we’d gained from the strategy work with BES, we ran a workshop to help understand the needs of their website and their wider digital audiences. Their previous website content had been created to align with the organisation’s own internal structure and was painful in parts for the internal team to use. Through this process we developed personae and profiles and planned user journeys through the website. We also spent time assessing what content the users needed, versus what capacity and appetite there was to meet these requirements. This was a way the organisation hadn’t worked before, and our output was a comprehensive user-centred information architecture and content plan for the new website.  

There were a number of templates that we identified that would be required to suit the different user and content demands. We carefully planned the wireframes, we ensured that the content was fit-for-purpose from the user’s perspective and that tasks were made simple and easy to complete.  We then ensured the content would reflow for mobile devices.

Leading on from this work we specced the website and worked with our technology partners BrightMinded to assess how we could structure the new CMS to work in harmony with everyone’s requirements.

Content really is King

No mater how good a website IA or design is, poor content will always let the site down. BES were sat on mountains of brilliant content, but it needed more structure and a knowledgeable and accessible tone. We provided advice and training for the writing of the web and how to strike the right tone.

As part of our website training and the wider brand we provided advice on optimising images for the web, as well as picture researching and guidelines.

As the resource for managing the website was limited, we were determined to work smart and be resourceful in order to provide as much help and support to the in-house team. For the future, we helped sense check how content would be managed and what we could do to ensure the website supported them and their users.

BES website UI design for a hub page

Bringing it all to life

The responsive interface design was grown from the newly developed brand by Made Noise. We kept the design clean and clear to aid movement through the site and also to support download speeds for mobile users. We worked with BES to plan and populate their content and provided support and best practice principles. Together we worked through the details and planning for every page, including a fun 404 page, which while we always hope it might never be seen, might pop up from time to time.

What Twitter said:

UI and UX sketch and design for BES website
British Ecological Society events page website design

We liked: working with the internal comms team to empathise their needs and pain points and balance these with their end user’s needs.