Rahima Foundation provides a safety net to low-income Bay Area residents by supplying monthly groceries, rental assistance, and hot meals. Their new site encourages users to volunteer with and donate to the organization.
Rahima Foundation
2018
Role
Product Designer
Skills
Product Design, Content Creation, Graphic Design
Tools
Adobe Photoshop, Squarespace, Canva, SignUp Genuis, MailChimp
The Issue
Silicon Valley struggles with a hunger rate of 26.8% (more than double the average hunger rate in America). A total of 720,000 people out of 3 million Bay Area residents live with food insecurity. Rahima Foundation was created in 1993 to combat these statistics and it has impacted over 540,000 lives since then. In order to cover their programs, while maintaining a 5% operational cost, Rahima Foundation heavily relies on donations. As of 2018, the majority of these donations are received via their website. However, their old website was aesthetically overwhelming and outdated, which alienated the technologically advanced residents of the Bay Area.
Rahima's Old Website
Rahima Foundation's old website featured aesthetically overwhelming content (e.g. 7+ colors, unrelated images, some difficult to read font).
My Task
My priorities in re-designing the website:
-
Transforming existing content into a cohesive, aesthetically enticing, and easily readable website that caters to their wide audience age range
-
Creating and displaying text, statistics, and regularly updated announcements that attract old and new donors
-
Optimizing front-end and back-end to streamline the volunteering and donating process
-
Integrating the website with other digital presence to create a modern and united brand
How I Approached the Re-Design
In order to accomplish the aforementioned, I executed the following:
-
Conducted a content audit
-
Established a new brand tone and voice
-
Wrote or edited compelling content featured on the website
-
Designed website on Squarespace
-
Orchestrated the integration of new products (MailChimp, SignUp Genius) into the company and website
-
Produced graphic design for both the website and other brand revamping (e.g. new banner, social media)
Documents:
The Proposal
The slideshow below (or click here if you're on mobile) is my website proposal, as first pitched to the Rahima Foundation.
In it, you will find:
-
Project requirements
-
Website purpose
-
Target users
-
Design goals
-
Sitemap
-
Mockups
The Execution
Simplicity
My main priority was to simplify the aesthetic appearance and content of the website. I did so in a few ways:
First of all, the original website had 10 different colors on the homepage. In order to have a cohesive theme throughout the site, I chose to follow the 30-60-10 rule and chose three colors that came from the logo itself (a lighter blue, a darker blue, and white). All headers were with the lighter blue, all text was in the darker blue (to make it easier to read), and all backgrounds were white. I followed a similar tactic with font--the original website featured a variety of fonts. I chose two fonts, one for headers and the other for text, that matches throughout the site. These simplifications allow users to concentrate on the message itself, rather than spend energy processing colors and fonts. (Fig 1)
Next, I simplified the navigation process. In the old website, users had seven options in the main menu, eight drop-down options under "About", and eight drop-down options under "Programs" (23 navigation options total). In the re-design, I featured five key links in the navigation bar, four medium-important options under "About", and four less important links in the footer (13 navigation options total). The most important content was featured on the home page to minimize the amount of links users had to click through. This simplification allows users to focus on and have access to the most important links immediately while giving them access to other links if they are interested. (Fig 2)
Lastly, the text in the original website featured jargon and less relevant content. The re-design needed to cater to a wide array of ages, from young adults to the elderly. Therefore, I wrote or edited all text on the website to make things as concise and easily understandable as possible. The text also needed to be easily readable, as many users (target users of Rahima) we originally tested with had issues reading smaller text. Therefore, the text was larger and the navigation bar was given a white background to allow the text to pop out (Fig 2). I also made sure font size and spacing was consistent across the website, as that was a distracting inconsistency in the original website. In the bigger picture, the text re-design was not just about the text itself, but how it fit into the website in general. The original website had a minimal about of white space, which was overwhelming. In the re-design, the text was organized in a way to optimize white space instead (Fig 1).
White Space
Fig 1. In order to simplify the website's appearance, I used white space to provide visual breathing room. Additionally, I unified the website by having consistent fonts, font sizes, and colors for all text. This allows users to focus more on the message.
Simple Navigation
Fig 2. In order to optimize the website's appearance and user experience, I simplified navigation. There are 13 navigation links total, divided by importance. The most important links are at the very top, the second most important links are listed in a drop-down menu under "About", and the third most important links are offered at the bottom, in the footer. This way, users can easily find what they want without having an overwhelming amount of options. When I tested with existing Rahima users, I observed that many had difficulties reading the navigation menu. Therefore, I placed the white background behind it to make it stand out against its background.
Seamlessness and Integration
It was also important that all aspects of the website were seamless, in order to optimize donation and volunteering rates.
First, there needed to be consistency throughout the website. I made sure that font size and text spacing was consistent throughout the website, as that was distracting in the original website. Then, I made sure that each page had a similar layout. All page headers were centered with a large donate button on the right of it. On the home page, all sections had a medium-sized "donate" button on the right. All program pages had the donation or volunteering options in the same place. These little items ensured that users would not have to exert a lot of mental energy once they were ready to donate or volunteer--they would always know where to look and the button would always be within eye range. (Fig 3)
It was also important to promote Rahima's new social media. Because the social media icons were always in the same location in the footer, users could smoothly transition on to those digital pages from the website and continue learning about the organization (Fig 2).
Consistent Layouts
Fig 3. All pages and sections in the website had a similar layout. Crucially, the donate button was always placed on the top right corner of the page/section. This way, users wouldn't have to exert mental energy in finding it.
Attracting the User and Gaining Trust
It is crucial, with charities, that there is a very strong relationship between donors and organizations. Charities survive based on donations. In order to donate, users have to trust the organization and feel that their money is going into values they believe in. Therefore, one of the most important design criteria was making sure that Rahima displayed credibility and trustworthiness.
As soon as the user arrives on the homepage, their attention is grabbed by a very simple but captivating image (Fig 4). This motivates users to continue engaging with the content and exploring. Then, one of the first things the user sees when they scroll down is an impressive list of partners. Users who already trust organizations like "Second Harvest Food Bank" immediately know that they approve of Rahima's work. Further below, I used graphic designs and large text to emphasize a few credibility-building statistics, such as "The Rahima Foundation has impacted over 540,000 lives since 1993" (Figs 5 and 6). Before the user even gets to the bottom of the home page, they have already seen several things that can help them trust Rahima. Then, once the user has gained trust, there is a Call to Action at the bottom of most pages, which easily converts that trust into tangible benefits for Rahima (Fig 7).
Attention Grabbing Homepage
Fig 4. An attention-grabbing home page
Bite Size Facts
Fig 5. These images and bite-size statistics help users easily understand process why they can trust Rahima.
Fig 6. I created these graphics as a way for users to easily understand the facts on why Rahima is necessary.
Call to Action
Fig 7. A call to action at the bottom of most pages helps convert trust into tangible actions.
Bonus!
Bonus!
Half of Rahima's employees felt comfortable with their photo being up on the website, while the other half didn't. Therefore, an issue arose--what could be done to highlight individual employees in a way that was consistent for everyone? I chose to create "images" of everyone's initials, which created a unified but abstract view of the team.
In conclusion,
Over the course of 2018, I worked with the Rahima Foundation to build a modern and aesthetically pleasing website that caters to their technologically-advanced audience. After the website launch in January 2019, users will be able to use this website to volunteer and donate to their favorite charity.