Ivory Lee | Haven for Wildlife

Project Overview

'Haven for Wildlife' aims to be an all-in-one solution to connect the public with animal protection organisations. It includes a dedicated mobile app that targets users on the go, allowing them to quickly report stray and injured animals to animal organisations and allowing them to track progress. They can also read the latest news and stories. The web, on the other hand, has the purpose to introduce the organisation and includes applications for and information on volunteering, adopting, and fostering.

The Problem

There are many organisations with the goal of helping stray and injured animals. However, there is not one clear resources for who to reach out to when you come across such a situation on the streets. ‘Haven for Wildlife’ provides a quick and easy solution to report animals and get information.

The Goal

To design an app and website that simplifies the process of the general public reporting information about injured wildlife and/or strays whilst simultaneously having a resource for not only learning more about animals, but also finding and applying to volunteer positions, fostering and adopting animals.

Understanding the User

User Research

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users want to help animals when they see them on the streets, but because of the lack of an easy platform to report them and being in a time crunch, they end up leaving. Those working in animal organisations also believe that the reporting process is slow and could be simplified and made more efficient.

Personas

Persona 1

"I work better with animals and numbers than humans. I want to be able to feel accomplished in both."

Age: 25
Education: Master's candidate
Hometown: Taipei, Taiwan
Family: Single
Occupation: Accountant

Frustrations:

- Wants her volunteer experience to be a stress reliever
- Wants to help as many animals as possible
- Contribute towards her professional career and the community

Basic Information:

- Not being able to get to strays on time, especially if they are injured
- Delays in passing on of information from informant to despatched workers

Jia–Yun is a 25-year-old junior accountant in the city and volunteers for a dog shelter twice a month on the weekends as an administrator and receptionist. She receives occasional calls about strays on the streets and is in charge of noting down these calls and sending a team to check-up on the animals. However, most times, either there is not enough information to find the animals or the relay of information is too delayed. She feels annoyed that there is no easy process to report and document.

Goals:

Problem Statement:
Jia-Yun is a volunteer receptionist who answers requests from the public about strays/injured animals who needs a quick platform for the public to note down all their observations about the animals’ situations because getting all information through a phone call and then passing it on may be inaccurate and inefficient in helping the animals.

Persona 2

“Sometimes I can’t focus because I worry about the animals being confined in my car before I can bring them to safety.”

Basic Information:

Goals:

Frustrations:

Age: 43
Education: Technical degree
Hometown: New Taipei, Taiwan
Family: Married
Occupation: Electrical engineer

- Wants to fulfill his role as an electrical engineer
- Wants to save and relocate animals to safety

- Wants to be able to work with a clear mind without worrying about the animals in his car
- Wants to have an easier way for others to come help with the animals while he is working

Yao Lin is a 43-year-old electrical engineer who is contracted by a construction company to layout and setup the electrical components for new construction sites. Occasionally, he finds animals and strays at the sites and wants to move them to a safe environment. He has called animal sanctuaries and organisations for animal welfare but most times they are short-staffed and cannot get to the location in due time to help. He has resorted to keeping the animals in his truck before bringing them to the sanctuaries himself after work.

Problem Statement:
‍ Yao Lin is a contracted engineer who works at constructions sites who needs a platform to quickly report about animals he finds at sites and be able to track progress because he needs to focus on his job instead of his mind being on the animals he finds.

Competitive Audit

While researching for an audit on competitor products, I realised such resource of a compilation of animal organisations resources or even simply reporting stray and injured animals does not currently exist. Only some organisations have websites with contact numbers to call and reach out should you come across a situation you would like to report.

The competitive audit, then, revealed a market gap for a resource like ‘Haven for Wildlife’.

Starting the Design

As the main feature of this service is to be able to report injured wildlife of strays while on-the-go, the main device that I wanted to target first was mobile. More importantly, creating a specific app that includes this service as it would be able to use built-in mobile features such as GPS and location tracking easier. The design, then, took a mobile-first approach.

