M.ALI AYAN

AVAILABLE FOR FREELANCE AND PROJECT-BASED WORK STARTING FROM NOVEMBER 11, 2024

A laptop mockup with nonprofit organization UX UI CRO design and optimization screen includes donation form and an African child image on the hero. The laptop is on a gray rectangle base. Yellow background.

Donation Page Optimization of a
Globally Recognized Non-Profit Organization

Nonprofit Organization UX/UI/CRO Design and Optimization

Overview

This project was for a globally recognized non-profit organization responsible for providing humanitarian and developmental aid. I managed the UX/CRO project to improve the website's usability and increase the conversion rate of donation forms.

Briefly, this is a nonprofit organization UX/UI/CRO design and optimization project.

Client

Anonymous

Year

2017

Main Goal

The non-profit organization was not happy with the conversion rate of their donation forms and the usability of their website. The main aims were to improve the overall user experience and increase the conversion rate of the donation forms.

Process

First, I conducted usability testing to understand the brand image, identify user needs and demands, find issues with the website and donation form, and gather hidden thoughts and insights to improve the existing website.

Then, I created a UX/CRO report to present the issues, insights, and design suggestions.

UX/CRO Problems and Solutions

Here, I’ll share some key insights and improvements from this nonprofit organization UX UI CRO design and optimization project.

Problem #1 – General Structure:

The initial website had three different microsites. One was about the main purpose, donation, and the others were related to buying gifts. This structure created significant visual and cognitive load for users and caused confusion about the differences. Users didn’t know how to proceed.

Solution: The new design has two tabs, “Donation” and “Gifts.” The main aim of this change is to create a smoother user flow with less friction.

Problem #2 – CTA Button and User Flow:

The website had two “Donate” links above the fold that were very close to each other. One was in the navigation menu, and the other was a CTA button in the hero section.

Users tended to click on the CTA button due to its higher order in the visual hierarchy, but both links led to different user flows. The menu link opened a page with options for monthly and one-off donations, while the CTA button opened a page only for monthly donations.

As a result, some usability testing participants couldn’t find the relevant page to make a one-off donation.

Solution: The menu link text was changed and made smaller. The CTA button in the hero section was removed, and a form that included both donation options was added instead.

Problem #3 – Wording:

The main description of the form was “Wherever it is needed most.” However, users couldn’t understand the meaning of this slogan, so they didn’t know where their donation would be used if they donated monthly.

Solution: The wording was changed to “Your regular donation saves lives,” and an explanation was added to show where the donations would be used.

Problem #4 – Content:

The initial website displayed some numerical values related to the areas they worked in, but this data was generic and not about what the fund agency actually did. Therefore, it was not meaningful for potential donators, who couldn’t see the potential impact of their donations.

Solution: New content was added to show what the fund agency had achieved to date, highlighting the potential impact of donations.

Problem #5 – Predefined Donation Options:

There were some predefined donation amounts, but they all shared a generic explanation stating that each $25 donation would help a child with educational needs. Users had to calculate the donation amount themselves because there was no guidance for the prefilled amounts.

According to their feedback, users wanted to understand the final effect of their donation immediately without any effort. They preferred to know how many children they could help rather than the donation amount itself.

Solution: The design of the form was changed, the generic explanation was removed, and different prefilled amounts with specific explanations were added. This change allowed users to see the final impact of their donations immediately.

Problem #6 – Custom Donation Option:

There were predefined donation amounts and a field to enter a custom amount, but all fields had the same design and were listed on the same row. Participants in the UX research couldn’t notice the custom amount field and had to continue with predefined amounts.

Solution: The design of the form was changed to include a separate input field for custom amounts. This field was placed away from the other fields and given a distinct design to make it visually noticeable.

Outcome

UX RESEARCH

CONVERSION RATE OPTIMIZATION

AUDIT REPORT

Take a Look at My Other Works

develop-coding-web-design-coding-web-template.jpg

UX RESEARCH & CUSTOMER JOURNEY MAPPING

Leader e-Commerce Website in Turkey

In this UX project, I was a member of the UX team in an agency and was responsible to conduct UX research before creating a customer journey map. The purpose of the project was understanding user behaviors and getting user insights in the mom-child category.

top-view-of-gadgets-near-wooden-blocks-with-ux-design-lettering-website-design-template-and-green.jpg

UX RESEARCH & ACCESSIBILITY

One of the Top 3 Banks of Turkey

This project was about improving the usability of the mobile banking app for users who suffer from visual impairment. I conducted usability testing sessions with these users by screen sharing and VoiceOver, the screen reader built into Apple devices.

top-view-of-typewriter-and-wooden-cube-with-text-brand-on-wooden-background-.jpg

UX AUDIT & CONVERSION RATE OPTIMIZATION

ContactMonkey

I audited the existing website of ContactMonkey. After this audit and benchmark of competitors, I recommended some UX and CRO improvements.

top-view-of-gadgets-near-wooden-blocks-with-ux-design-lettering-website-design-template-and-green.jpg

WORDPRESS DEVELOPMENT

ashure

I developed the website of ashure, a manufacturer of a traditional Turkish dessert in the USA. I collaborated with one of my freelancer fellows for the branding of the product including logo and packaging designs.

top-view-of-typewriter-and-wooden-cube-with-text-brand-on-wooden-background-.jpg

WORDPRESS DEVELOPMENT

MetaTongue

This project was the development of the website of a company that has translation and communication solutions services. I collaborated with one of my freelancer fellows for the branding/logo design.