top of page

Elephant Friends Wildlife Rescue

Mobile App and Responsive Web Design

elephant friends no background.png

My contributions

ROLE

UI/UX Designer and researcher, designing a mobile app and responsive website for Elephant Friends Wildlife Rescue, from conception to final prototype.

RESPONSIBILITIES

Competitor analysis

Wire-framing: Paper and Digital

Low-fidelity wireframes and prototypes

High-fidelity layouts

Determining information architecture

User Interface Design

Accounting for accessibility

Usability testing and validation/project information

PROJECT TYPE

UX Design

PROJECT DURATION

May - July 2023

DESIGN TOOLS

Elephant Friends Wildlife Rescue

Elephant Friends Wildlife Rescue is an organization that allows users to adopt orphaned African elephants and/or donate to anti-poaching teams. 

 

African elephants are currently endangered due to drought and poaching, and Elephant Friends serves to rescue these elephants, providing them with the care and love they need until they are ready to be released into the wild, in a fully-protected area. 

Most conservation websites are unclear about where precisely your money is going, but this fictional organization makes it clear that it is either going to anti-poaching teams or to an elephant in need.

Adobe XD, Figma, Photoshop

The Process

In order to best cater my designs to my targeted users, I utilized the Design Thinking methodology. This approach, formulated by the Hasso Plattner Institute of Design at Stanford University, helps UX designers address complex problems by understanding the users needs. 

The process all starts with empathizing with users, followed by defining the problem that needs to be solved, ideating, prototyping, and testing. 

My project (3).png
Problem Statement

African elephants are currently suffering from drought and poaching, and many conservation websites are not specific about where precisely your money is going when you donate, and this halts some users from donating altogether.

The goal

The goal of Elephant Friends Wildlife Rescue’s website and app is to allow a user to easily donate to supporting orphaned elephants and anti-poaching teams with the knowledge of where exactly their money is going when they donate.

Research

Competitive Analysis

The initial step in my research was to understand successful patterns in current wildlife conservation organization’s websites and identify missing gaps. I explored 7 organizations and analyzed the good and bad of each competitor, and found one major gap in each: you are not told precisely where your money is going. They state you are donating to “conservation activities”, but interviews with potential users showed that they would like to know what specific activities and which animals, making the experience for the user more personal. 

User Interviews

In the empathize stage, I created interview questions and conducted interviews with 2 different groups of users:

  • People who have donated to wildlife conservation organizations in the past

  • People who have considered donating to wildlife conservation organizations but have not yet

User Interviews:  Past Donators 

Style
Unmoderated
Participants
4 people interviewed
Duration
15 minutes each
Location
Remote
Initial Questions
  • How many times have you donated to wildlife conservation organizations? 

  • How did you hear about those wildlife conservation organizations? 

  • What prompted you to donate to an wildlife conservation organization? 

  • How did you feel donating to wildlife conservation websites?

User Interviews:  Considering Donating

Style
Moderated
Participants
4 people interviewed
Duration
15 minutes each
Location
Remote
Initial Questions
  • How many wildlife conservation organizations have you considered donating to? 

  • How many times thus far have you considered donating to wildlife conservation organizations? 

  • What has prompted you into considering donation?

  • Is there anything in particular that has stopped you from donating?

Synthesize

User Findings

I synthesized my findings from the interviews under the 4 main categories below in order to create a more solid frame and foundation for my designs moving forward.

Screenshot 2023-07-18 at 1.34.16 PM.png

For this step it was important to understand the target user and the specific situation, motivation, and outcome to better comprehend the exact steps the user would take to finish a task.

Screenshot 2023-07-18 at 5.16.44 PM.png

Understanding the User

User Interviews

In the define stage I conducted thorough user research, including developing personas, user stories, and user journey maps. 

 

Synthesizing the data from the interviews, I was able to create two distinct user personas and and their pain points.  This helped me to write definitive problem statements, and formulate their user journeys as they navigate the app and website.

 

This new understanding allowed me to recognize roadblocks and pain points to correct, and thus improved my designs.

Persona #1

Problem Statement

Jesse is a marine biologist who needs an easy app experience that allows him to be aware of where his money is going when he donates so that he is certain he is making a positive impact on wildlife conservation.

Jessee EF.png

Persona #2

Problem Statement

Liz is a high school student who needs an informative wildlife conservation app that updates her on where her donation is going so that she knows she is making a positive impact in an animal's life.

Liz EF.png

Ideate

Crazy Eights & "How Might We" exercises

