Home
Work
About
Resume
Contact

Redesigning the Donation Experience

Boosting Donations and Reducing Friction by 66%
Updating an outdated website into a modern, user-friendly platform that reduces friction scores by 66%. This features an intuitive donation process, improved navigation, engaging storytelling, and a cohesive brand identity.
PRoject overview

We Help and Care (WHC) is a non-profit charity supporting humanitarian and development operations in Southeast Asia, particularly in Myanmar. The organization was facing challenges with user engagement and involvement, primarily due to an outdated website. I aimed to transform their website, have a substantial impact on the organization's effectiveness and reach, and raise awareness about the hardships faced by people in Myanmar.

TIMeline
Jan 2024 - Present
Skills
UX Design
Visual Design
Prototyping
TOOLS
Figma
Stark Plugin
Slack
Notion
Zoom
team
UX Designers (3)
UX Researchers (3)
Project Managers (3)
The Problem

Donors struggle to understand WHC's projects and their impact

User interviews revealed trust and transparency concerns with the current website due to a lack of clear information. The vague language makes it challenging to understand the organization’s purpose.
Before & After

01 Discovery and Research

Identifying areas of improvement

WEBSITE AUDIT

I conducted a comprehensive audit of WHC's website, identifying issues across four key domains:

Information
Lack of updated content and unclear expectations
Technical
Visible unfinished code and inconsistent language use
Design
Disabled buttons and inconsistent use of photos and text
Copywriting
Grammatical errors and inappropriate tone
design
Stock Imagery
Images used appear as generic stock photos and don’t clearly convey the mission of the organization affecting the design domain.
solution
Enhance Imagery
Use real and compelling photos that illustrates the organization’s mission.
information
Lacking Calls to Action
The page lacks sufficient call-to-action prompts. Existing buttons are generically named as “Read More” without specifying benefits to user.
solution
Improve Calls to Action
Provide users with more calls to action. Design buttons that are actionable and use labels that describe what the action will achieve.
design and copy
Poor Donation UX
The donation process isn’t wired to international audiences, lacking key features like credit card donations. The background image has low contrast, making text hard to read.
solution
Simplify Donations
Donation process needs to be redesigned completely with clear CTAs, flexibility in donation frequency, control over donation usage and internationally relevant gateways to donate.
LINK TO FULL AUDIT

Gaining a better understanding of the competitors

COMPETITIVE ANALYSIS

I analyzed similar non-profit organizations to identify best practices in design and areas for differentiation.

Save the Children
Save the Children's website excels with clear navigation, compelling storytelling, and strong donation and advocacy calls-to-action. Increasing transparency with regular updates on success stories, impact metrics, and financial information could further build trust.
What is done well?
  • Engaging Media
  • Clear CTAs
Feeding America
Feeding America's simple UX/UI highlights its mission, with easy navigation, compelling storytelling, and impactful imagery. It features clear calls-to-action, transparent sponsor details, diverse donation options, and educational resources.
What is done well?
  • Transparency & Impact
  • Action-oriented CTAs
What did we take from this?
The main takeaways were that competitors had more engaging media, action-oriented CTAs, transparency and impact. By identifying these gaps, we were able to tailor our solutions to make improvements with the design and copy.
LINK TO FULL COMPETITIVE ANALYSIS

Defining our target audience

User Research and Personas
I collaborated with the UX Research team to develop user personas focusing primarily on donors as our target audience. This process allowed us to maintain a focus on user motivations while developing user flows.
What did we take from this?
Given that we have international Burmese donors, this informed our design of the donation process to include relevant international banking information.

Improving organization of the user journey

Information Architecture
I conducted workshops to map out the customer experience of the donor, considering the stages of awareness, engagement, conversion, retention, and loyalty.
What did we take from this?
The creation of a new sitemap informed the overall website structure as well as changes to the navigation.
Site Map

02 Wireframing and Prototyping

From insights to reality

Developing a sitemap allowed us to create low-fidelity wireframes for essential pages (Homepage, Donations, Projects, Contact, Blog, About Us) while incorporating key UX design principles to ensure a cohesive and user-friendly foundation across various devices (Desktop, tablet, mobile)

low-fidelity News page desktop wireframe

03  Visual Design and Branding

Creating consistency in design

Following the initial designs, I recognized the need for a comprehensive design system to ensure consistency across the website and streamline future development. I conducted a branding workshop to establish: Brand Vision, Logo, Voice and Tone, Color Palette, Typography, Imagery, Iconography, UI Elements, Layout and Grid System
Typography Moodboard
Brand Colors
Text Colors
LINK TO FULL BRANDING DOCUMENTATION
Key decisions:
  • Shifted from orange to blue as the primary color for better ADA compliance
  • Chose sans-serif fonts (Klara and Open Sans) for improved readability and modern feel
Design System Creation

I created a comprehensive design system including: Brand Overview, Voice and Tone, Color Palette, Typography, UI Elements (buttons, forms, navigation, menus, interaction design), Imagery Guidelines, Layout, Grid & Spacing

Brand Colors
Final Typography
LINK TO FULL DESIGN SYSTEM
Implementation
We published the design system as a Figma library, allowing all team members to access and use consistent components and styles throughout the design process.

From concepts to final design

High-Fidelity Prototypes

With our new design system in place, I created high-fidelity prototypes based on the approved mid-fidelity wireframes and the new brand guidelines. This included:

  • Implementing the new color scheme and typography from our design system
  • Utilizing custom UI components created in our design system
  • Incorporating imagery that aligns with WHC's mission and our newly established guidelines
LINK TO FULL PROTOTYPE
Key improvements

A highlight of the main enhancements: 

  • Streamlined navigation to simplify the donation process.
  • Enhanced visual hierarchy to guide users’ attention.
  • Updated design elements for a more modern look.
Before
After
Improved visuals that are personal to the mission of WHC. UX copy was improved to provide info to build donor trust and encourage them to initiate a donation.
Before
After
The information and copy was improved to make it easier to clarify the organization's mission and foster user trust.
Before
After
Removed redundant information such as the description and the equipment costs diagram to present info in a concise manner. Updated content with recent, relevant news from Myanmar to relate to readers and clearly state purpose.

Testing to provide better conversion

USABILITY TESTING

I collaborated with the UX Research team to conduct usability tests, focusing on:

  • User reactions to content
  • Trust and transparency perceptions
  • Navigation and information architecture
  • Overall engagement with the new design

User satisfaction ratings revealed we reduced friction scores by 66%.

04 Outcome and Impact

Lessons I Learned

Balancing stakeholder needs with user requirements is crucial in non-profit projects.

Collaborative workshops are invaluable for aligning cross-functional teams.

Iterative design process allows for continuous improvement based on user feedback.

Accessibility considerations should be at the forefront of design decisions.

Creating a comprehensive design system early in the process can significantly streamline design work and improve overall consistency.

Next case study
Next case study