The brief
Old Kent Road Mosque was raising money to rebuild the mosque. It needed one donation page that made giving quick, and that listed every other way to give for people who prefer a bank transfer or a giving platform.
My role
I built the page on my own over two days in February 2023, as a React front end. The payment flow was not part of this repo: the Donate button is not connected to a payment provider here.
What is on the page
A donation card over a strip of building photos, with Single and Monthly tabs.
Preset amounts and a custom amount field.
A verse on giving, with its English translation.
Other ways to donate: a giving-platform button and bank transfer details laid out as a table.
A download link for the Gift Aid form, which adds 25% to a donation.
The full page.
The donation card
The card is the point of the page, so it sits in the middle of the hero, over the photos, with a heavy border. Monthly is selected by default. The custom amount shows a currency placeholder until you start typing. The red Donate button is the only strong colour on the page apart from the brand green.
The donation card.
Every other way to give
Below the hero, a green strip carries the campaign name and the appeal. Then each alternative gets its own row: the giving platform, and each bank account with its name, number and account holder in aligned columns, so people can copy the details without hunting for them.
Other ways to donate.
The bank details in these screenshots are placeholders. The page was built for desktop; it was not made responsive within the two days.