Disaster Recovery

At a Glance

Background

The stakeholder lives in the Philippines and sees constant devastation from monsoons. He wanted to create a site that:

  1. Connects users with disaster relief crowdfunding campaigns

  2. Connects users with disaster relief volunteer opportunities

  3. Makes it simple for NGOs and individuals coping with natural disasters to create crowdfunding campaigns and seek volunteers

Time Frame

I worked part-time on this project for 4 months, from Sept - Dec 2023.

My Role

I was assigned to work on the pages connecting users with disaster relief crowdfunding campaigns. I was the product designer, responsible for the layout, functions, and content. After completing the low-fidelity designs, I handed them off to a visual designer. I received occasional mentorship from a more senior UX designer.

Tools

Figma, Miro

Deliverables

Competitive analysis presentation, site map, journey map, desktop wireframes, mobile wireframes

Competitive Analysis

My first step was to conduct a competitive analysis of charitable donation and crowdfunding sites to identify current industry standards and best practices. Then, I created a slide deck and presented my findings to the stakeholder.

Nine Competitors

I analyzed nine sites: GoFundMe, Ketto, Global Giving, Just Giving, MightyCause, Fundly, DonorsChoose, IndieGoGo, and Kickstarter. Apart from IndieGoGo and Kickstarter which crowdfund for entrepreneurship and innovation, the sites all had charitable purposes.

Trends

I primarily analyzed the competitors’ landing pages, search pages, and campaign pages. In particular, I noted how similarly competitors organized information and their efforts to convey transparency. trustworthiness, and honesty.

During this process, I identified 18 trends and tracked how frequently they were used. This data is displayed in the graphics below, with green indicating they were present. I also gathered pros and cons of each feature and considered them in the context of this project.

Research Questions

  1. How does the site help users find causes they care about?

  2. How does the site help users find causes nearby?

  3. How does the site help users find causes relevant to current events?

  4. How does the site display/filter/sort search results?

  5. How does the site motivate users to donate?

View Presentation

I performed a competitive analysis of 9 charitable donation and crowdfunding sites.

Once opening the presentation, please tap the screen to navigate through the slides. Tap images to expand them.

To view my findings, please use your arrow keys to navigate through the competitive analysis presentation. Click on images to expand them.

Site Map and Navigation

The desktop site map I created is pictured below. From the top menu bar on the Landing Page, the user can access the About Page, Search Page, NGO Page, Log In Page, and Profile Page.

I designed flows for the Landing Page, the Profile Page, and the Search process. The Search flow includes three pages: the standard Search Page, the map-view Search page, and the Campaign Page.

To make the mobile web app as easy to navigate as possible, I used both a top and a bottom nav bar. The top nav contains a hamburger menu with the same menu options as the desktop version. The bottom nav has icons representing the Landing Page, Search Page, and Profile Page.

Journey Map

I created a journey map for the persona “Aamir,” a Morrocan-American who wants to donate money to survivors of the Marrakesh earthquake. This empathy-building exercise helped me start thinking about users’ desires and pain points at each stage in the flow. In particular, it provided insights that were useful when designing the search flow. It also reminded me that users seek transparency and trustworthiness when they are considering donating their hard-earned money.

Transparency and Trustworthiness

As I learned from my competitor analysis and journey map, users want to sense transparency and trustworthiness before they donate their hard-earned money.

I thoughtfully included elements in my designs that increased trust and transparency. These elements include:

  1. “About Us” page

  2. Highlighted “Trust and Safety” section on the landing page

  3. Campaign contact person who can answer users’ questions

  4. A “Where Your Donation Goes/Donation Impact” Section with suggested giving levels

  5. Campaign FAQs section

  6. Campaign updates section

  7. Campaign comments/discussion section

  8. A progress bar showing the amount raised towards the goal

Next, I created user flows for searching for campaigns, donating, and customizing a user profile. Below are three flows a user may take to find a campaign. They may use the “Featured Campaigns” section or the “Browse Categories” section on the Landing Page, or they may use the search feature.