Differences Between App and Responsive Website

I decided that I wanted the main interactions on the app and the websites to differ, depending on the specific ways/times in which users will interact with the app or the website through their devices. The mobile app, with mobile's tendency to be on-the-go and more urgent, was chosen to be the most apt platform to have the reporting strays/wildlife feature. On the other hand, it is assumed that those who access the website would usually be functioning at a more leisurely pace, therefore having more time and space to access applications for volunteering, fostering, and donating where it may also be easier to search for and upload documents straight from the devices. Both platforms have the donation feature because donations and receiving funds is the most important way that these organisations, and therefore 'Haven for Wildlife', can function.

Ideation

I did a quick ideation exercise to come up with ideas for how to address the big gap identified in the competitive audit, specifically making sure that the Homepage (both on the app and the website) has these features fully accessible. Below is an example of various Homepage designs during the ideation exercise for the web.

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the ‘Haven for Wildlife’ app. These designs focused on allowing users to document down observations and locations to report stray/injured animals.

Lo-Fi Prototype - Mobile App

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow to all pages of the app, along with the main experience of reporting and submitting a report about a stray/injured animal.

I then conducted a usability study of this prototype to get heuristic feedback before starting the hi-fi design and prototype.

Usability Study: Parameters

Study type:

Location:

Participants:

Length:

Research questions:

Unmoderated

- 5 participants: two males, three females, between the ages of 18 and 70
- All are locals who have various working backgrounds and schedules

20-30 minutes

- Can users submit a report successfully?
- Do users understand how to upload and take necessary material to accompany the report?Is the reporting process easy to use?
- Are there any parts of the reporting process that users are confused with?
- Can users easily navigate to different parts of the app from the landing page?
- Are users able to use the search function’s filter system?
- Do users think the app is easy or difficult to use?

Taipei, Taiwan

Findings from the usability study was used to make insights and then further prioritised by order of importance to make changes in the next mockup.

Hi-Fi Mockups and Prototype - Mobile App

Based on the insights from the usability studies, I applied design and feature changes such as providing a clear instructions in the ‘Report an Animal’ feature, including a help button on the top of the page.

wireframe of a page transformed into a mockup

Additional design changes included splitting up features into separate sequential pages to allow easier comprehension and reading on each page, including having responsive feedback pop-ups. An example of this change can be seen in the 'Donate' example below.

wireframe of a page transformed into a mockup with interactions

Visual Design - Colour and Style

The colours of the design were chosen from a single image of Meteora, Greece, specifically of the Pindus Mountains. Below is the colour palette with the functions that they were used for. The Sans-serif font of Poppins was chosen for its less-intense, less serious, and more calm and gentle aesthetic – reminiscent of cute fluffy animals.

Title
Poppins Semibold - 30 pt
Heading
Poppins Medium - 30 pt
Sub-Heading
Poppins Semibold- 20 pt
Body Text 1
Poppins Light- 15 pt
Sub-Body Text 1
Poppins Medium - 10 pt
Sub-Body Text 2
Poppins ExtraLight - 10 pt

'Haven for Wildlife' actually went through many rounds of designing. The original design that was used for the second set of usability studies were not the actual designs that ended up final. While there were no feedback regarding the initial hi-fi designs, I felt that it didn't embody the overall nature of the services that 'Haven For Wildlife' seeks to bring to the public – especially helping create meaningful connections between the public and wildlife/strays. The design, although practical with nature-themed colours, lacked a sense of intimacy and felt rather detached from the subject matter.

Below is an example of some of the changes in design that were made, from the initial hi-fi design iteration to the final version.

Sample Features and Pages

Below are some examples of features and pages in the hi-fi prototype of the 'Haven for Wildlife' app.

Home Page
- Features illustrations of animals in nature
- Each container block leads to a specific feature included in the app
- The five containers represent different time frames in the day: early sunrise, morning, midday (noon), sunset, and night. Not only to change up the designs, but are used symbolically as well to represent the fact that wildlife and strays may need help at any time of the day and that being involved and taking action can occur 24/7.

