Elephaid Foundation App

5 min 15 sec
A mobile app UI design for Elephaid, a foundation supporting elephant conservation. The design features three screens with a curved top section resembling an elephant’s trunk. The central screen serves as the welcome page, displaying a full-screen image of an elephant with bold white text that reads 'HELP US HELP THEM' and a message below: 'Welcome to Elephaid Foundation. Together, We Can Make a Difference!' The Elephaid logo is positioned in the top left corner, and a hamburger menu icon is in the top right corner. The left screen is a donation form with a white background, a header titled 'Donate,' and an image of elephants above the form fields. The form includes input fields for name, email address, address, city, state, zip code, and donation amount, followed by a maroon 'Next' button. Below, text instructs users to proceed to complete their donation. The right screen is a volunteer sign-up form with a similar layout, featuring a 'Volunteer' header, an elephant image, and input fields for name, email address, and a message. A maroon 'Send' button is below. Both the donation and volunteer screens have footer sections displaying copyright text, along with Facebook and Instagram icons.
Redesigning the app's Donation and Volunteer pages to enhance user experience and increase engagement for the Elephaid Foundation.
Overview:
The Elephaid Foundation, a U.S.-based nonprofit for elephant conservation, launched a mobile app to engage supporters, provide educational content, and facilitate donations and volunteer registrations. However, usability issues on the Donation and Volunteer pages created friction in the user experience, leading to lower engagement. As the UX/UI designer, I identified key pain points, redesigned the interface to improve clarity and accessibility, and conducted usability testing. The goal was to simplify the donation process and boost volunteer participation, ultimately driving more conversions.​​​​​​​
Objective:
The primary objective of this project was to improve usability on the Elephaid app’s Donation and Volunteer pages, addressing issues such as complex navigation, unclear call-to-actions, and accessibility barriers. By streamlining the donation flow and enhancing volunteer sign-ups, the redesign aimed to create a more intuitive and inclusive experience. The goal was to increase donations by 10% within six months while encouraging greater volunteer engagement.
Target Audience
To ensure that Elephaid meets the needs of its diverse users, I identified two primary personas who represent the client's target audience: Kaitlyn Wilson and Sarah Miller. These personas helped to tailor the app’s features, user experience, content, marketing strategies, and personalization efforts.
Kaitlyn Wilson, 28
Occupation: Server
Education: Some college education
Traits: Passionate about animal welfare, likely to volunteer time and resources
Behavior: Has more free time and frequently interacts with the app
Kaitlyn is an enthusiastic animal welfare advocate who actively seeks opportunities to volunteer and contribute to rescue efforts. For Kaitlyn, Elephaid focuses on creating an engaging and interactive experience with features like volunteer sign-ups, community event notifications, and forums for sharing rescue stories. By fostering a sense of community and incorporating gamification elements, such as achievement badges for participation, Elephaid keeps Kaitlyn motivated and involved.
Sarah Miller, 34
Occupation: IT Specialist
Education: Master’s degree in IT
Traits: Busy professional, more likely to provide financial support
Behavior: Limited free time, less frequent app interactions, but has more discretionary funds for giving
Sarah, on the other hand, is a busy professional who is more inclined to support animal welfare through financial contributions. For Sarah, Elephaid prioritizes efficiency and simplicity in design, ensuring that the donation process is seamless and quick. Clear, concise information about the impact of donations, along with progress reports and infographics, helps Sarah stay informed and confident in her contributions.
Impact On Elephaid's Development
By understanding these personas, Elephaid can make informed decisions about feature prioritization, user experience design, content strategy, marketing and outreach, and personalization:
Feature Prioritization: Developing features that cater to both volunteer engagement and streamlined donation processes.
User Experience (UX) Design: Creating a balance between an interactive, community-focused experience for Kaitlyn and a quick, efficient interface for Sarah.
Content Strategy: Producing content that fosters a sense of community for Kaitlyn and provides detailed impact reports for Sarah.
Marketing and Outreach: Utilizing social media and local outreach to engage Kaitlyn, while focusing on email marketing for Sarah.
Personalization: Offering tailored volunteer opportunities for Kaitlyn and personalized donation recommendations for Sarah.
Problem Areas and Key Usability Issues​​​​​​​
The screen displays a 'Page Not Found' error message. The Elephaid logo is at the top, followed by the text 'Please GIVE generously!' in black. Below, 'Page Not Found' is in bold red text with a distorted effect. The bottom half features an image of an adult elephant and a baby elephant walking in a dry landscape. A maroon navigation bar at the bottom includes icons labeled 'Search,' 'Home,' 'About,' 'Give,' and 'Volunteer.'
The screen is a volunteer sign-up form. The top features an image of elephants near a water source with the Elephaid logo overlaid. Below, the text 'VOLUNTEER' is in large red uppercase letters, followed by 'Contact Us' in a slightly smaller font. The form includes fields for first name, last name, phone number, email, street, city, and zip code. Additional questions ask about annual giving, opinions on national conservation efforts, and employer matching funds. At the bottom, text reads 'Please GIVE generously! THANK YOU!' in black. A maroon navigation bar, identical to the one on the left screen, is at the bottom.
Donation Page: Users encountered a "Page Not Found" error, completely blocking their ability to donate and causing significant frustration. This issue not only hindered users' ability to donate but also limited contributions.
Volunteer Page: The cluttered layout made it difficult for users to navigate and register as volunteers. This poor design caused potential volunteers to abandon the process, as the lack of an intuitive layout deterred them from engaging further.
First Drafts
As part of the initial development process, we created low-fidelity wireframes for the donation and volunteering pages of the Elephaid app. These first draft ideas provide a basic layout and structure for the user interface design, emphasizing ease of use and consistency.
Both wireframes maintain a consistent design with the rest of the app, including the About Elephaid and Ways to Support pages. This uniformity in layout, color scheme, typography, and visual elements creates a cohesive and user-friendly experience throughout the app.
As the first draft ideas, these low-fidelity wireframes play a crucial role in ensuring that the donation and volunteering processes are intuitive and efficient. By providing a clear and consistent design from the outset, we can better meet user needs and encourage more support for Elephaid’s mission.
Solutions
A smartphone displaying the Elephaid mobile app screen rests on a black fabric surface beside a silver laptop keyboard. The app screen features a full-screen background image of an elephant walking through a misty forest with sunlight filtering through the trees. At the top, a maroon header contains the Elephaid logo on the left and a hamburger menu icon on the right. Centered on the screen, bold white uppercase text reads 'HELP US HELP THEM.' Below, a welcome message in white text states, 'Welcome to Elephaid Foundation. Together, We Can Make a Difference!' At the bottom, a maroon footer contains copyright text, '© 2025 Elephaid,' along with Facebook and Instagram icons.
Transitioned to high-fidelity mockups, ensuring a visually appealing design aligning with the client’s branding. Enhanced the user interface to provide a seamless, secure experience for donating and volunteering. Incorporated essential functionality to streamline the donation process and simplify volunteer registration.
Consistency in Design
The About Us and Support pages maintain a consistent design with the rest of the app. This consistency is achieved through a uniform layout, color scheme, typography, and visual elements, creating a cohesive and user-friendly experience throughout the app.
Improvements to the Donation Page
The revamped donation page for Elephaid introduces a more structured and user-friendly flow, ensuring a seamless experience for donors. The process now includes three essential stages: the Customer Info Page, the Payment Page, and the Confirmation Page.
1. Customer Info Page
The Customer Info Page is designed to collect the donor's personal information efficiently. This page includes fields for the donor's name, email address, physical address, city, state, zip code, and the donation amount. A “Next” button at the bottom allows users to proceed to the next step with ease.
Key Benefits:
Streamlined Data Collection: Ensures that all necessary information is gathered in a single step.
User-Friendly: Simple and straightforward, guiding donors through the process without overwhelming them.
Clarity: Provides clear instructions and prompts, reducing confusion and errors.
2. Payment Page
The Payment Page is focused on collecting payment details securely. Donors can enter their name, card number, expiration date, and CCV on the card. This page also allows users to review and edit their donation amount if necessary, with “Back” and “Submit” buttons at the bottom to navigate the process.
Key Benefits:
Security: Ensures that payment details are collected safely and efficiently.
Flexibility: Allows donors to review and adjust their donation amount before finalizing the transaction.
Efficiency: Provides clear instructions and an easy-to-navigate layout, making the payment process quick and hassle-free.
3. Confirmation Page
The Confirmation Page serves as the final step, confirming that the donation has been successfully processed. This page displays the donation amount, and transaction ID, and informs the donor that a confirmation email will be sent shortly. Additionally, it provides a “Contact Us” button for any questions and encourages donors to follow Elephaid on social media for updates.
Key Benefits:
Reassurance: Confirms that the donation has been successfully processed, providing peace of mind to donors.
Transparency: Displays detailed transaction information, including the donation amount and transaction ID.
Engagement: Encourages donors to stay connected with Elephaid through social media and provides a clear point of contact for any queries.
Improvements to the Volunteer Page
Volunteer Sign-Up Page
This page collects essential information from potential volunteers.
Fields to Include:
Your Name
Email Address
Message
Button: "Send"
Key Benefits:
Streamlined Data Collection: Gathers all necessary information in a single step.
User-Friendly: Simple and straightforward, guiding volunteers without overwhelming them.
Clarity: Provides clear instructions and prompts, reducing confusion and errors.
Volunteer Confirmation Page
This final page confirms that the volunteer sign-up form has been successfully submitted.
Content to Display:
Thank you message for the user's interest in volunteering
Confirmation of successful message submission
Instructions to check email for further steps
Button: "Contact Us"
Social media encouragement
Key Benefits:
Reassurance: Confirms that the sign-up form has been submitted, providing peace of mind to volunteers.
Transparency: Displays detailed submission information.
Engagement: Encourages volunteers to stay connected through social media and provides a clear point of contact for any queries.
Impact and Results
The redesigned Donation and Volunteer pages successfully removed barriers, enabling users to effortlessly complete donations and register as volunteers. By streamlining the layout and enhancing the overall user experience, we empowered users to contribute to Elephaid’s mission with greater ease and efficiency.​​​​​​​
Contact Me

You may also like
↑Back to Top