2 points · mhmg-demo
Major Giving
Two small changes to the project cards. Open the live page
Primary and secondary buttons on every project
ChangedFeedbackCan we switch the donation items to our primary and secondary CTAs please.
What changed
Fund in full is now the gold primary button and Crowdfund the outlined secondary, side by side on every card.
Why
They match the buttons used across the site, so each card reads as one clear choice.
Before
Before: text link and pillAfter
After: primary and secondary buttonsMore after
The same card on a phone Three projects at a time on mobile
ChangedFeedbackCan we have it so in mobile it only shows 3 projects instead of the 6 shown on desktop?
What changed
Phones show 3 projects with a Show 3 more button. Desktop still shows 6.
Why
Six cards meant a lot of scrolling on a phone. Three keeps the rest of the page within reach.
Before
Six cards before the buttonAfter
Three cards, then “Show 3 more”6 points · mhz-wire/a
Zakat · option A
Option A was chosen. These refinements are on the wireframe, ready for the full design. Open the live page
Readable on a phone, and a phone preview
ChangedFeedbackIt may just have been my screen but we struggled to see the mock up in mobile view.
What changed
The page now fits a phone properly. There’s also a Phone view button in the top bar that shows the mobile layout on a laptop.
Why
The menus were wrapping and pushing the page down. Phone view lets the team check mobile without a phone to hand.
Before
Menus wrapping on a phoneAfter
Tidy on a phoneMore after
Phone view, opened on a laptop Silver Nisab, with a switch to gold
New designFeedbackFor the nisab value we were thinking just have silver on show with a button to switch to gold + back
What changed
Only the silver Nisab shows. Switch to gold swaps it, then Back to silver. The calculator uses whichever is on screen.
Why
One figure is easier to take in than four.
Before
Both Nisabs and both pricesAfter
Silver only, with the switchMore after
After switching to gold Signpost boxes open as pop-ups
New designFeedbackThe signpost boxes – can they please open as a pop up modal which you can close out of
What changed
Each box opens a pop-up with the key info and one next step. Close it with ×, Esc or a tap outside.
Why
Donors get the answer without losing their place. On phones it slides up from the bottom, easy to close with a thumb.
Before
Boxes jumped down the pageAfter
A pop-up you can closeMore after
On a phone One calculator module: form or AI
New designFeedbackWe decided we need an option for the traditional form calculator and the AI agent but they should still be one module.
What changed
The form and the AI assistant are now one box. The form comes first, in three short steps, with the total updating as you type.
Why
One place to work it out, and one set of answers whichever way you choose.
Before
Calculator and chat side by sideAfter
One module, form firstMore after
On a phone Tick boxes inside the form and the AI
ChangedFeedbackWe weren’t keen on the tickboxes sitting outside of the form/AI agent – they should be incorporated into the form/AI.
What changed
The tick boxes are now step 1 inside the module. In the form they open only the fields you need; the AI uses them as its starting point.
Why
The form stays short, and nothing needs entering twice.
Before
Tick boxes outside the calculatorAfter
Tick boxes as step 1More after
Step 1 close up AI assistant behind a button
ChangedFeedbackWe didn’t like the AI being on show instead it should just be a button. But open to ideas!
What changed
The chat is hidden behind one Ask our AI assistant button. It opens in the same box, and you can switch back to the form at any time.
Our idea
When you’re ready, the assistant fills in the form for you, so the figure always comes from the same calculation.
Before
Chat always on showAfter
AI mode, opened from the button2 pages · mhpt-demo · mhbn-demo
New pages
Two new pages built from the team’s briefs, both working demos in the Muslim Hands design.
BriefA search function to add your city and Islamic way of thinking to produce a prayer time for the day (and maybe week ahead?), including the direction of prayer element. Local mosques and events (although I have raised a potential need to vet these but lets include in the design for now). The page also needs to include elements which remind the reader to donate this Ramadan.
What’s on the page
Real prayer times for any city, with a countdown to the next prayer and a choice of calculation method. A week, month and Ramadan timetable, the Qibla direction, and nearby mosques and events on a map.
How it answers the brief
It works wherever the donor is, so it’s worth coming back to daily. Every mosque and event shows whether it’s been verified, and Ramadan giving runs through the page.
Content to confirmEvents are samples and mosques are unverified until the vetting process is agreed. Please confirm the last-ten-nights appeal and this year’s Fidyah and Kaffarah amounts.
Mockup
Mockup: fixed London timesAfter
Live times for any cityMockup
Mockup on a phoneAfter
Ours on a phoneMuslim baby names
New pageBriefWe want to have baby names be searchable by gender, meaning + letter to produce a listed output. This would feature links to aqiqah as a donation item and should lead with that. There was some discussion of the baby name pages being separate but I think for SEO it should all be on one page as in the results.
What’s on the page
The page opens with Aqiqah. Below it, 526 names you can search by meaning, filter by gender and browse A–Z, each with a link to give Aqiqah in that name.
How it answers the brief
All the names are on one page for SEO. Aqiqah leads and follows the visitor down the page, turning a popular search into a way to give.
Content to confirmName meanings need a scholar review. Please confirm the Aqiqah price and whether checkout can take the baby’s name.
Mockup
Mockup: name finder firstAfter
Leads with AqiqahMockup
Mockup on a phoneAfter
Ours on a phoneMore after
Browsing A–ZGirls’ names meaning “light”