Tkiyet Um Ali - The first organization of its kind in the Arab world geared towards eradicating hunger in Jordan

Non-profit

Summary

Tkiyet Um Ali’s legacy website had limitations and a lack of impactful UI/UX that prohibited optimal results. Vardot worked with TUA to support their mission.

Case description

Tkiyet Um Ali (TUA)’s old website suffered from various performance issues. From inability to handle traffic during peak donation seasons and search engine related errors and server issues.

The donations system was limited and did not allow for recurring donations which is something the organization relies heavily on.

Furthermore, their older website also suffered from a lack of diversity in their content. They wanted the ability to publish all forms of rich multimedia content to their website without negatively impacting the performance or loading speed of their new website.

REQUIREMENTS

Real Time Sync & Integrations

The international reach of Tkiyet Um Ali necessitates that they manage their ever-growing community and database efficiently. The new website had to become part of the solution in that all information entered by users, donors and otherwise are synced in real-time with their CRM system.
In addition; they wanted the new website to be integrated with 3rd party communication services, social media channels, and Google platforms.

Advanced Donation Experience
Responding to community feedback; Tkiyet Um Ali wanted a recurring payment process to make the user experience of donors more convenient. The new donation process should also accept various forms of payment from different channels such as PayFort, credit cards and etc.
The payment system needs to work with a Payment Gateway that allows integration with TUA’s bank which operates in Jordan thus leaving not many options for Payment Gateways that can be used.
A priority also for Tkiyet Um Ali’s new website is to maintain the integrity of all donation-related data and the donors' privacy.

WHAT WE DID

Optimized Reach
Launching of the new website was meant to coincide with Tkiyet Um Ali’s busiest period during the year, the holy month of Ramadan. During this month, activity in terms of traffic and donations is at its typical peak for the NGO.
When comparing the performance of the new website during Ramadan 2019 and the previous year;in addition to a noticeable increase of 160% in the number of new users.
Also, during Ramadan 2018, the traffic from organic search contributed almost 8.5% of overall traffic. The organic search performance was visibly enhanced almost immediately after launch during Ramadan 2019 as traffic from organic search contributed almost 15% of overall traffic to the site.
The improvement is a whopping 336.39% in Organic Search.
Search engine optimization is a key and vital issue that contributes dearly to the users’ experience and this was evident in the performance of Tkiyet Um Ali new website in comparison with 2018.
Moreover, peak traffic in Ramadan 2018 was 4,908 visitors. Whilst in Ramadan 2019; that peak traffic rate was beaten twice. The number of sessions also increased by almost 184%.

Varbase CMS
Tkiyet Um Ali’s new Drupal 8 website was built using Varbase. Varbase is a Drupal 8 Distribution developed by Vardot.
We launched the new website in 2 different languages: Arabic & English, to target both local, regional and international audiences that form the majority of the Tkiyet Um Ali donor and supporters community. Using the built-in translation feature; all content can be translated into all languages with ease.
All content can be edited, manipulated and created in a simple content moderation and publishing process that gives non-technical admins the freedom to personalize via roles and permissions. Admins can also preview content and manage the website on-the-go from their mobile devices.
All accounts that were created by users of the legacy website were securely migrated to the new CMS without any loss of data or privacy issues. Moreover; the CMS has been integrated with vital 3rd party apps that allow Tkiyet Um Ali to track both admin and user behaviors across the platform.

