Raindrop | My Site

Background

The Raindrop Foundation is a non-profit organization founded in Houston in 2000 by Turkish-Americans. Its mission is to promote education, charity, and cultural exchange as a means of fostering understanding and collaboration between diverse communities. The foundation serves as a bridge between Turkish and American cultures, organizing cultural events, charity initiatives, and dialogue programs.

The problem & objective

The current Raindrop Foundation website doesn’t effectively convey the value of the organization or clearly communicate what the platform is all about. Additionally, it struggles with outdated content, inconsistent updates, and a lack of visual appeal, hindering user engagement.

We want to redesign the website to create a visually appealing, user-friendly, and accessible experience that enhances its online presence, effectively showcases events and activities, reaches a broader audience, and drives participation.

My design process

Identifying opportunities from local nonprofit websites

I started my research by exploring similar nonprofit organizations in Houston to analyze their website structure, ease of use, and functionality. This helped identify opportunities for improvement and ways to make the website stand out.

Opportunities for improvement:

Cluttered navigation & unclear CTAs: Raindrop can simplify navigation and highlight CTAs for better engagement.
Lack of mission & donation impact: Featuring the mission and donation impact can build trust.
Disorganized homepages: A clean, structured homepage with key content can guide users effectively.
Sponsors & board visibility: Showcasing sponsors and board members can enhance credibility.

Understanding the needs of the Raindrop community

I conducted user interviews with five Raindrop community members to explore their needs and challenges with the Raindrop Foundation's website and overall engagement. Participants, aged 18 to 50, included donors, leaders, event attendees, and lifelong community members, providing diverse perspectives. I then put together user insights to identify key themes and common pain points.

Key frustrations & insights

Outdated & Incomplete Info: Users noted outdated events, missing details, unclear updates, and unengaging homepage content.

Inadequate Event Updates and Notifications: Users were frustrated by the lack of a functional event calendar and last-minute announcements.

Lack of Clarity & Visibility: Users found the mission unclear, the hero image confusing, and the donation option hard to find.

Website Not Preferred for Updates: All participants preferred getting updates via word of mouth, social media, or community committees over the website.

Building user empathy

Based on insights from user interviews, I created personas representing the key users who engage with the website to quickly revisit their needs and frustrations.

Turning Insights into Design Opportunities

Taking insights from the competitor analysis and user interviews, I reframed the problems into a single “How might we” question to guide my ideation process:

"How might we create a clear, engaging, and easy-to-navigate website that effectively communicates its purpose and meets users' needs?"

Turning user needs into actionable features

Having synthesized user pain points and needs into key themes, along with the research conducted so far, I developed a feature list based on key findings and prioritized them accordingly.

Screenshot+2025-03-08+at+12.46.56 PM.png

Refining the sitemap for better user experience

Keeping the existing sitemap intact, I made a few adjustments based on my key findings and user needs. The main changes include:

Added a Board of Directors section to the About page.
Moved the Accounting page from Services to About for better organization.
Added Sub-Organizations under the Services section.

Illustrating user navigation

With the sitemap in place, I focused on mapping out user flows to illustrate how users would interact with the various features. I created two flows that addressed the core problems I was trying to solve.

Dynamic event calendar: The user can view a dynamic event calendar that clearly displays past and upcoming events, so they can stay informed and plan ahead.

Event highlights section: The user can view event highlights with pictures or articles from the latest events displayed on the homepage, so they can stay updated and remain engaged with the foundation's activities.

Rebuilding the website layout

After gathering all the data, I started rebuilding the layouts to bring the insights into a tangible structure.

Before introducing new pages and features, I first redesigned the homepage to enhance functionality and improve user experience.

Before

After

Improved homepage structure by placing the mission statement at the top, followed by clear CTA buttons for better navigation.

Added a dynamic event calendar to enhance user experience and keep events organized.

Included sub-organizations to address user confusion about their roles and functions.

Integrated testimonials and sponsor logos to build trust and credibility.

Event registration feature:

A streamlined sign-up experience allowing users to register for events and subscribe to alerts and updates. Previously, users didn’t have enough information about the event on the website, causing frustration.

Sub-organizations page

A new section was added to the homepage, allowing users to navigate to a blog post that highlights all sub-organizations of the Raindrop Foundation for better awareness. Previously, this section did not exist, which caused user confusion.

Fine-tuning the experience through testing

I conducted a usability test with five moderated participants to evaluate the redesign of the website. The primary goals were to determine if the redesign meets users' needs and assess whether it has become a more efficient and useful platform.

Key findings & insights

5/5 users said the new design is effective, complete, and functional.
3/5 users had trouble noticing the "Sign up for alerts" option and suggested better visibility, such as moving it under the registration form.
2/5 users wanted a visual representation of the organization on the homepage, like a slideshow or images of past events.

Making the final iterations & high fidelity screens

To address user concerns about the lack of visual representation on the homepage, I added a hero image while keeping the video.

Since users had trouble noticing the "Sign up for alerts" option on the confirmation screen, I simplified the form by integrating it as a checkbox within the registration process.

Final high-fidelity prototype

The final prototypes include both desktop and mobile versions, ensuring a seamless and responsive web design experience.

Takeaways and challenges faced

During my research phase, I placed extra focus on competitor analysis since most common competitors had similarly structured websites that didn’t fully meet user needs. This led me to expand my approach, exploring a broader range of design inspirations beyond direct competitors.

I learned that effective competitor analysis isn’t limited to immediate industry peers—branching out to indirect competitors and well-designed websites can provide valuable insights and innovative solutions.

Impact

Through research and testing, I redesigned the Raindrop Foundation’s website, improving usability, functionality, and overall user experience, making the site more engaging.