Brambletye
A fundraising website and 16-page brochure for the Exploration Hub appeal. Interactive maps let supporters explore the plans and choose what to support.
Project Overview
Working with Underhill Associates, I designed a responsive fundraising website and matching brochure for Brambletye School’s Exploration Hub appeal. I shaped the content structure, designed interactive maps and the pledge calculator interface, and coordinated website implementation with a development partner.
The Challenge
The challenge was to turn an initial outline and architectural references into a clear campaign journey: understand the plans, explore funding opportunities and make a pledge. Detailed maps also needed to remain usable on mobile, where they had initially been considered for removal.
01
Design decisions
Campaign website
Shaping the campaign journey
I developed the initial brief into a page structure and visual design that introduce the appeal, explain what visitors can explore and provide a clear route to making a pledge.
From outline to final design
Working from Underhill’s initial page outlines, I developed a wireframe that expanded the Home page beyond a grid of image links. I introduced an opening section with a headline, supporting copy and access to the campaign video, giving visitors context before the project details.
I replaced the grid with alternating image-and-text rows and wrote short descriptions explaining each destination. A closing call to action completed the page, with the same route to making a pledge repeated across the site.
I then developed the visual design using the supplied colours and typography, campaign imagery and refined copy, and designed hover interactions for links and buttons.
Wireframe
Final design
Bringing navigation to life
Following the client’s request for a more expressive menu with larger links, I expanded the initial side panel into a full-screen layout. I introduced images that slide in as visitors hover over each link, with a floor-plan graphic in the background. I designed and prototyped the menu transitions and button hover states in Figma.
Figma prototype demonstrating full-screen navigation, contextual imagery and animated hover states.
02
Visual & interactions
Master plan
Bringing the campus plan to life
I redrew the campus map as a layered illustration and designed hover interactions that reveal individual projects and their funding information.
Drawing the map for interaction
Using the supplied campus references, I created a new illustration in Adobe Illustrator, with each building and project separated into editable layers. This gave me control over the colours, detail and overall style, while allowing individual objects to be isolated for interactive states.
Revealing one project at a time
Hovering over a marker enlarges and visually lifts the corresponding object above the map, with a shadow reinforcing the separation. A popup identifies the project and whether it is school funded or reliant on donations. The interaction reveals information without taking visitors away from the campus view.
Figma prototype showing project highlights and funding information on the campus map.
The whole campus, one clear focus
The map provides an overview of the campus, while the hover state directs attention to a single project. A restrained base palette leaves room for the funding markers and highlighted objects to stand out.
03
Design decisions
Pledge flow
Choosing what to support
Supporters can select a specific item or calculate their own pledge. Both routes lead to a prefilled form, with no payment taken when the declaration is submitted.
04
Responsive design
Mobile maps
Keeping the maps usable on mobile
The detailed maps were initially considered for removal from mobile. I proposed a dedicated full-screen view so visitors could still explore campus projects and choose what to support on their phones.
A dedicated space to explore
Both maps open through an Explore the Map button, giving visitors a dedicated view for zooming and moving horizontally across the illustration. At the widest view, markers become small, inactive dots. Zooming in restores selectable markers for exploring individual projects or items.
Tapping a marker opens a bottom sheet anchored to the lower edge of the screen. Its height adapts to the content, and tapping outside closes it. Both maps follow the same pattern, with the floor-plan panel also providing a Make a Pledge button leading to the form.
Overview first, detail when needed
The aim was to preserve access to both maps without crowding the small screen. Simplified markers support the overview, while zooming and selecting reveal individual details. The bottom sheet provides space for information and actions without replacing the map view.
05
Visual design
Web & print
One campaign across web and print
I extended the approved website design into a 16-page brochure for print and email, keeping the campaign recognisable while adapting its presentation to each format.
Adapting the campaign for print
I carried the website’s typography, colours and imagery into a sequence of spreads combining the project story, proposed spaces and funding information. This included maps I had drawn from scratch using client-supplied references, alongside architectural visualisations supplied by the client that I refined with AI.
The interactive maps became static illustrations with labels and legends explaining the individual objects. This preserved their visual connection to the website while making the information available directly on the printed page.
Designed for print, adapted for email
I designed the brochure primarily for print, while keeping its adaptation for email straightforward. The digital version retains the same visual language, adds active links and uses a smaller file.
On selected pages, I centred content blocks to suit viewing one page at a time. These adjustments supported digital distribution without requiring a separate design.
Preview of the print layout, with selected personal and contact details replaced for presentation.
Recognition across formats
The aim was to keep the campaign recognisable as readers moved between the website and brochure. Each format still needed to explain the project and ways to support it clearly, even when viewed on its own.
06
Project summary
Delivery & learnings
Delivery, feedback and reflection
Delivered
I designed the responsive campaign website, including the campus map, interactive floor plan, pledge calculator and form, alongside a 16-page brochure for print and email. I coordinated implementation with a development partner, reviewed builds and followed up on corrections.
The website launched on 4 September 2026, with minor refinements continuing. The brochure is awaiting final client revisions before print.
Feedback
Underhill shared positive feedback from the school’s leadership on both the website and brochure. They also reported a £50,000 pledge from a parent following a presentation of the two materials, providing an early indication of support for the appeal.
Looking back
For me, the key decision was preserving the maps on mobile. It required a different interaction model while keeping the same information and pledge opportunities available.