Two smartphones displayed at an angle showing the redesigned Elephaid donation screens, featuring simplified input fields and a clear progress button.
Two smartphones displayed at an angle showing the redesigned Elephaid donation screens, featuring simplified input fields and a clear progress button.

Elephaid Nonprofit App

Simplifying a high-trust donation flow to reduce drop-off and improve completion

Product Design

Product Design

UX Research

UX Research

Usability Testing

Usability Testing

Accessibility

Accessibility

Design Systems

Design Systems

System Thinking

System Thinking

Location

Edmonds, WA

Role

Product Designer

Platform

Mobile App

Catecory

Nonprofit

Timeline

June 2023 - Aug 2023

The Problem

Users were unable to complete donations due to unclear navigation, broken flows, and low trust during critical payment steps. Usability testing showed confusion between key actions, lack of system feedback, and accessibility issues that caused users to abandon the experience entirely.

Existing Experience

A wireframe of the Elephaid volunteering page displayed on a spiral notebook, showing a large hero image placeholder, form fields, and a Send button.
A wireframe of the Elephaid donation form displayed on a spiral notebook, including input fields for personal information and payment details with a Send button.

Original donation and volunteer flows showing unclear structure, inconsistent inputs, and lack of guidance during key actions.

  • Broken navigation (dead-end flows)

  • Overwhelming and inconsistent form inputs

  • Lack of feedback during critical actions

  • Confusing separation between donation and volunteer flows

Business Goal Alignment

  • Improve donation completion

  • Reduce abandonment during sensitive flows

  • Maintain trust during payment interactions

  • Support scalability for future features

  • Maintain consistency with existing brand standards

Key User Insights

Usability testing revealed several moments where users lost confidence or struggled to understand next steps.

  • Users were unsure where they were in the process

  • Multiple CTAs created decision paralysis

  • Users hesitated during financial data entry

  • Volunteer and donation flows felt mentally disconnected

  • Lack of feedback reduced confidence

Understanding End-toEnd Experience

Key breakdowns identified:

  • Users dropped off during multi-step forms

  • Lack of feedback caused uncertainty

  • Volunteer and donation flows conflicted mentally

  • Too many required fields early in the process

Key breakdowns identified:

  • Users dropped off during multi-step forms

  • Lack of feedback caused uncertainty

  • Volunteer and donation flows conflicted mentally

  • Too many required fields early in the process

Mapped donation and volunteer journeys to identify friction points

Constraints and Challenges

  • Existing branding limited drastic UI changes

  • Financial validation requirements increased form complexity

  • Shared components needed to support multiple flows

  • Accessibility improvements had to work within inherited styles

  • Scope prioritized donation completion before secondary features

Working with an Existing Brand System

The project required working within an existing brand system that prioritized emotional storytelling and visual appeal. While engaging, it was not optimized for usability in high-trust interactions such as financial input flows.

Improved usability without breaking brand consistency:

  • Adjusted color usage to improve contrast and readability in form inputs

  • Prioritized legible typography for data entry and error states

  • Introduced consistent UI patterns to reduce confusion and support user confidence

Tradeoffs and Contraints

  • Balanced reducing steps with maintaining necessary financial data validation

  • Prioritized clarity over feature expansion to avoid overwhelming first-time donors

  • Adapted the existing brand system instead of replacing it to maintain consistency

  • Focused on core donation flows before expanding volunteer and secondary features

Process

I combined research, usability insights, and system-level thinking to identify failure points and redesign the experience around clarity, trust, and completion.

  • Conducted user interviews and analyzed usability test findings

  • Evaluated competitor donation flows for clarity and best practices

  • Reorganized information architecture to separate donation and volunteer paths

  • Designed and tested low- and high-fidelity prototypes

  • Iterated based on usability feedback and accessibility needs

A wireframe of the Elephaid volunteering page displayed on a spiral notebook, showing a large hero image placeholder, form fields, and a Send button.
A wireframe of the Elephaid donation form displayed on a spiral notebook, including input fields for personal information and payment details with a Send button.

Exploring Structure: Low-fidelity wireframes for donation and volunteer forms.

Key Design Decisions

  • Simplified primary actions by replacing multiple CTAs with a single, clear donation entry point

  • Introduced clear page titles and navigation hierarchy to improve orientation

  • Improved accessibility by increasing contrast, adjusting typography, and supporting users with low vision

  • Added system feedback and validation states to guide users through required inputs

  • Removed unnecessary and invasive fields to reduce cognitive load and improve trust

Impact

  • Users completed donation tasks more consistently after simplifying form structure and reducing unnecessary inputs.

  • Clear validation states and real-time feedback improved confidence during sensitive payment interactions.

  • Separating volunteer and donation paths reduced confusion and helped users better understand next steps during testing.

  • Accessibility improvements increased readability and reduced friction for users navigating high-trust forms.

Final Designs

The final experience focuses on clarity, trust, and guided interactions, allowing users to complete donations with confidence and fewer errors.

A smartphone on a laptop keyboard displaying Elephaid’s redesigned welcome screen featuring an elephant image, headline text “Help Us Help Them,” and a call-to-action.
A smartphone resting on a laptop displaying Elephaid’s donation confirmation screen with the donation amount, transaction ID, and a prominent Contact Us button.
Left screen alt text: A mobile screen showing Elephaid’s volunteer signup form with fields for name, email, and message and a large Send button. Right screen alt text: A mobile screen showing Elephaid’s volunteer confirmation page thanking the user and offering next steps with a Contact Us button.
Left screen alt text: A mobile screen showing Elephaid’s redesigned donation form with user information fields and a Next button. Middle screen alt text: A mobile screen showing the payment step of the donation flow with credit card fields and Submit and Back buttons. Right screen alt text: A mobile screen showing the donation confirmation page with the donation amount, transaction ID, and a Contact Us button.

Outcome and Reflection

This redesign improved clarity and trust in high-risk donation flows by simplifying structure, reinforcing feedback, and prioritizing accessibility. The updated experience better supports users in completing meaningful actions with confidence while establishing a foundation for scalable design patterns.

This redesign improved clarity and trust in high-risk donation flows by simplifying structure, reinforcing feedback, and prioritizing accessibility. The updated experience better supports users in completing meaningful actions with confidence while establishing a foundation for scalable design patterns.