Identify gaps and opportunities

  • How might we design an app for a wildlife conservation organization that gains users trust so that they will be willing to donate?

  • How might we design an app for a wildlife conservation organization that provides a more personalized experience for the user?

Ideas generated with Crazy Eights Design Sprint

  • Focus on as much detail as possible for the orphaned elephants and their stories - this will create a more personal experience for the user. They will feel more empathy towards the orphaned elephant because they know more about the orphan such as it's estimated month of birth and the backstory of how the elephant was found. 

  • Provide options for weekly, monthly, or yearly updates for the user so they know how their orphan is doing in the nursery. This will create a more personalized experience for the user, making them feel very positively because they have made a big impact. 

IMG_8601 2.jpg

Crazy 8's is a core Design Sprint method. It is a fast sketching exercise that challenges designers to sketch eight distinct ideas in eight minutes.

Design Flow

Screenshot 2023-07-18 at 9.25.27 PM.png

Information Architecture

Screenshot 2023-07-18 at 10.16.18 PM.png

Paper Wireframes - App

IMG_8481.jpg
IMG_8482.jpg
IMG_8483.jpg

Digital Low-Fidelity App Wireframes

During user interviews, I discovered that it was crucial to the user's experience to include more information about each orphaned elephant that Elephant Friends Wildlife Rescue supports. This creates a more personal experience for the user, as they will feel like they truly know the elephant they are adopting, thus leading to more donations for the organization. 

It was also very important for users to get updates on the elephant they have adopted, so they are certain that their donated money went to a good cause. In my wireframes, users are able to select if they would like weekly, monthly, or yearly updates on their elephant. 

 

The last screen in the user flow  has a very positive effect on users, letting them know how big of an impact their donation is. 
 

iphone - story.png
iphone- updates_.png
iphone thanks.png

Low Fidelity App Prototype

This low-fidelity prototype, built in Figma, connects the the 17 frames in the 2 flows that a user can take. Users can either choose to adopt an elephant or donate to anti-poaching teams (or both)! 

This low fidelity prototype contains the interactive connections that allow the user to proceed both forwards and backwards within the sequence. Users are always able to return back to the home screen as well. 
 

E.F. Lo-Fi wirefrmae.png
E.F. lo-fi wireframe w_connections.png

Usability Study

Before conducting my usability study of the Elephant Friends Wildlife Rescue app, I carefully drew up a UX Research study plan which included my research questions, KPI's, and methodology. I strove to understand how easy it was for users to navigate the app, determine if there were any parts where users were getting stuck, and learn from the user's click path. 

Research Questions: 

  1. How long does it take for a user to find and adopt an elephant? 

  2. Is the payment process easy for the user? 

  3. Are there any parts where the user is getting stuck? 

  4. What can I learn from the steps that the users took to adopt an elephant? 

Key Performance Indicators: 

  1. Time on Task: measure the time it took for users to choose an elephant to adopt, pay, and enter a billing address on the Elephant Friends Wildlife Rescue app.

  2. System Usability Scale: A questionnaire to evaluate user feedback.

Methodology: 

  • Unmoderated usability study

  • Location: United States, remote 

  • Date: Sessions took place on June 29th, 2023 and June 30th, 2023 

  • Five participants 

  • Each session will last 15 minutes and it will include an introduction, a list of tasks, and a questionnaire on their experience. 

Usability Study: Findings

1

2/5 participants were confused on the clickability of the buttons that allowed users to choose how often they would like updates on their elephant. 

2

4/5 participants recommended a "save payment information" button in case they wish to adopt another elephant in the future.

The Outcome: Refining the Design 

After the testing stage, I went back to the drawing board to refine my designs. I made specific changes to several screens based on the valuable feedback and recommendations I was given from the usability study. 

At this point I was able to focus on my favorite part of the UX design process: choosing colors, fonts, and images to include in my mockups! While editing my low-fidelity designs, I also made sure to take into account accessibility considerations. 

 

This section shows examples of changes in screen designs as well as my polished high-fidelity mockups. 
 

Mockups: Low Fidelity to High Fidelity

In my usability study, some users mentioned they were unsure of the clickability of certain buttons. To make it clear for users, I made sure to make the buttons "pop" on the screen, by rounding their edges and coloring them bright teal. I maintained consistency throughout all of the buttons on every screen of my high-fidelity mockups to make it a smooth process for users, they always knew what as clickable and what wasn't.

