UX DESIGN / REDESIGN
Pegasus Animal Sanctuary is a family operated non-profit organization dedicated to the rescue and rehabilitation of animals in need. Established in 2017, Pegasus Animal Sanctuary is located on 97 acres of rolling fields and forest near Port Perry, Ontario, about 80 km northeast of Toronto.
ROLE: UX DESIGNER TIME FRAME: 2 MONTHS
The website for Pegasus Animal Sanctuary was launched in early 2018. As I was a part of the team to come up with the initial design, the website’s launch date was pushed up to meet the date of the grand opening of the sanctuary. As more features and pages were added to provide information to interested users and donators, it became evident that the current website had some issues that needed to be addressed.
The first step was to identify the problem and address the pain points of the current website.
There are many misconceptions that arise when people think about animal sanctuaries and shelters. Although they do have similar characteristics, their purpose and ways of operating is actually quite different. An animal sanctuary provides a permanent residence to animals. It is a place of refuge where animals can live the remainder of their lives in dignity and are usually not open to the paying public, except maybe for a limited number of planned educational and fundraising events. Animals usually end up at a sanctuary when they become injured, abandoned, abused, neglected, too expensive to keep as a pet or too dangerous for their owners to keep.
An animal shelter is a place where stray, lost, abandoned or surrendered animals, mostly dogs and cats, and/or sick, injured or orphaned wildlife are kept and rehabilitated. Shelters have a more temporary purpose, allowing the animals to be adopted and kept as pets, or rehabilitated and released back into the wild. Animal shelters are usually government funded as well, whereas sanctuaries and rescues are usually charitable organizations that rely heavily on donations and volunteers. This was key to note, as the current website did not have a button or a link for users to donate directly to the organization.
As I searched through a number of the most well known animal sanctuaries in the world, it was hard to come by a well-designed website, as many were either very outdated in terms of their layout and UI, or poorly designed.
Examples of a few websites I visited:
As I was browsing through these websites, the main questions I was looking to address were:
What were the important functions and pages that would be useful for users visiting an animal sanctuary website?
What reasons would a user have to visit an animal sanctuary website?
What information would be useful to find out? What tasks would users most likely look to perform?
I conducted a few interviews with users, as well as preliminary usability tests of the existing website to identify some user pain points.
I asked a few individuals to perform some tasks to assess possible pain points users may face while using the current website. For each task, they were asked to vocally explain everything that was going on in their head.
1/5 people passed this task. Visitation times are nowhere to be found on the website, but the FAQ does mention that the sanctuary is open to the public.
2/5 people passed this task. There is no donate page, so two users figured they would have to call to find out how they would be able to.
5/5 people passed this task. There isn’t a direct volunteer form on the website, but the website does instruct you to contact them if you wish to volunteer.
5/5 people passed this task, as they were able to find out where Pegasus Animal Sanctuary was located and how to contact them.
You are looking to visit Pegasus animal sanctuary. Find out about visitation times.
You have some spare lumber and forage that you would like to donate to Pegasus Animal Sanctuary. Find out how you can donate.
Find out how you can sign up to be a volunteer at Pegasus.
Find out where they are located. Contact them.
From the tests, it was evident that the website was not as effective as it had the potential to be. The existing website provided information, but did not include enough functions to enable users the ability to donate or volunteer on the website.
From the usability tests and interviews, I was also able to identify 5 visible pain points that users addressed:
Volunteer page is cluttered. Wish list can be laid out more effectively
Users missed the About Us page, as it was mistaken as a drop down menu
Users were unsure of how to donate
User interface/ layout is inconsistent, unclear for users
Pegasus Animal Sanctuary Text colour on the Home page does not adhere to the WCAG accessibility standards.
Although there was nothing inherently wrong with the website, there were a few issues that need to be corrected. The first issue was the fact that the website was not fully responsive. It needed to be optimized so that the layout could be automatically resized, hidden, shrunk, or enlarged to make it look good on all devices (desktops, tablets, and phones)
The overall user interface can be improved as well. Here are a couple of solutions I came up with to address the pain points:
Make a button on the volunteer page to link to a separate page for the wish list to ensure that it is less cluttered
Include the About Us page in the drop down menu
Create a Donate Page that is clear and easy to use
Keep the branding and design consistent. This applies to the typography and user interface
Change colour of text and header image to ensure it is more readable. When designing for visual impairment, all text colours must conform to the WCAG AA standards and must have at least a 4.5:1 contrast ratio.
With the information I gathered from the usability tests, I started sketching lo-fi wireframes of the user interface to address the pain points that were identified. I kept the same brand colours of Blue, Yellow and Green but I chose to change up the layout and keep the typography more consistent. Some of the changes I made included changing the layout to a z-pattern, inserting more images, as well as adding parallax scrolling. I made the pages more organized and clear as well.
I constructed 2 user personas to represent users that would typically visit Pegasus Animal Sanctuary.
Persona 1 represents a young, Animal Nutritionist who has a heart for animals. On her off time she frequently volunteers at rescue shelters and rehabilitation centres.
Persona 2 represents an owner of a pet supply company. He frequently donates to charities and non-profit organizations because he truly believes in their cause and wants to help as much as he can.
REDESIGN - WIREFRAMES
Once I had the wireframe sketches of the user flow finished, I proceeded with designing low fidelity wireframes on Sketch. I tested a few variations of the design, keeping in mind the pain points that were identified. The main pages I wanted to re-design/create were:
Donate Page - would forward users to Paypal
Volunteer page - would organize different functions users can utilize. Includes a path to the contact page if you would like to volunteer, path to the Wish List page, and a path to the Donate page.
I chose to use Block framing for the lo-fi wireframes because it allowed me to present my ideas to the client and other team members and to keep the conversation focused on the big picture. As a result, users did not get sidetracked by issues that are better discussed at a later stage. Because you are looking at the design as a series of blocks you are able to avoid getting bogged down in details. The real point of the wire framing process is to keep all interested parties concentrated on the flow and the big picture.
Once I had the low-fidelity wireframes completed, I proceeded with hi-fi wireframes and created a prototype with InVision to test it again with users to validate my design. They were asked to follow the same tasks that I asked earlier before in my research with the current website.
All five users were able to complete each task without any pain points that were mentioned earlier, having a 100% success rate. Users pointed out how easy it was to find information and navigate through the website.
Please note: Old Pegasus Animal Sanctuary website is still up as revisions are still being made.