The British Mountaineering Council Website

/ 2024

Overview

Objectives
The British Mountaineering Council Website consulting project:
• Finalise and implement the design phase following the marketing team's consultation project
• Update the visual identity
• Create a welcoming space for newcomers to the sport while addressing the needs of current BMC members
• Develop adaptable layouts, components, and template pages
• Prioritise mobile usability to ensure a seamless experience across all devices
• Review and improve the existing content structure
Deliverables
• Design Timeline and Estimations
• Comprehensive research findings
• Information Architecture
• UI for Desktop, Tablet and Mobile
• Developer handover: component specification and a Figma Prototype highlighting key animations and transitions.

Process

Discover
This project was different from the projects I worked on before where the website development was done in-house. For this project, my team was responsible solely for the designs, while BMC’s developers handled the implementation.

Before the design phase, a marketing consultancy project set clear objectives. BMC aimed to improve its marketing infrastructure and visibility to better share its story.

Using Google Analytics, we identified key user demographics, popular content, and areas of difficulty in finding content. A major insight was that most users accessed the site through organic search, highlighting the need to improve content discoverability.

To address the challenges, we aimed to create a streamlined, mobile-first site that would enhance user engagement, with a focus on bringing new users to the sport. We conducted a content audit of the existing website, which highlighted opportunities to improve content hierarchy and categorisation. Articles, as the most popular content, needed to be easily accessible to retain users.
Define
We developed user journeys and personas to better understand pain points and ensure all user types—from beginners to experts—were considered. This helped us create a clear problem statement for each user group, focusing on optimising the site’s content.

We also identified commercial opportunities, such as memberships and travel insurance, and mapped out services like ‘Find a Wall’ and ‘BMC Huts’ to organise content based on user needs. For example, hikers wouldn't require climbing wall information, so it was placed elsewhere. Market research into similar organisations also guided our prioritisation of content.

The culmination of this stage was an evolving Information Architecture that mapped out content and its hierarchy, giving both our team and the client a clear reference for the design phase.
Develop
We started by establishing the BMC’s design system, incorporating new branding elements, including fonts, colours, and graphics provided by an external agency. Next, we created wireframes for the main sections of the website, which allowed for quick iterations and feedback from BMC. Once approved, we developed all the high-fidelity UI screens.
Deliver
After finalising the UI screens, we moved on to documentation. Since the website would be developed externally, we took extra care in preparing detailed documentation. This included specifications for each component, notes on expected behaviour, and Figma prototypes to illustrate animations and timings for the BMC developer team.

UI Screens

Navigation and Search
New streamlined navigation system with content categorised for easy access.

Assigned distinct themes, including specific colours and graphics, to each main content category, enhancing visual distinction and brand coherence.
New search feature, enabling users to efficiently find content directly on the BMC website, replacing the previous reliance on organic search methods.
Home
Serves as the primary gateway to all website content, including articles, news, videos, and events. Features an animated carousel at the top of the page showcasing multiple pieces of content. Content cards for news, articles, videos, and events are designed for reuse across various site layouts and contexts.

Displays key elements such as BMC campaigns, volunteering opportunities, and club networks to engage users. It also integrates profiles of BMC ambassadors to enhance brand visibility and recognition.
Footer
Relevant services and information placed in the footer, including Wall Finder, Liftshare, social media links, BMC sponsors and general details for constant accessibility in all pages.
Article
We designed a versatile article template applicable throughout the site, providing a robust platform for displaying a wide range of BMC content.

The template will show links to related services such as travel insurance and membership benefits, tailored to complement and enhance the article's content.

Featured related articles within the same category were included to enrich user engagement and navigation.
Categorised Content
There are five main thematic categories to better organise and filter content, aiding users in finding relevant information while reducing cognitive load.

Pages are designed with a modular structure, only maintaining a static hero section and incorporating two prominent CTAs under each main hero section for quick access to key information.
GB Climbing
Previously a separate microsite, it was important to manage all the content into the main BMC website to enhance user retention and accessibility.

Provides athlete details, alongside the latest content and related news.
Video
Dedicated index page to showcase all video content, including exclusive website videos and content from BMC’s YouTube channel.

Key Takeaways