Screenshot 2023-07-19 at 11.41.16 PM.png
Mockups: Low Fidelity to High Fidelity

4/5 participants in my usability study had the great recommendation to add a "save payment information" button for my designs so that they could donate again, so I made sure to add that feature to my last screen of the checkout process. 

Screenshot 2023-07-19 at 11.42.24 PM.png
Key Mockups for Mobile App

In the beginning of my research, I conducted interviews with two groups of people: people who had donated to similar organizations in the past, and people who had not donated to similar organizations. After thoroughly reviewing my interview findings, I found that they had two major themes in common.

 

First, many people had never donated because they didn't know where exactly their money was going to go to once they donated. Food for the animals? Clean drinking water for them? They didn't know.

 

Secondly, many participants had not donated to organizations more than once because they never heard from the organization again about the impact their donation made.

 

It was very important to me while making my designs that I included plenty of information on the orphan as well as letting the user know how their donation would impact Elephant Friends Wildlife Rescue. I also made it a point to let users choose how often they wanted to be updated on their orphan's progress: weekly, monthly, or yearly. 

key mockup 1.png
key mockup 2.png

High Fidelity Mobile Prototype

This high-fidelity prototype, built in Figma, contains screens for on-boarding/ signing in, then it allows users to either adopt an elephant or donate to the organization's anti-poaching teams (or both)! I added 15 more elephant orphan profiles to the website as well, which meant making a lot more screens. 

 

I also had to account for different user flows, so if the user decided to donate to anti-poaching teams, the checkout process was slightly different than if the user chose to adopt an elephant. 

In total, my fully-functioning prototype contains 234 screens and hundreds of connections.

hi-fi prototype e.f..png
hi-fi w_ connect. e.f..png

Prototype in Motion

e.f. gif.gif

Redesigning the Desktop Screens: High Fidelity Mockups

The desktop/web version of Elephant Friends Wildlife Rescue is almost identical to the app version. Interested users can still choose an elephant to adopt, or they can donate to anti-poaching teams. They can also read more about the impact of the organization.

It was important to me that the website and app have a very consistent feel to them.The only difference between the app and the website is the amount of text and information on the desktop website. The website is more in depth than the app, because there is more space to fill on a desktop screen than an app.

Each screen throughout the website houses a header and footer allowing the user to easily navigate through the website. 

E.F desktop.png

Landing page

e.f. landing page.png

High Fidelity Desktop Prototype

This high-fidelity prototype, built in Figma, contains screens allowing users to create an account, adopt an elephant, donate to anti-poaching teams, and read more about the impact of the organization. The desktop website goes more in depth about how many anti-poaching teams there are, what they do, and how the users donation will positively impact the teams. 

I had to account for many different flows the user could take. The user could be on the website to adopt, to donate to a team, or maybe they were just there to look for more information on the organization. If they were there to adopt, they also had the choice between weekly, monthly, or yearly updates. I made sure that all of these potential flows were accounted for in my prototype. 

In total, my fully-functioning prototype contains 325 screens and over a thousand connections.

Screenshot 2023-07-20 at 10.55.44 AM.png
Screenshot 2023-07-20 at 10.55.56 AM.png

Desktop Prototype in Motion

This is an example user flow if the user chose to adopt an elephant on the first page. 

E.F. DESKTOP gifmock.gif

Accessibility Considerations

1

I used WebAIM to check the contrast in my designs. The contrast ratio meets the WCAG guidelines for accessible designs.

2

I have included clear labels for interactive elements that can be read by screen readers.

Going Forward 

In the final stage of my case study, I explored the takeaways and next steps of my project, considering what I have learned and what I could improve on going forward.

Takeaways:

impact icon.png

Impact: 

The feedback I have received from my usability study and my high-fidelity prototype was complete has been positive. They show that the design of this app and website is usable and meets the user's needs.

A quote from participant feedback:

"I loved that the app told me exactly where my money was going when I donated! I would definitely tell my friends and family about this app!"

what I learned icon.png

What I learned:

While designing Elephant Friends Wildlife Rescue app and websites, I learned that the first ideas for the designs are only the beginning of the process. Usability studies and peer feedback influenced each iteration of both the app and website for Elephant Friends Wildlife Rescue. 

Next Step:

1

Conduct a third usability study and determine if all of the pain points experienced by users have been addressed. 

Thank you!

Thank you for your time reviewing my work on the Elephant Friends Wildlife Rescue website and app! If you'd like to connect with me or view more of my work, my information is provided at the bottom of the screen!

bottom of page