Somali and American Fund for Education Mobile Site
In 2013, I discovered the Somali and American Fund for Education through idealist.org. SAFE was looking to hire a volunteer designer to redesign their logo and website. I was interviewed to be their volunteer designer and happily accepted the challenge. SAFE describes themselves this way:
"The Somali and American Fund for Education (SAFE) is a 501(c)3 non-profit organization that builds and improves K-12 schools in Somalia. Our efforts focus on improving the quality of existing community managed schools. We believe access to education for children is the most critical component to combating human developmental challenges facing Somalia. We receive annual requests for funds from K-12 schools in Somalia. We use rigorous selection criteria including a community vetting process to select schools for funding. Through our local partners, we implement the SAFE Certification Program which certifies selected schools for accountability and helps build their capacity to effectively implement the SAFE funds."
At the time I was learning Wordpress, and SAFE wanted a site they could edit themselves. I used HTML, CSS, and JavaScript to create a custom Wordpress template for them. The site was not responsive and was meant to be viewed on the desktop. The nonprofit is currently offline, but you can view some of the old website pages I created here. Now that I am more familiar with UX/UI principles and processes, I decided to redesign the old SAFE site as a mobile-first site. 
Please note: I am updating my site as I complete this personal project, so please come back soon to view updates.

Role: User Experience Designer, User Interface Designer 
Programs Used: Sketch, InVision, CanvasFlip, Photoshop, Illustrator, InDesign

The old desktop website on a mobile screen.
Current Information Architecture
To better understand the information architecture of SAFE's old website, I created a site map and also mapped out the content of some key screens by sections. What I observed is that the largest part of the page is often devoted to educating the user about Somalia's education crisis/SAFE and showing the user the tangible impact of donations received by SAFE. Some sections of the website such as "Donate" and "Volunteer" were repeated in the site map and appeared in multiple places on the website.
Research
As of 2013, SAFE received the majority of it's donations through foundations such as The Coca-Cola Foundation, Cultures of Resistance Network, and The Price Family Foundation. SAFE also drove traffic to it's website through Facebook and blog posts, and received individual contributions. The goal of any nonprofit is to solicit donations, so to focus my user research, I chose to find out more about two types of donors: corporate foundation donors and individual donors. 
To begin my research on individual donors, I interviewed five people using a 22 question survey. I set out to find answers relating to these questions:
• How do individual donors arrive at a nonprofit's website? Once there, what motivates them to give?
• How often do individual donors give and how much? What type of donation do they prefer to make?
• What role does social media play in nonprofit discovery, word of mouth, fundraising, and donations?
To begin my research on corporate donors, I interviewed a professional marketer who has worked at various nonprofits for over 5 years. I also did my own research of the Coca-Cola Foundation and Price Family Foundation. I set out to find answers relating to these questions:
• How do corporate donors discover and choose which nonprofits to donate to?
• When a corporate donor arrives at a nonprofit's website, what are they looking for? 
• In what ways do corporate donors choose to allocate their funds to a nonprofit?
Using this research, I compiled two user personas: one for individual donors, and one for corporate foundation donors.
Photographs by Unsplash
After conducting my research and creating user personas, I realized individual donors and corporate foundation donors are looking for similar things on the SAFE website such as measurable impact and personal stories. I created a diagram to show how SAFE and my user persona's goals overlap.
Competitive Analysis
Since SAFE builds schools, water tanks, dormitories, and libraries, I looked at nonprofits that focus on these needs: UNICEF Schools for Africa, Charity Water, and Books for Africa. I also wanted to design a responsive landing homepage for SAFE, so I reviewed these sites on desktop and mobile. Using my personas as a guide, I focused on site areas that showed the homepage, mission, personal stories, donations, and financials/annual reports. 
I decided I would donate to each charity, giving me the full experience of visiting the charity's website to learn more, donate, and receive a donation receipt in the form of a confirmation page/email. This had the wonderful side effect of making me feel positive about making a difference, and giving me empathy for the user.
You can view the competitive analysis for UNICEF's Schools for Africa, Books for Africa, and Charity Water here.
The competitive analysis gave me insight into which pages the old SAFE site was missing, such as a page for annual reports/financials. It also gave me new ideas about how to make the existing SAFE pages more accessible for a user. The donation process I went through for the three charities gave me a greater understanding of what could frustrate and delight a user during that process. 

A Hidden Problem
It's clear from all three sites that charities struggle with how to process donations online. This could be due to credit card processing fees, platform costs, or processing/receipting costs. There could also be struggles with user security, databases, and the integration of a payment platform into the main site. If the charity doesn't have a staff or volunteer programmer, this could be a very intimidating prospect and potentially costly to hire out. 
After I donated to the charities using my credit card, I was alerted by my credit card company that I had fraudulent activity on my account. Two fraudulent purchases were made in two different states using my credit card number. I spoke to my credit card company on the phone, and they said that the fraudulent charges were made immediately after my charity donations. This was an eye-opening experience. It made me realize that no matter how fast or easy it was to make a mobile donation, that didn't matter for a user in the end if it exposed them to fraud. The user may be hesitant to donate to that charity again, or to any charity again.

A Secure Solution
I decided to go back and interview the marketer about nonprofit industry standards for integrated, secure, and mobile friendly donation platforms. She said that Blackbaud is the most popular choice for nonprofits. After talking to Blackbaud directly and investigating pricing, I decided that investing in Blackbaud Merchant Services would be worthwhile for SAFE in order to facilitate secure one-time and recurring donations. The Blackbaud platform allows for direct integration into a charity's website, provides extensive developer resources, a database, receipting and confirmation emails, automatic credit card updates, and much more, making it a valuable resource.

New Information Architecture
After completing the competitive analysis and learning more about Blackbaud, I was ready to revise the information architecture of the old SAFE site. The old organization was good, but it was missing some key pages like fundraising and financials. In addition to adding new pages, I also rearranged and combined some pages in order to make the information flow better for a user and be easier to find. 
Individual Donor Workflow
Eileen, my individual donor user persona, is browsing Facebook during her lunch hour at work. While browsing, she sees that her friend posted a status update along with a blog post from SAFE. She is interested in the headline of the blog post and taps to read more. She taps on the blog post itself, taking her to the SAFE site. She reads the blog post and connects emotionally with the content. She wants to learn more and browses the SAFE site. After learning more, she is moved to make a one-time donation. She navigates to the “donate” page and selects “one-time donation.” She enters the amount she wants to donate, billing address, and payment information. She then taps “donate” to complete her donation. She receives an email confirmation of her donation.
Corporate Foundation Donor
Andi, my corporate donor user persona, is attending a charity event for education on behalf of her work. While chatting with other event goers, she hears about SAFE. In the cab on her way home, she Googles SAFE. She taps on the search result, taking her to the SAFE homepage. She taps to learn more about SAFE’s impact, and checks to see if they have a page for financials. Confirming that SAFE does have a page for financials, she bookmarks the page for when she is back at work to learn more.
I am currently working on wireframes that reflect these workflows. Please come back soon for updates.
Back to Top