Dec. 2020

Role

UX/UI Researcher & Designer

Tools

Miro & Figma

Overview

With a redesign of the Panthera website (a nonprofit focused on the conservation of big cats), this nonprofit would bridge the gap between their passions and the user experience. By following a few UX/UI plans this website can be a lot stronger.

Research

What is Panthera?

Panthera is an organization dedicated to the protection, preservation, and prosperity of wild cats, developing and implementing conservation initiatives in 39 countries around the world.
Panthera’s range-wide conservation strategies are focused on the world’s largest, and some of the most imperiled cats: tigers, lions, jaguars, snow leopards, leopards, pumas and cheetahs.

Why Redesign This Site?

After looking through a number of sites, this one stood out due to the sheer amount of care and expertise Panthera communicates.
The gap between the passion, the nonprofit exhibits, and the user experience can shorten with proper UX/UI strategies.

Site Annonations:

Issues with the Homepage:
  • Hamburger Menu on the desktop version is less visible. Users tend to use more time to accomplish a task if it were visible.
  • The primary task is not clear on the Homepage. The primary task is to make users donate yet the donate button is not visible to users.
panthera-homepage
panthera-navigation
Issues with "Meet The Cats":
  • The mental model of the user is to learn more about Wild Cats. Yet the user can become frustrated with hidden pages.
  • The individual Meet The Cats pages are loaded with extended information while some areas lack contrast. (Accessibility)
Issues with Donating:
  • The “Donate” button should be higher and more visible to make the donation task easy and quick to accomplish.
  • The hero image of the Donate page appears like an interactive module leading the users to confusion.
panthera-donate

Competitive Analysis:

The competitive analysis focused on two direct Non-Profit competitors (Big Cat Rescue and Wildlife Conservation Society).
Click here to see the full competitive analysis
Big Cat RescueWildlife Conservation Society
Strengths
  • Clear menu options.
  • Good balance of full images, white spaces and short copy.
Weaknesses
  • Small logo, hero image has no supporting content. Inconsistent layout & color palette.
  • Needs to improve accessibility (ie. color contrast)

The Problem:

  • While their site, projects, and articles are visually appealing and legitimately compelling, Panthera’s website is cumbersome to navigate and doesn’t effectively communicate its mission and programs.
  • While it’s clear they put a lot of effort into their site, the UX/UI components let them down impeding users from quickly understanding, navigating, and even donating essentially defeating the purpose of the site.

The Solution:

  • By stating their mission clearly, emphasizing the impact and reach of their projects on cat populations, simplifying the donation methods, and streamlining navigation, we believe the site will be more efficient, and its goals more attainable.
  • Can improve usability by taking advantage of the dynamic logo, aesthetic color scheme, and plethora of high-quality photographs Panthera already uses to stay true to its brand while elevating its UX/UI structure.

Ideation

User Flows:

Created user flows that focused on four sections for the redesign: learning more about Panthera, "Meets the Cats" page, finding ways to get involved, and making a donation.
panthera user flows

Prototype & Test

Lo-Fi Wireframes:

 
 
 
1
1

Usability Testing - Lo-Fi:

Objective:
 To ensure users have the easiest accessibility to explore the site, donate, and learn more about Panthera’s cause because most people who visit the site do not know what Panthera is about at first glance.
Task 1:
 Learn Panthera's mission.
Task 2:
 Find information about Lions
Task 3:
 Discover how to fundraise
Task 4:
 Make a donation
Takeaways:
Tests were mostly successful; there were no failures and all partials were resolved fairly quickly. Users often went to “Our Work” to learn about lions, confusing initiatives for educational information. The largest problem was with fundraising: users consistently went to “Donate” before “Get Involved.” Did not consider this an issue, but testing made it a notable flaw.

Hi-Fi Wireframes

 
 
 
1
1

Videos of Prototypes

Usability Testing - Hi-Fi:

The hi-fi prototype accounted for the changes inspired by the lo-fi testing while making use of captivating images, strong branding, and a professional presentation.
Takeaways:
All but one of the tasks were universally successful in these tests. Assuming fundraising would be found under "Donate" was again a prominent problem. There were also minor issues with accessibility. Overall, users engaged with the strong imagery, understood the mission, and were able to find resources and information easily.

Next Steps

There are a few accessibility, layout, and cohesion aspects that need to be tweaked. Clearing up the confusion between donations and involvement also needs to be addressed, but in the meantime, users were able to clear it up on their own fairly quickly. Optimizing the site for mobile is also on the list.