Login Page
- Animation features to help transition between pages and/or features e.g. toggle bar to change to and from 'Log in' page to 'Sign in' page, when entering text, each input bar is highlighted and keyboard appears
- When transitioning to the 'Home' page after logging in, background element slides down to drag the 'Home' page up and out – gives the user a visual representation and feedback that the app is loading while allowing background to act more than just a static decoration piece

'Find Organisations Near You' Page
- Scrollable map that is interactive
- Users can either search for organisations near them using an address or simply dragging and using the built-in map function
- By clicking on the landmark signs or the names of the organisations, users can find out the basic information of the organisation such as name, reviews, opening hours, phone number, and address
- No need for the users to manually find the locations themselves elsewhere – can also discover new places that may be closer to them

Hamburger Menu
- Feature that allows users to navigate to specific pages directly without having to scroll down the 'Home' page to the different sections or navigate within the different sections to further sub-sections
- Opens and closes with the dropdown menu features for sections with multiple subsections
- Animation of the menu sliding in and out which is not only familiar to smartphone users but makes the app more screen friendly and less crowded

Accessibility Considerations

During the design process, I made sure to take accessibility considerations into account. Three main ways accessibility was taken into account are:
‍
1. Interactive elements had clear labels that can be read by screen readers
2. Pages have landmarks to help users navigate the site, including users who rely on assistive technologies
3. There are headings with different sized text along with other visual elements for clear visual hierarchy

Final Prototype

Responsive Design

Information Architecture and Sitemapping

With the app designs completed, I started work on designing the responsive website. I created and used the following sitemap to guide the organisational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Responsive Website on Phone, Tablet, and Desktop

The designs for screen size variation included mobile, tablet, and desktop. I optimised the designs to fit specific user needs of each device and screen size.

image showing the responsive web design on different sized devices

Aesthetic Differences Between App and Website

The app and website have some aesthetic differences. While the app is more illustrated and "cute" in nature, the website aimed to be more serious and informative, with more information on how to get involved. Of course, how users interact generally within apps and on websites are also taken into account. Below are examples of how the designs differ between app and website.

differences in the donate page between website and app

Sample Features and Pages

Unlike the app with its focus on reporting strays/wildlife on-the-go, the focus and main interaction that the website focuses on is accessing applications for volunteering, fostering, adopting. Both have the donation feature, as mentioned previously.

'Volunteer Application' Pages
- Users can browse all opportunities for volunteering based on a specific organisation or through job type
- Users can directly begin their application online on the website, without the need to download any forms to fill out and then reupload
- Clear instructions for users before they begin their application
- Ability to save the progress of their application to work on at a future time or submit directly through the website

'About Us', 'Contact Us', 'FAQs' Pages
- These three pages are ones that are specific to the website alone, and not on the app version of 'Haven for Wildlife'
- 'About Us' provides information on the vision, mission, and history of 'Haven for Wildlife' and introduces the team
- 'Contact Us' allows users to send a message to the organisation
- 'FAQs' include commonly asked questions and answers on donations, adoptions and fosters, volunteering, and applications using the typical dropdown bar feature

Evaluation and Going Forward

Accessibility Considerations

Takeaways

Impact

Users felt like ‘Haven for Wildlife’ is easy and helpful all at the same time.

One quote from user feedback: “This is such a good platform to help connect us with organisations. I like how efficient it is to report a stray and then track the progress of people coming to pick up the animal so I don’t have to worry. I can’t believe through the same platform I can also search for animal-related volunteer positions AND learn about animals.”

What I learned

I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.

Next Steps

Though much has been done regarding this project and prototypes, there are always more room for growth and improvement to make the design the best that it can be. Below are three further steps that could be explored in the future.

1. Conduct follow-up usability testing on the responsive website across platforms
2. Identify any additional areas of need and ideate on new features
3. Check out the traffic and usage of the app or the website and decide whether the specific features should be incorporated across app and website

Want to work together?