Muslim Hands
Mobile App

Muslim Hands is an international non-governmental organisation in over fifty-two countries that helps those affected by natural disasters, conflict, and poverty.

To design the homepage of the app for a logged-in donor, I focused on creating a user-friendly interface that highlighted the app’s key objectives; making donations and viewing updates on past donations. This homepage design aims to empower donors by providing them with a seamless and rewarding experience, ultimately fostering long-term engagement and support for Muslim Hands' humanitarian efforts.

Process:

Understanding User Needs: I began by understanding the goals Muslim Hands had for creating an app and the expectations from their donors, utilising empathy to put myself in the shoes of the donor and what elements would be most appealing to them. Transparency and timely feedback were identified as key priorities.

Sketching and Wireframing: I sketched out potential layouts for the homepage, focusing on simplicity and clarity. Wireframes helped visualize the placement and hierarchy of elements and user flow.

Design Iteration: Emphasis was placed on making donation and feedback processes intuitive and accessible, so I kept this in mind when arranging the homepage elements.

Visual Design: Finally, I applied visual design elements to enhance the user interface, ensuring it both aligned with Muslim Hands' branding and conveyed a sense of trust and credibility to the donor.

Design choices:

  1. Header Section:
    Hamburger-style navigation menu for easy access to different sections of the app (e.g. My Donations, Current Appeals, My Account). I opted for a hamburger menu over a banner to reduce visual clutter and allow for more space on the app screen, keeping the donor’s focus on the app’s main objectives.

  2. Welcome Message:
    Personalised greetings (e.g., "Welcome back, [Donor's Name]!") to enhance user experience and connection. Emotive line thanking them for being a repeat donor. The message could change every few logins to keep the app fresh and interesting and enhance the feel-good nature of the message.

  3. My Donation Updates:
    A carousel displaying updates on the projects the donor has contributed to. Visual progress indicators (e.g., photos, videos, progress bars) showcasing the impact of their donations in real-time. Ability to share the project progress to contacts or social media, which both encourages a sense of pride in the donor and enables our work to be seen by more potential donors. I chose to put the “My Donation Updates” section first on the homepage to invoke a sense of accomplishment, which will uplift the donor and make them more likely to use the ‘Rapid Donation’ feature.

  4. Rapid Donation:
    Tiles representing various causes or projects the donor has previously supported or shown interest in (e.g., "Gaza Emergency", "Blessed 12,000", "Yemen Emergency", “Qurbani”).
    Pop-up donation screen per cause to enable the donation to be simple, seamless and fast.

  5. My Impact:
    A ‘feel-good’ section to display the donor’s current impact using the visual element of a map with points to all countries they have donated to projects in. A line to thank them by name and provide information on how many countries and beneficiaries they have helped. A badge/award status that can improve with repeat donations to gamify donations and give the donor a sense of both challenge and achievement. An emotive call-to-action in the line “Whose life will you change next?” followed by a button linking to ‘Current Appeals’ page to make the donor feel like they have made a positive difference in the world and encourage them to support further with more donations.

  1. Notification Centre:
    Alerts for new updates, feedback responses, or important announcements from Muslim Hands, ensuring donors stay informed and engaged.

  1. Project Feedback Section (in navigation menu):
    Section for donors to access feedback on their completed donations. Options to rate their satisfaction and leave comments, ensuring their voices are heard and valued.

  2. Profile and Settings (in navigation menu):
    Access to donor's profile settings for managing personal information, payment methods, and notification preferences. Ability to view donation history and receipts for tax purposes.

  3. App Footer:
    A footer to house the Muslim Hands logo, charity number and Fundraising Regulator logo to convey a sense of trust and credibility to the donor.