New design A module designed from scratch, with its reasoning
Changed An existing module, reworked
Removed Taken out, with what fills the space
Please confirm Done, based on our reading of the note
8 points · mhmg-demo
Major Giving
New page order: Hero, the need now, why they gave (reels), projects by theme and by who they help, the sample feedback report, impact stories, film, consultation form, FAQs. Project pages lead with the need and a case study.
MG1
Filter by who it helps
Changed
FeedbackFilter: Beneficiary categories rather than numbers i.e. orphans, widows, people with disabilities, refugees
What changed
The Beneficiaries filter (900+, 1,000+, 1,200+ people) is now Who it helps: Everyone, Orphans, Widows, People with disabilities and Refugees. Each project is tagged with every group it serves, the tags show on the card, and the dropdown shows how many projects match each group before you pick one.
Why
Donors at this level usually arrive with a group of people in mind, not a headcount. Tags rather than one category per project mean a well beside an orphan school shows under both Orphans and Widows. The live counts stop anyone choosing a filter that returns nothing.
Before
Beneficiaries filter, sorted by headcount
After
Who it helps, with a count per group
More after
Filtered to People with disabilities
MG2
Filter by theme
Changed
FeedbackFilter: Thematic rather than donation items i.e. water, hunger, livelihoods, education, health
What changed
Donation item (Dig a Well, Hope Shop, Livelihood, Build a Masjid) is replaced by Theme: Water, Hunger, Livelihoods, Education and Health. The themes also sit above the finder as one-tap chips with live counts. So the filter has something to filter, the catalogue now holds 15 open projects across all five themes and six countries (it was ten wells in Pakistan).
Why
Chips put the themes in view before anyone opens a dropdown, which matters on a phone where the finder is long. Each theme keeps one colour and icon everywhere it appears (chip, card badge, need ribbon, project page), so the cause reads at a glance.
Content to confirmThe 14 new projects, their prices and their copy are indicative until the Major Giving team sends real project briefs.
Before
Donation item filter
After
Theme chips and Theme filter
More after
One tap on Health, on a phone
MG3
Form at the top on mobile
Please confirm
FeedbackForm needs to be at the top in mobile view.
What changed
On phones, the call-back form now comes straight after the section heading, ahead of the phone and email details and the three steps; before, it was at the very bottom of a long section. On project pages, the card for funding the project now sits directly under the cover on mobile, instead of after all the content.
How we read it
The hero's “One-to-one consultation” button now lands on the form itself. We read “the form” as the enquiry forms. If the team meant a short form inside the hero, that is a small change to make.
Before
Home: form below details and steps
After
Home: form straight after the heading
Before
Project page: content first, form at the end
After
Project page: funding card under the cover
MG4
Reel cards: why people gave
New design
FeedbackReel cards breaking down the journey of a project? Address why people gave.
What changed
A new Why they gave section near the top of the page holds three reel cards (“For my father”, “For my parents”, “Instead of an Eid gift”) and a fourth card inviting your own reason. Tapping one opens a story viewer that steps through a single gift: why they gave, the need, planning, building, handover and the report. It advances on its own, with tap, arrow and pause controls, and the last step links to the full story and the call-back form.
Why it looks like this
Reels are a format donors already scroll every day, so stepping through one is instinctive on a phone. Opening on the donor's reason and dedication answers “why did people give?” before any price appears. Every reel ends on the feedback report, so the guarantee is part of the story. The same slides can be exported as real Instagram or TikTok reels.
Content to confirmNadia, Sarah and Imran's journeys are placeholders built on the demo's existing quotes. Real, consented stories are needed.
Before
No journey content; the closest was star-rated quote cards
After
Reel cards
More after
Story viewer, step 2: the needStory viewer on a phone
MG5
Crowdfund any project
New design
FeedbackInsert crowdfunding button on each project – so donors can choose to crowdfund for the project.
What changed
Every project card now has a Crowdfund button next to Fund in full, and projects with a live campaign show a progress bar. The button opens a crowdfunding sheet: who the page is for (in memory of, in honour of), an optional starting gift, and a live preview of the fundraising page, ending with a link to share. On the project page, the side card now has two tabs: Fund in full and Crowdfund it.
Why it looks like this
This gives donors who can't fund £8,000 or more alone a way in, without diluting the major-gift route. The live preview shows exactly what family and friends will see before you commit. Asking who the page is for ties fundraising to the personal reasons the reels and stories show.
Content to confirmDemo only: no page is created. The fundraising link format and the totals on four projects are placeholders.
Before
Cards with a single “Plan this well” action
After
Crowdfund and Fund in full on every card
More after
Crowdfunding sheet with live page previewProject page: Crowdfund it tab
MG6
Feedback report instead of plaque
New design
FeedbackShow feedback report example more useful than filling in a plaque
What changed
The “Whose name will your well carry?” plaque builder is removed. The 100% Feedback Guarantee section now holds a five-page sample report you can page through: cover and dedication, before and after, the exact location with GPS, impact and the water test, and the plaque and community voices. Naming a project moved to an optional “Dedicate it to someone” field in the forms. On project pages, the plaque wall became What you will receive: that project's report cover, which fills in the dedication as you type it.
Why it looks like this
Proof is what a major donor needs, and the plaque was only one line of it. The page list on the left doubles as a checklist of what every report contains. The sample uses the Rajanpur tube well already in the hero photo (plaque ID 6024602), so it reads as a real document.
Content to confirmSwap in pages and figures from a real report.
Before
Plaque builder
After
Sample report, page 1
More after
Page 4: impact and water testProject page: your report's cover, with the dedication filled in
MG7
More about the project, less selling
Changed
FeedbackCurrent design pushes too much for sale, but does not offer enough information about the project (the need in the specific village, current situation, beneficiary case study)
What changed
Project pages now open with the need. Life in Multan today describes the situation and gives four key facts (current water source, round trip, households, widow-headed homes). Meet Rukhsana, 41 is a case study with her quote. Only then does the page cover what the gift builds. The cover introduction leads with the need, and cards on the home page show “The need” and who it helps. The ribbon under the hero now names the need in each place instead of counting beneficiaries, and the hard-sell wording (“Plan this well”, “Start this project”) is gone. Pages adapt to every theme, including the timeline and what is included.
Why
The order is need, then person, then plan, then price. The facts are short labelled values, so they scan like a briefing. Asking remains one click away in the side card, but it no longer leads.
Content to confirmThe situations, facts and case studies are indicative and need the field team's real details.
Before
Project page: “The gift” leads, price beside it
After
Project page: the need in Multan leads
More after
Case study from the villageWorks for every theme: an eye camp
MG8
Real impact with the donor's personal story
New design
FeedbackShow real impact with real case studies and combine with a real testimonial. Add their personal story (e.g. in the memory of my parents) – how can this be laid out?
What changed
“Stories of real impact” (star-rated quote cards behind a Donors / Beneficiaries toggle) became Why they gave, and what it changed. Each story is a three-part spread: 1 Why they gave (dedication banner, personal story, testimonial), 2 What it built (project, place, completion date, impact figures) and 3 What it changed (a beneficiary's before and after, in their words). Tabs switch between stories, and on a phone the three parts stack in order.
Why it looks like this
This answers “how can this be laid out?”: donor and beneficiary sit in one frame, so cause and effect read left to right. The dedication banner gives “in memory of my parents” the prominence it has for the donor. The stars are gone, because they made a gift read like a product review.
Content to confirmStory content is a placeholder pending real, consented case studies.
Before
Star-rated quote cards
After
Three-part story spread: “In memory of her parents”
More after
On a phone, the parts stack in order
10 points · mhsw-demo/orphans
Sponsor an Orphan
O1
Compact switcher instead of breadcrumbs
New design
FeedbackBreadcrumbs menu is taking up too much space. Replace for expandable menu to show other options once expanded.
What changed
The row of four sponsorship links (three lines tall on a phone) is replaced by a single pill above the title: Child sponsorship: Orphan Sponsorship ▾. Tapping it expands a short list of the sibling pages (Sponsor a child, Orphan, Disabled Child, Hifz Student), with the current page ticked. It closes on Esc, a tap outside or tabbing away.
Why it looks like this
The menu now takes one line at every width, and you can always see which page you are on. Placing it just above the title makes it read like a label and keeps it off the children's faces in the photo. It is a plain expandable list rather than a dropdown menu, so it works the same with a keyboard, a screen reader or a thumb.
Before
Breadcrumbs on a phone: three lines
After
One pill above the title
Before
Breadcrumbs on desktop
After
Expanded, showing the other options
O2
Whiteboard module removed
Removed
FeedbackWhat's included module with whiteboard needs to be scrapped as the programme is not consistent across the locations.
What changed
The chalkboard “What is included in the sponsorship?” section is gone, together with its £29.50 badge, the chalk-style tags and the “How your £29.50 reaches them” pull-out. Its slot now holds the new What's included map (see O5), which says where each item applies.
Before
Chalkboard infographic
After
Replaced by the What's included map, with a note that every location is different
O3
Photo header with the key points; video moved down
Changed
FeedbackMove video further down – header should be an image with key orphan points at the top of page.
What changed
The header is now a full-width photo with the title, the £29.50 line and the main button. Directly beneath it, a band in the header blue lists the five key points: £29.50 a month (98p a day); education, plus meals and health checks where available; an orphan pack, then an annual report with a new photo; Zakat and Sadaqah eligible; and 33 locations. The appeal video now has its own Watch the appeal section further down, after the stories.
Why
The title and the key facts are on the first screen of a phone and a laptop. The points are static and scannable, where the old strip kept moving, so they replace that strip on this page rather than repeat it. The photo was chosen so the text sits on its soft-focus side and never covers a face.
Content to confirmTwo key-point lines are new wording (“Plus meals and health checks where available”, “Eligible for both”). Please confirm them, and the choice of photo.
Before
Opened on the appeal video
After
Photo header with the five key points
Before
Video first on a phone
After
Title and key points together on a phone
O4
“On this page” contents
New design
FeedbackCreate a contents to skip to relevant content
What changed
A row of contents chips sits under the header: What's included, A sponsor's story, Orphan lives, Watch the appeal, FAQs and Follow the Sunnah. On desktop the row sticks under the main header as you scroll and highlights the section you are reading. On a phone it scrolls sideways, and the menu's “On this page” list matches it.
Why it looks like this
Chips are large, easy targets that work the same at every width. The current section is shown with a filled chip rather than an underline, in line with O9. On phones the row doesn't stick, to keep screen space for content; the burger menu covers jumping around from deep in the page.
Before
No contents; just the scrolling strip
After
Sticky contents, with the current section filled
More after
Sideways chips on a phone
O5
What's included, as an explore map
New design
FeedbackExplore orphans lives module – also create for showing what is included in sponsorship
What changed
A second drag-to-explore map, in blue, built like Explore orphan lives. It has twelve cards: where the £24 goes, school fees and books, teachers and classrooms, health checks, meals, transport, support for guardians at other schools, the orphan pack, the annual report, Eid gifts, support until 18, and a closing card with the sponsor button. Every card is tagged with where it applies (All locations, Muslim Hands schools, Varies by location, Optional extra). A note above the map reads: “What your sponsorship covers depends on the child's country; your orphan pack confirms exactly what's provided.”
Why it looks like this
The team liked the explore map, so reusing it makes “what's included” something to discover rather than a list to read. Because the programme differs by country, the location tag is on every card and the caveat comes first, so nothing reads as a promise for every child. What the sponsor receives (pack, report, gifts) is shown on white notes, apart from what the child receives.
Content to confirmThe page's own copy disagrees on where health checks and uniform apply. The sponsorship team should confirm each card's location tag. Card titles and the £24 note are new short copy.
Before
The Explore orphan lives map, the pattern reused
After
What's included map, with a location tag on every card
More after
Swipe to explore on a phone
O6
Donor testimonial up front
Changed
FeedbackDonor testimonial is important
What changed
A sponsor's story now opens with a large testimonial from Sister Azipha, who sponsors Siddiqui with her family: her photo, her words in large type, and a two-line account of meeting him. It sits high on the page, straight after What's included. Hiba's and her mother's quotes follow underneath as supporting voices, under “And from the families you support”.
Why
A sponsor speaking to future sponsors is the most persuasive voice on the page, so it gets the largest type and the strongest colour. The families' quotes back it up instead of competing with it at the same size.
Content to confirmThe large quote reuses the existing story sentence as Sister Azipha's own words. Please confirm the wording with her, or send a direct quote. Her video is still not public.
Before
Sponsor visit and quotes at equal weight
After
Sponsor testimonial leads, families support it
More after
On a phone
O7
Religious message moved to the bottom
Changed
FeedbackReligious message can be at the bottom (is common knowledge)
What changed
Follow the Sunnah was the first section under the header. It now sits after the FAQs, before “Other ways to help”. It is also shorter: the lead paragraph (orphans mentioned 22 times in the Qur'an), the Zakat and Sadaqah Jariyah paragraph, and the hadith card. The paragraph repeating what's included and the decorative photo are gone.
Before
Whole page: Follow the Sunnah (red outline) was second
After
Whole page: now near the end
Before
The section before
After
Condensed section
O8
Price labels removed from the news-style rows
Removed
FeedbackRemove the price handle for the news style module
What changed
The “£30 A MONTH”, “£27 A MONTH”, “FROM £10” and “FROM £22” labels are gone from the four “Other ways to help a child” rows. Each row is now a title, one line and a photo.
Before
With price labels
After
Without
O9
Underlines removed
Removed
FeedbackRemove underlining – not needed
What changed
The underlined highlights in body copy are gone, and so is the underline on the “Other ways to help” titles: the whole row is the link, and the title turns navy on hover. Links in the FAQ answers and the donation menu are now navy and bold instead of underlined. These changes apply to the Water page too.
Before
Underlined highlights in the copy
After
Plain copy, emphasis by weight only
O10
One font family throughout
Changed
FeedbackKeep same font throughout
What changed
The hand-drawn Cabin Sketch font is removed everywhere, along with the typewriter-style labels. Headings and quotes use Bitter and everything else uses Inter, the same pair as the rest of the site. This applies to the Water page as well.
Before
Sketch-style titles on the map
After
Same titles in Bitter
Before
Map before
After
Map after
6 points · mhsw-demo/water
Gift of Water
W1
Simpler, shorter page
Changed
FeedbackSimplify the page, less is more, make it easy to consume
What changed
The page is cut to seven blocks: the Safe Water Fund, the info strip, all water projects, why water, a well in her name, the appeal video (once) and five FAQs. Removed: the breadcrumbs, the whiteboard “How does it work?” graphic, the drag-to-explore map, the donor quote cards, the duplicate completed-wells gallery and the “Choose your well” rows. At desktop width it is about a third shorter (roughly 4,300px, down from 6,500px), with one main button per block.
Why
Each block answers one question, in order: give now; what can I fund; why does it matter; can it carry someone's name; can I see it; any questions? Generous spacing and a single tinted band for the projects keep it quick to read on a phone.
Content to confirmShort new copy throughout: the hero sentence, the projects intro, the card lines and the Why water paragraph.
Before
Whole page before
After
Whole page after
More after
On a phone
W2
Carousel of every water item
New design
FeedbackInclude module which showcases all water items like on current site – carousel of wells, borehole etc.
What changed
A new All water projects carousel holds a card for every item on the live water page: Water Pump £190, Dig-A-Well £660, Mini Solar-Powered Borehole £2,000, Community Well £2,600, Deep Borehole £5,000 (Malawi), and the Mali Borehole Fund crowdfund with its progress bar. Each card shows a photo, the type, one line, where it's available, who it serves, the price and a Donate button that opens the donation menu on that item. It scrolls with arrows, swipe or keyboard, and a link to Major Giving covers bigger projects.
Why it looks like this
Every card lists the same facts in the same order (type, name, what it is, where, who, price), so items are easy to compare, and Donate is always in the same place. Three cards fit on desktop with the next one peeking in; on a phone the next card peeks to invite a swipe. Putting the crowdfund in the carousel means it doesn't need a block of its own.
Content to confirmPrices and locations come from muslimhands.org.uk/giving/our-work/water. The live page itself gives two different “people served” figures for Community Well and Deep Borehole, so please confirm those. The £5,240 crowdfund total is a demo figure.
Before
“Choose your well” rows at the bottom of the page
After
All water projects carousel
More after
On a phone
W3
Opens on the Safe Water Fund
New design
FeedbackOpen on safe water fund
What changed
The page now opens on the Safe Water Fund: one plain sentence (“Your gift joins others in one fund that builds wells, boreholes and water pumps wherever the need is greatest”), a photo, and a quick-give card with the live amounts £25, £50 and £100, an Other field and a Donate button. The button opens the donation menu with the fund and amount already chosen, and the menu now starts on the fund too.
Why it looks like this
The first screen asks for one simple decision, an amount, using the same amount buttons as the donation menu, so the next step feels familiar. On a phone the card overlaps the photo so Donate stays above the fold. Once or monthly, and Zakat or Sadaqah, sit in a quiet note rather than as selling points.
Content to confirmThe hero sentence is new copy.
Before
Opened on “Give the Gift of Water” and a video
After
Safe Water Fund with quick give
More after
On a phone, Donate above the fold
W4
Breadcrumbs removed
Removed
FeedbackRemove breadcrumbs menu
What changed
The row of links (Water, Water Pump, Dig-A-Well, Solar-Powered Well, Community Well, Deep Borehole, Crowdfunding) is gone, and the page starts straight on the fund. Finding a specific item is now the job of the projects carousel and its filters (W2, W6).
Before
Breadcrumbs above the title
After
Starts on the fund
Before
Three lines of links on a phone
After
On a phone
W5
Giving in someone's name, told as a story
Changed
FeedbackGiving in the name of someone shown in content of the page (Testimonial?) not interactive
What changed
The interactive naming is gone: no “Name a well” button and no “£150 + your name” option, and the donation menu no longer asks for a name. A new A well in her name block tells the story of Lamia Tatari, who was surprised with a well built in her name, alongside a plaque photo and a note that every plaque holds up to 30 characters and the name is added at checkout. Each well in the donation menu says “Every well carries a plaque. Add the name at checkout”, the same wording as the live site.
Why
Naming is shown as proof (a real story and a real plaque) rather than as a form field, which keeps the donation menu short and matches how the live checkout collects the name. The photo caption says where the photo is from, and the quote has no attribution because the words are not Lamia's.
Content to confirmThe pull-quote reuses existing page copy. Please send a direct quote from Lamia if Muslim Hands Canada has one, and confirm it's fine to name her. Please also confirm the live checkout collects plaque names.
Before
Donor story with a “Name a well” button
After
A well in her name: a story, nothing to fill in
More after
On a phone
W6
Filter by location, well type and cost
New design
FeedbackCreate filter function for locations, well types, cost – like on MG page?
What changed
Above the carousel sits a filter bar in the Major Giving style, with three fields: Location, Well type (hand pump, dug well, community well, borehole, solar-powered) and Cost (under £250, £250 to £999, £1,000 to £2,999, £3,000+). Each option shows how many projects it would leave, and active filters appear as chips you can remove. A count reads, for example, “Showing 2 of 6 projects”. If nothing matches, the page offers to clear the filters or give to the Safe Water Fund instead.
Why it looks like this
It reuses the Major Giving pattern the team pointed to: labelled fields that are each one big tap target, counts before you commit, and chips that show and undo what's applied. Native selects use the phone's own picker. A dead end becomes a prompt to give to the fund rather than an empty screen.
Before
No way to filter
After
Filtered to Pakistan, £1,000 to £2,999
More after
The same filters on a phone
2 points · mhz-demo/zakat-page-d
Zakat
Z1
Make it obvious it's a helpful AI tool
New design
FeedbackChatbot needs to be more prominent that it's a helpful AI tool
What changed
The hero's “Ask about your Zakat” button is replaced by an AI Zakat assistant card: a gold AI tag, one line on what it does (“It calculates your Zakat, answers your questions and builds your basket with you”), an “Ask me anything about your Zakat…” box, four example questions, and the line “Answers follow our scholar-checked Zakat policy. For complex cases, speak to our team.” The header button now reads Ask AI, and the launcher is larger and says “Ask the AI assistant”. A one-time greeting introduces the assistant; it can be dismissed, and on phones it waits until the hero card has scrolled away. The calculator stays as a text link.
Why it looks like this
The assistant is now the first thing on the page instead of a secondary button, and the example questions show people what to ask. The same orb, AI tag and green and gold colours appear in the header, hero, launcher, greeting and chat, so it reads as one trustworthy tool rather than a gimmick. The scholar-checked line sits right next to the input, which answers “can I rely on this?” at the moment someone types.
Before
The assistant was a small button and a corner widget
After
AI assistant card in the hero, “Ask AI” in the header
Before
On a phone, a corner widget
After
On a phone: greeting once the hero card scrolls away
More after
The AI card in the hero on a phone
Z2
Three-column AI workspace
New design
FeedbackAi function – 3 collum on desktop with left = chat centre = donation items right = building your basket. On mobile this would have to be a hidden build your basket section and the other two merged together were the chat stops and donation items start.
What changed
Every way into the assistant now opens a full-screen workspace with three numbered columns: 1 Ask (the chat), 2 Donation items (the Zakat-eligible appeals as photo cards with amounts and an Add button) and 3 Your Zakat basket. When the assistant recommends causes, they move to the top of the middle column marked “Suggested for you”, with a suggested share already picked, and the chat offers “Add all three”. The basket shows the Zakat due and how it was worked out, an allocation bar (“£300 of £475 allocated · £175 left”), editable amounts, an optional “Allocate the rest to where it's needed most”, and “Give £300 Zakat”. On a phone it is one scroll: the chat, then the donation items straight after it, with the basket hidden behind a bar at the bottom (“Basket · 2 items · £300 · View”) that opens a sheet. Tablets get chat and items side by side, with the same basket bar.
Why it looks like this
The three columns follow how people actually give: ask, choose, give. Numbering them 1, 2, 3 makes that order obvious. Moving recommendations into the middle column keeps the chat short and gives each option a full card with a photo, which keeps the human side visible. The basket stays in view on desktop, so people always know how much Zakat is left to place; on a phone the bar keeps the running total visible without taking space from the chat or the items.
Content to confirmLivelihoods amounts (£60, £150, £400) and its photo are placeholders. Please confirm the basket rules: suggested splits are 50/30/20, “allocate the rest” goes to the Zakat fund, and anything given beyond the Zakat due is described as Sadaqah. The checkout is a demo and takes no payment.
Before
Desktop: the chat in a panel over the page
After
Desktop: chat, donation items, basket
Before
Phone: the chat as a full-screen sheet
After
Phone: the donation items start where the chat stops
More after
Basket with the allocation bar and “allocate the rest”Phone: basket sheet from the bottom barTablet: two columns plus the basket barDemo checkout confirmation