Secure and Seamless Donation Experience
The client wanted to use Payfort - an online payment system that accepts multiple currencies and payments from anywhere across the world. Payfort also provides real-time insight into transactions and relevant data. The challenge our development team overcame was that Payfort didn’t have a Drupal 8 module; so we ported Tkiyet Um Ali’s payment gateway using Payfort by rewriting and updating the module that enables Commerce Payfort as a feature in Drupal 8.
This integrated feature along with Cart API enabled Tkiyet Um Ali donors and mobile app users to donate money in a seamless and secure fashion. Cart API allows users to easily edit their items in the shopping cart prior to confirming their purchase.
However; Tkiyet Um Ali has a variety of donation programs that also required tracking to measure and evaluate their performance. So, we ensured that each unique donation can be tracked and easily identified in a bid to support objectives.
The client website admin team now has:
Access and view real-time analytics of orders and donations.
Performance reports (i.e. best selling packages)
Analytics reporting regarding donors and taxes
To further personalize and enhance the donor experience; Vardot implemented a feature that allowed for recurring payments built on top of the Commerce Recurring API module that enables frequent donors to sign up for a service that facilitates timely donations (i.e. $35 daily/monthly or annually).
Additionally, the user journeys were made to be purposeful leading to donations consistently in a relevant and contextual manner.

Intelligent UX
Based on feedback from their community, Tkiyet Um Ali prioritized developing an ideal user experience. The new design theme we delivered is minimal and appealing to the user; where images communicate a specific and relevant message in each webpage.
The new website is optimized and responsive to the visitor needs regardless of their browsing device or screen size. Page loading time across all devices is ideally minimal thanks to smart image representation and HTML5 components built in the CMS. This mobile-first approach meant that we also had to revamp the registration and sign-in process for users to ensure that they can set up accounts in a secure and convenient manner using best practices that includes social media credentials.
A simple user journey that culminates in tailored landing pages was provided in a bid to enhance the UX for each unique user profile. These landing pages were enriched with relevant forms that are essential to gain user feedback and required data. Using Drupal 8 webform module, Tkiyet Um Ali now utilizes one of the world’s most advanced web forms.
Every transaction and interaction of consequence undertaken by a user or visitor of the new website is followed by an HTML rich email notification and message to ensure real-time confirmation and transparency.
Our focus has always been to design the new website mobile first, as the old website wasn’t responsive.The design of the older website gave the impression that the nonprofit organization was a corporation. With our new fresh look and visually appealing UX; TUA looks more like a community and can promote their mission using images

Solid Foundation for Future Digital Growth
Being built on Varbase; Tkiyet Um Ali’s website enjoys full scalability and flexibility when it comes to upgrades and enhancements in the future. There will be no need to rebuild the website all over again thanks to continuous improvement of Varbase by the open-source community.
The ongoing support from the open-source community ensures that the new website will be optimized and consistently comply with the latest trends and standards when it comes to UX, accessibility, compatibility and security.

Case goals and results

Goal 1: Improved SEO and Reach Results: Almost immediately the results were impressive. Organic search improved by 336% when compared with the same festive donation period in 2018. New users increased by 160% during the same period as well. The number of sessions increased by almost 184%.

Challenges

TUA needed a payment gateway operated in the Middle East region and selection was on PayFort, however there was no available integration and this required a full rewrite of the Drupal module to work with Commerce 2 on Drupal 8.

Also, when a donation was made via PayFort it had to be reflected in their CRM system. The problem was that their legacy CRM system suffered from outdated capabilities and limitations. As such, we had to create a custom integration from scratch to enable seamless syncing of data.

Community contributions

Created a Drupal 8 port for Commerce PayFort Payment Gateway:
https://www.drupal.org/project/commerce_payfort

Why should this case win the splash awards?

TUA’s mission in eradicating hunger has been supported greatly by Drupal 8. They have extended their reach across the globe as most of their donations come from the USA, UAE and KSA. Those donations multiplied thanks to the simpler and more secure donation process via card.

Any NGO that relies on donations needs to exemplify transparency and security and with their revamped UX they have managed to easily do that.

The user experience and overall look and feel of the site was improved to allow for better navigation and experience for the user.
The checkout process was designed to be simple and easy thus not confusing the user and focusing on the overall goal which is to increase donations.

The website was built to be scalable so that TUA are able to create content change easily in order to meet their needs in the organization.