Case Study: A Custom React Application for Rotary International
The mission of the Rotary Foundation is to enable members worldwide (Rotarians) to advance world understanding, goodwill, and peace through the improvement of health, the support of education, and the alleviation of poverty.
The Rotary Foundation helps fund humanitarian activities, from local service projects to global initiatives, through Rotary clubs and districts around the world. Clubs can choose to self-fund or apply for grants from the Foundation to invest in projects and provide scholarships.
The Foundation also engages in larger, global campaigns such as polio eradication together with its partners: The World Health Organization, US Centers for Disease Control & Prevention, Unicef and the Bill & Melinda Gates Foundation. End Polio Now, Rotary’s fundraising call to action was the focus for the first iteration of Rotary’s new online donation workflow, designed and built by Amazee Labs in Austin.
Rotary International (RI) is a worldwide organization of business and professional persons who provide humanitarian service, encourage high ethical standards in all vocations and help build goodwill and peace in the world. Rotary International manages the online presence and back-office systems supporting The Rotary Foundation's donation collection and processing.
Previously, making donations to the Rotary Foundation took place through a frustratingly slow and inefficient multi-page system. When donors visited a Rotary project page, End Polio, for example, and clicked to give a donation, they were redirected to a different website, which is not the best user experience. Donors also struggled to select the appropriate fund among Rotary’s many possible donation avenues, even when directed there from a campaign-specific site. To say the experience was less than elegant would be putting it mildly.
The two main goals of the new donation workflow project were: 1) make the donation process faster, with fewer clicks and fewer steps, and 2) keep the donor on the same campaign website rather than redirecting donors elsewhere.
The clincher, Rotary needed this functionality built in a way that the donation experience could be easily replicated on their many other web properties without having to lean on their internal dev team to make it happen.
The Amazee team traveled to Chicago for a two-day kickoff with Rotary stakeholders. In the second day of meetings and vertical breakouts, the tech team quickly realized some complications in reaching those goals. Initially, Amazee assumed they would be making a custom Drupal module that could be applied to multiple sites and give Rotary the functionality and flexibility they wanted.
One of the greatest challenges identified that would make this impossible is Rotary’s requirement to allow user authentication. A large percentage of Rotary’s online donors get recognition for donations which they tally cumulatively, and this recognition is mapped through their online member profile.
Creating a custom Drupal module would allow them to sign into the donation page, but syncing that login across many sites would create caching problems. Although there could be a solution in building the tool in an iframe, this was not an ideal solution.
And so, an alternate solution was suggested: React
Building a custom React application would offer the functionality required without interfering with the Drupal framework. Fortunately, we had this epiphany moment during that initial kick-off when we could get buy-in for the idea with all the right people. This early approval allowed us to hit the ground running when the team got home a few days later.
In a new role for the Austin team, Amazee would be augmenting Rotary’s web team. This meant working hand-in-hand with many individuals across both organizations to ensure the right requirements were defined, user testing had been done, and the right departments had given sign-off along the way.
Over the course of five months, the two teams worked together to launch a simplified (MVP) version of the overall donor experience.
You can see this donation app in its second iteration, and make a donation to help end the spread of polio at http://endpolio.org/donate.