Daniel Chew
Pegasus Mac Art.png

Pegasus Animal Sanctuary Redesign

UX DESIGN / REDESIGN

Pegasus Mac Art.png
 
PAS Coloured logo only.png
 
 

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. 

TIME FRAME: 8 WEEKS

TOOLS: SKETCH, INVISION, ILLUSTRATOR, PHOTOSHOP

 
 

OVERVIEW

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.

RESEARCH

Market Research

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.

Difference+between+Animal+Shelters+and+Sanctuaries.jpg

Animal shelters are usually government funded, 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:

 
Second Chance Animal Sanctuary Home Page

Second Chance Animal Sanctuary Home Page

Lone Pine Koala Sanctuary (Based in Brisbane, Australia)

Lone Pine Koala Sanctuary (Based in Brisbane, Australia)

Dogtales Rescue and Sanctuary

Dogtales Rescue and Sanctuary

Tiggywinkles (Sanctuary based in the UK)

Tiggywinkles (Sanctuary based in the UK)

 

INSIGHTS

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?

USABILITY TESTS

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.

Pegasus Task Analysis.png
 

Tasks:

  1. You are looking to visit Pegasus animal sanctuary.

    Find out about visitation times.

  2. You have some spare lumber and forage that you would like to donate to Pegasus Animal Sanctuary. Find out how you can donate.

  3. Find out how you can sign up to be a volunteer at Pegasus.

  4. Find out where they are located. Contact them.

Results:

  1. 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. 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.

  3. 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.

  4. 5/5 people passed this task, as they were able to find out where Pegasus Animal Sanctuary was located and how to 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.

 

PAINT POINTS

From the usability tests and interviews, I was also able to identify 5 visible pain points that users addressed:

  1. Volunteer page is cluttered. Wish list can be laid out more effectively

  2. Users missed the About Us page, as it was mistaken as a drop down menu

  3. Users were unsure of how to donate

  4. User interface/ layout is inconsistent, unclear for users

  5. Title colour on the Home page does not adhere to the WCAG accessibility standards.

 
Volunteer page

Volunteer page

Home page of old website

Home page of old website

 
 
About Us Page often was missed by users because it was mistaken for a drop down menu

About Us Page often was missed by users because it was mistaken for a drop down menu

 

SOLUTION

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:

  1. Make a button on the volunteer page to link to a separate page for the wish list to ensure that it is less cluttered

  2. Include the About Us page in the drop down menu

  3. Create a Donate Page that is clear and easy to use

  4. Keep the branding and design consistent. This applies to the typography and user interface

  5. 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.

 

PLANNING

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.

Sketches

 

STYLE TILES

Style Tile for Re-design

Style Tile for Old Website

 

USER PERSONAS

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.

 

USER PERSONA 1: Animal Nutritionist who loves to spend her off time volunteering at animal sanctuaries

USER PERSONA 2: Owner of Pet Supply Company

 

WIREFRAMES

Low-fidelity 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.

 

Lo-Fi Wireframes (Blockframing)

 
 

Hi-Fidelity Wireframes

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.

 
Hi-Fi Wireframes

Hi-Fi Wireframes

 
Pegasus on Macbook.jpg