Elephaid Foundation AppAn organization focused on protecting the declining global elephant population, they connect their supporters and sponsors with opportunities to donate and volunteer.
Overview
Elephaid Foundation is an organization focused on protecting the declining global elephant population. Its app connects supporters and sponsors with opportunities to donate and volunteer.
Their prototype needed improvements to address various errors, such as the donation page that contained functionality issues while receive donations.
My Role
I evaluated and redesigned the existing app prototype, focusing on usability, navigation, accessibility, and the donation experience. I also incorporated the organization’s existing brand identity while improving forms, calls to action, typography, and task flows.
Tools: Adobe XD
Focus: UX Evaluation • UX Research • Usability • Accessibility • Information Architecture • UI Design • Prototyping
01 – UX Evaluation & Problem Identification
Original Prototype
I began by evaluating the existing Elephaid Foundation app prototype to identify usability and functionality issues.
Several problems affected the user experience, including a broken donation page, unclear navigation, cropped headings, insufficient contrast, inconsistent typography and icon sizing, and low-quality imagery.
Because the donation experience was a key business goal, improving the functionality and clarity of the donation flow became a primary focus of the redesign.
02 – Research & Design Brief
Design Brief
I conducted user research to better understand the needs, motivations, and potential frustrations of the app’s target users. I used these insights to develop user personas and create a design brief that outlined the project overview, user personas with key opportunities problem statements, journey maps, and proposed solutions for the problem areas.
The research and design brief helped me move beyond the technical issues in the original prototype and consider the experience from the perspective of different users, while also keeping the organization’s goals in mind.
03 – Low-Fidelity Redesign
Updated Low Fidelity Wireframes
Using the research and design brief as a foundation, I created low-fidelity wireframes to address the usability issues identified in the original prototype.
At this stage, I focused on page structure, navigation, content hierarchy, and task flow before applying visual styling.
04 – High-Fidelity Design & Accessibility
Updated High Fidelity Wireframe
I translated the revised wireframes into high-fidelity designs in Adobe XD, incorporating Elephaid Foundation’s existing color palette, typography, imagery, and visual identity.
I paid particular attention to contrast, readability, typography, imagery quality, navigation, and call to actions to create a smoother and more accessible experience.
05 – Prototype & Interaction
High Fidelity Prototype
I connected the high-fidelity wireframes into an interactive Adobe XD prototype to demonstrate how users would navigate the app and complete key tasks.
The prototype allowed me to evaluate the updated navigation and demonstrate the redesigned donation experience, including the flow required to complete a donation.
Key Takeaways
This project reinforced the importance of combining user research, accessibility, and usability testing with visual design. Evaluating the original prototype helped me identify problems that could prevent users from completing important tasks, particularly within the donation experience.
The project also strengthened my ability to translate research findings into practical design solutions while maintaining an organization’s existing visual identity. Most importantly, it reinforced the importance of setting aside personal assumptions and designing around the needs of the people using the experience.