herbariasoap.com
Herbaria
Natural cosmetics online store · USA
13 desktop screens · 7 mobile · 2024
Donation platform design · 2021
Balad Al Khair
A donation platform for a Kuwaiti charity association, built on CS-Cart. Each charity project works like a product: quick amounts in dinars, a donation cart and one-click checkout. We designed every page for desktop and mobile.
- Client
- Balad Al Khair, charity association
- Task
- Donation platform design
- Platform
- CS-Cart 4.12, custom theme
- Mockups
- 13 desktop screens, 9 mobile, later updates
- Year
- 2021
Task
Balad Al Khair is a charity association from Kuwait. In 2021 it needed a website for online donations in English and Arabic. We launched it on CS-Cart: each charity project is set up as a product, and each donation as an order.
We designed the mockups for every page on desktop and mobile. In January 2022 the site ran on this design, as the Wayback Machine shows. Later the association moved to a new design of its own, and we implement that one as well.
Home page
- The first screen holds the logo, sign-in and registration. Below it is a strip of campaigns with the goal, amount raised and amount remaining in dinars.
- The selected campaign shows a progress bar, a quantity field and a Donate button.
- Charity projects sit in a carousel, followed by the association’s goals.
- A media center with six tiles, news, volunteer teams and a newsletter sign-up.
- Featured projects have quick amounts from 10 to 50 KD plus Donate and One click checkout buttons.
Donor journey
Hover over a screen to scroll through it, or open it full size.
Project page
A progress bar with the goal and amount remaining, quick amounts, and a Custom mode to split the donation across items.
Cart
Donors pick the purpose right in the cart: sadaqah, zakat, kaffarah and more, next to the amount.
Donor account
Donation history with the date, order number, amount and status, plus a profile tab.
Giving by item
A later project page update: below the form, a list of fundraising items, each with its own progress bar, quantity and buttons.
One-click donation
The One click checkout button opens a window over the catalog: give as a guest or a donor, pay with KNET or a card.
Mobile version
We designed the mobile version for a 375-pixel width: home, menu, project, cart and donation checkout.
Arabic version
Later update: a payment form for mosque study circles. In Arabic the page is mirrored: logo, menu and fields run right to left.
Mockup colors
- #1F3554Header, bands and amount buttons
- #00A651Donate and sign-in buttons
- #242830Campaign strip
- #E52429Association logo
- #F4F4F4Donation purposes and breadcrumbs
More projects
All design projects
Previous
Next
We will find solutions for everyone!
Share your idea and we’ll offer an optimal solution