User Flows

High-Level Wireframes

First, I created high-level wireframes so I’d have a sense of the overall layout before working on more detailed wireframes. Since mobile devices are more widely used for web browsing, I did the mobile designs before the desktop designs.

Keeping in mind my findings from the competitive analysis, I created high-level wireframes for five pages:

  1. Landing Page (pictured here)

  2. Profile Page

  3. Search Page - List View

  4. Search Page - Map View

  5. Campaign Page

The high-level wireframes for the Landing Page are pictured here. The sections on the Landing Page (and all other pages) were strategically chosen based on my findings from the competitive analysis.

For example, 9 competitor sites had a “Featured Campaigns” section on the landing page spotlighting campaigns that were currently relevant, popular, etc. I made this the first section on the landing page so users could easily find campaigns related to recent natural disasters. I chose to put a “Browse Categories” section second, giving users a visual overview of the site’s content and helping them quickly find what they are looking for. Seven of the 9 competitors used a “Browse Categories” section on their landing page.

Mid-Level Wireframes

Dashboard Page

On this page, the user can view their recommended campaigns, favorite campaigns, and donation history, as well as update the profile information they provided during onboarding. This profile information includes basic demographic and contact information, interests, and skills, and is used to generate the recommended campaigns.

The recommended campaigns are featured on the top of the page, and a sticky sidebar navigation menu is used to navigate between the profile information, favorited campaigns, donation history, and account settings.

Search Page - List View

I decided to include a map view on the search results page since it enhances user experience by offering greater interactivity, customization, and context. It will help users who want to donate to campaigns in specific areas by providing a visual representation. I decided it would be best for the map to display the filtered search results.

Here is an annotated version of the Search Page wireframe in which I presented multiple options for the location of the map view feature. The annotations express the position of the feature and the behavior it would elicit.

When thinking about the ideal positioning of the map view feature, I wanted the feature to be easy to find and for it to be clear that the map would include all the filtered search results. For this reason, I ultimately put the map view at the top of the page near the search bar and filter options. It is one of the first things the user sees on the page, and the proximity to the filters implies the map view will include the filtered search results.

Search Page - Map View

The map view shows all the filtered search results. Therefore, the category filter bar is still visible rather than just the location selector. The user can easily update their search in real time and the pins will update.

By default, the map will be zoomed out enough that all the pins are visible. The user can click on a pin to see a modal containing a campaign preview. Clicking the modal takes the user to that campaign’s page.

The user can easily toggle back to the list view using the same element they used to turn on map view.

Campaign Page

The sections on this page were carefully chosen based on the competitive analysis, the project’s context, and my knowledge of UX best practices and product psychology. I made sure to have thoughtful explanations for each of my decisions.

Since tab bars were popular among competitors, I included a tab bar for quick navigation. However, I did not want any content hidden behind tabs. I designed the page so that using the tab bar is optional: users can continue to scroll to see the “Discussion," “Updates,” and “FAQ” sections.

I put the “donation feed” element above the “donation impact” element so the user first sees that many others have donated (positive social pressure). That way, the user will be more inspired to donate when their eyes travel downwards to the “donation impact.”

I put the “Organizer” element low on the screen since that information will already be in the campaign headline. Also, the “Contact Organizer” CTA is probably a lesser-used feature (present on 2 of 9 competitor sites). While I included it to provide transparency and cultivate trust among users, I decided it did not need to be front and center.

The “Add to Favorites” button is low on the screen since the primary goal is not for the user to favorite the campaign for later but rather to donate immediately. It is also not nearly as important as the “Donate Now” button, so positioning it nearby would only distract from the primary “Donate Now” CTA.

Conclusion

This project taught me the importance of conducting an in-depth competitve analysis. If I had put less effort into the competitor analysis, my designs would not have been as strong. Seeing the industry trends provides perspective on best practices and inspires the design process by illuminating the strengths and weaknesses of other sites. Since it essentially is crowdsourcing ideas, it lends to a productive starting point for creating user flows and wireframes.