How we helped overhaul the charity platform serving thousands in need

2022
INDUSTRY: Charity, Fundraising

About the project

Mite.org is a US-based public charity that collects donations for worthy causes worldwide. The foundation curates many impactful projects, each with a specific purpose and amount to be raised. Since they collect through their website, the founders wanted us to redesign and rework it to better serve the foundation’s goals and make it easier for both the sponsors and the Mite curators to help people.

Go to website

charity
Services we provided:
Web Design Front-end Development Back-end Development Software Testing

Initially, Mite’s representative approached us with a request for a simple makeover. They felt their website back then looked outdated, with rough branding and not entirely clear message. But as work went on, they realized the project can be taken to a whole new level. And so, we ultimately delivered a full-fledged application with payment functionality, newsletters, user profiles, search, and more.

sitemap

Our technologies & services:

Client’s challenges

  • Facilitating the conversions of users into sponsors through attractive design and well-thought-out UX.

  • Ensuring smooth flow so that nothing would get in the way of sponsors finalizing their donations.

  • Implementing the expenditure tracking system to provide sponsors with detailed information on how their money is being spent.

  • Improving the presentation of information to make it easier for sponsors to decide which cause they want to support.

join charity

About the Project

Product scope

Delivering a more friendly and human-centered design was the simplest part of the job. What made it really interesting and special in a way was a number of additional challenges to take on. One of the tasks set before us was to increase the number of donations by attracting and retaining users at mite.org. With that objective in mind, the following strategy was chosen — to constantly provide the users with information about the status of the project they supported so that they are fully aware of how their donations impact the lives of others.

mite site content mite site content

Fundamentally, we’ve defined the following goals:

  • Implementing a custom donation form with Stripe as a service provider and allowing to separate and monitor donations by projects.

  • Adding a dashboard and accounts page for registered users containing detailed information about the projects.

  • Simplifying the process of donating and implementing subscriptions, allowing regular supporters to also sign up for automatic recurring transfers as opposed to making one-time donations.

  • Adding editable content sections for future publications.

  • Adding a dashboard and accounts page for registered users containing detailed information about the projects.

  • Improving the website’s structure to attract more sponsors to the cause.


Making a list of all the curated projects with complete information about each of them:

  • Full description, business partners, and the number of people this project aims to help;

  • Numerous pictures so that the users can get a feel of the project;

  • The amount of money needed to accomplish a particular goal with constant updates to track progress;

  • The news feed with updates for each project, including descriptions, photos, and videos to motivate the sponsors even more.

Full description, business partners, and the number of people this project aims to help;

Numerous pictures so that the users can get a feel of the project;

The amount of money needed to accomplish a particular goal with constant updates to track progress;

The news feed with updates for each project, including descriptions, photos, and videos to motivate the sponsors even more.

Project Details

Custom donation form

The client chose Stripe as a payment system to process the donations. One of our main goals was to separate the projects so that the client could see and analyze the numbers for each of them individually. And so, we’ve skillfully used Stripe’s online store product management functionality to enable the collection of donations on a per-project basis, where each project is seen as a product.

slide first for custom donation form slider
slide second for custom donation form slider
slide third for custom donation form slider

In doing so, we’ve also implemented a handy option of subscribing to charitable projects, allowing donors and sponsors to commit recurring transfers for the amount and within the timeframes they choose. Once subscribed, the donations will be charged from their cards automatically, i.e., weekly, monthly, or annually.

thanks for giving

Project Details

User accounts

In addition to publicly accessible pages, we had to create a personal user space, which would offer extended functionality and opportunities for the invested users. The client knew that to facilitate and encourage donations to various projects, the organization needed to be as open and transparent as possible.

account info form
account info

With that in mind, we’ve designed a clean and functional dashboard in the user profile area. This is where users can choose a specific project the organization is curating, select a subscription period, see all the other projects they’ve subscribed to, and view the donation sums raised. This section also includes a photo gallery that users can like and share on social networks.

Having implemented the registration function, we had to decide where to store user data. This could be done either through the Auth0 service (authentication service we picked) or directly in Sanity CMS.

Because much of the application data associated with users was already stored in CMS, we chose to stick with Sanity once again. As per the client’s request, we’ve made this area functional, colorful, and informative.

mie app screenshot

Maximum Benefit

Data handling

As mentioned above, we use Sanity not only to manage static content but rather as a full-fledged database with data being regularly added, edited, and deleted. Using it to store the data of registered users allows the site owner to see their contacts and assist them with any account-related problems when necessary.

mite website dashboard

Creating this schema with the user data in Sanity was a great solution as it’s connected to other various documents, such as project subscriptions or news, links to the liked posts and images, etc. This approach enables a more convenient work with documents and their connections.

data handling

3d rendering

ThreeJs Globe

Another interesting feature we’ve implemented at the client’s behest is a 3D globe visualizing all the organization’s projects. We’ve added a geolocation list in Sanity, which includes country names, coordinates, and flags. The CMS admin could then attach the created geolocation set to any previously added project, which would allow displaying markers with relevant coordinates on the globe. This functionality allows users to see the information about any project simply by hovering over its marker.

track your impact website

PROJECT DETAILS

Notifications

We’ve also implemented user notifications for mite.org. Sponsors can now subscribe to receive pings regarding new projects, payments, the latest updates, etc. These notifications are powered by Sanity CMS and GROQ Webhooks. And here’s how it works: once a new document with the notification text is added to the Sanity admin panel, we can programmatically subscribe to it with Sanity hooks. When a hook is triggered, it sends a request to the serverless function along with the added data. The function then sends a request to the Firebase service through which users receive their push notifications.

user notification for mite

PROJECT DETAILS

Search

GROQ Webhooks is a useful tool for solving various problems. Outside of notifications, we also use Webhooks to send content from the CMS to various services, such as Algolia. After each new blog publication, a webhook sends the data to the Algolia service, which in turn indexes all the incoming content like headers, descriptions, and links. When a user searches for information, a request is sent to the Algolia service, which then compares the search query with the available content. If there is a match, they will see a list of results.

search for information mite

PROJECT DETAILS

Visual and textual content

To get more traffic and, consequently, more donations, the site required a lot of valuable content. This is why the decision was made to add the blog and resources sections. The resources provide useful information that could answer many of the users’ questions, while the blog offers a nice read at your leisure. By adding the option to share posts on social networks, we also managed to improve the project’s reach and attract more people to the cause.

social media messaging popup

However, the client wanted the option of editing the site content and customizing certain pages. We realized that for us to implement many of the requested solutions, the site needed a robust CMS. We were choosing between Prismic and Sanity, but we’ve determined that the latter, being a highly customizable CMS, would better suit the project’s needs. So we ultimately picked Sanity and integrated it with the website.

mite site content mite site content

new life for the project

Outcome

With our efforts, the overhauled website became more transparent, informative, and friendly. It now boasts many additional technical solutions that improve the overall UX and facilitate the collection and provision of donations.

outcome website mite

We can safely say that what started as a straightforward makeover turned into a great journey, with its many challenges, pitfalls, and ingenuous comebacks. Ultimately, we helped breathe new life into the project and added much-needed functionality and interactivity by finding apt solutions to many of its problems, even those relatively complex and unconventional.

collage of website pages

Have a similar project or idea? Let's discuss the details.

contact us

Ready to discuss
your project with us?

Thank you for your submission!
We’ll contact you as soon
as possible.

Our clients say

“Halo Lab delivered a unique and original design that makes my company stand out from the competition — they didn’t provide a template-based design or something trendy. Their development is world-class and perfection itself.”

Ronan Casey

Founder at Baamboozle