Elephaid Foundation is a company with a cause of protecting the elephant population that is steadily declining globally as a result of human activities. They offer an app that intends to connect its supporters and sponsors on the run, allowing users to donate and sign up to volunteer for providing assistance for the elephants.
My role in this project was to redesign the original prototype within Adobe XD while incorporating the company’s brand identity to address any errors, show valid forms, consistent brand identity, working CTA buttons, legible typography and clear navigation. The design also needed to include a private, secure form to enter sensitive information when making donations as well as working navigation buttons to complete tasks quickly with ease.
In order to improve the existing prototype, I needed to address certain errors such as the donation page that had functionality issues. This will help to solve the business problems of struggling to receive donations through the app and showcasing their brand identity or messaging.
Design Journey
Original Prototype
Pictured above is the original prototype for Elephaid Foundation’s app. There are several functional issues identified, for example, errors in the donation page with a “Page Not Found” message. The Heading is cut off on the Home and Contact page, with insufficient contrast between text and imagery, as well as type and icon sizing.The imagery is also not sized adequately, with the elephants appearing pixelated on the Support page.
Design Brief
First, I evaluated the existing designs of the Elephaid Foundation app. Then I put together a Design Brief that includes an overview of this project, two user personas that I created through extensive research, two problem statements for each user, two user journey maps, and a solution for each page of the app.
Updated Low Fidelity Wireframes
Upon research and approval for the design solutions from the Design Brief, I created low fidelity wireframes that aims to address the errors found in the original design.
Updated High Fidelity Wireframes
After approval of the low fidelity wireframes, I incorporated the company’s color palette, typeface, and imagery within the design through accessibility, usability, and readability.
High Fidelity Prototype
The high fidelity wireframes were turned into a live prototype within Adobe XD to allow users to interact with the design and witness how the app would work in real time. Click below to interact with the live version of the updated Elephaid Foundation app.
Overall What I Learned…
This project taught me the importance of client-designer communication to ensure everyone is on the same page. I also learned how crucial feedback of the users are, leaving my own bias aside, in order to truly understand how others think and where they may be running into errors. Diving into research to create a user persona was another important step in this design process, enlightening me to the preferences of different cultures, ages, and genders.
This design helps to solve the business’s problems of struggling to receive donations through the app due to critical functionality issues. Redesigning the donation page helped to clear and fix these errors. My design supports the organization’s brand identity and message by continuing to use the brand colors in a visually appealing way that considers contrast and accessibility concerns. It continues to put emphasis on the elephants through photographic imagery of elephants and headlines the company has been using for encouraging users to support their cause.
jengatesdesign.com 