2021

Charity Redesign:

Endangered Species International

Featuring a mobile-first responsive web design (RWD), updated & contemporary navigation, & a reorganized information architecture.

About

Endangered Species International (ESI) is an international non-profit organization that focuses on assisting and creating awareness for the most at-risk species worldwide, with a special emphasis on African native species.

Primary Goals: Typical for a non-profit, ESI heavily relies on donations and volunteers, and having an intuitive and attractive website is a crucial aspect for the organization’s longevity. 

*This was a group project created in the University of Irvine’s UX/UI Educational Program, and no one from ESI ever responded to attempts to contact.

Tools

Figma

Adobe Illastrator

Google Froms / Drive

Miro

Behance

Project

Objective: to choose a non-profit in need of website redesign. For ESI, the website must be updated to modern internet standards and the essential processes must be streamlined.

Method: conducting usability testing in the initial stages of brainstorming, restructuring information architecture, making core stylistic changes, and finishing with a final round of usability testing for the redesigned prototype

Results: the hierarchy of information and navigation were reorganized & reconstructed, while the site also received new responsive breakpoints with corresponding designs.

Overall, the redesign improved the intuitiveness and usability of the site, increased appearances of credibility and trustworthiness, and implemented an efficient responsive web design.

1. Evaluating the Problem

Heuristic Evaluation

In the initial evaluation of the original site, several positive and negative aspects became apparent. The following summarizes the good and the bad characteristics outlined in the heuristic evaluation—

  • Appearance
    • Positive: clear purpose/mission statement and page consistency
    • Negative: unpleasant color scheme and formatting
  • Content
    • Positive: easy to find headings and essential content above the fold
    • Negative: walls of text, no search box, and contact us difficult to find
  • Navigation
    • Positive: consistent, organization of information is coherent
    • Negative: Home button in second level of header, abundance of links

Proto-Personas

The creative thinking process was initiated by first imagining and ideating who a typical user of the ESI website and services might be. This helped in understanding more about pain points and highlights for what the site should be to provide a better user experience.

Usability Testing I

Our first round of usability testing was done on the original site to determine what users thought of the pre-existing navigation and information architecture and how we could reorganize the pages of Endangered Species International’s site map to better support a seamless flow from when the user begins on the landing page to reaching the goal of visiting the site.

Task: Participants were asked to complete three objectives—

  1. Participant wants to get involved in volunteering. Find a way to apply to open volunteer opportunities.
  2. Find a current project that the participant feels strongly about and attempt to make a donation.
  3. Participant is researching endangered mammals and wants to educate themselves on the challenges/dangers that endangered mammal species face. Find information that satisfies this search query.

Outcomes: participants were

  1. Participants were not able to find a volunteer application or information
  2. Donation buttons are hidden within the site, and formatted to look more like an ad—the style does not reinforce a sense of credibility.
  3. Pages consist of a wall of text (lacks hierarchy of information), making the site difficult to navigate and understand
  4. All participants expressed a lack of confidence in the credibility of the organization and said they would likely look elsewhere to volunteer or donate.

Upon initial analysis of the usability testing results, it is apparent that participants were not only deterred by the outdated style of the website but also confused by its structure. 

Affinity Diagram

To further examine and diagnose the shared pain points of participants, the data collection was input into an affinity diagram. It was a consistent focus of participants throughout the various aspects of the site that there was a diminished sense of credibility and trustworthiness, which is not ideal for a non-profit organization operating solely on donations of the public. 

Empathy Map

An empathy map was created using the insights gained from the affinity map, combined with the characteristics of our hypothesized average user. 

The Problem

Problem Statement: Endangered Species International’s (ESI) current website seeks to embolden the plight of the world’s endangered species, educate the public on the severity of the issue, and garner the support needed to alleviate species extinction, yet their online presence does not meet the modern web standards to achieve the site’s goals.

How might we increase user trust and improve usability for ESI?

User Insight Statement: Visitors to the non-profit organization’s website need a simpler and easier way to donate to specific causes and inquire about volunteer opportunities, as the site’s current user interface is challenging to navigate and deters users who want to support the organization from getting involved.

User Scenario

Story Boarding

2. Information Architechture

Revised Site Map

Once the main problems with the original site were identified and the essential processes and general user paths were worked out, the site map was revised to highlight important features of the organization and streamline the information architecture.

This was done by changing the names and slightly modifying the level one pages, such as “Support Us” became “Donate” and “Endangered Species” became “Education.” Level two pages were simplified and ordered to be intuitive for the user.

3. A New User Interface

Responsive Header & Footer

UI Style Guide

Our style guide was developed through a series of modeling phases, including A/B testing the top two versions and a democratic group vote. 

4. Mid - Hi Fi Prototyping

Lo-Fi RWD Design

Usability Testing II

The purpose of the secondary round of usability testing was to assess the efficiency of the navigation redesign and RWD elements, with the ultimate goal of uncovering any further impediments hindering users from having comprehensive and seamless usability of the new interface.

Task:

  1. Desktop
    1. ‘Donate’ to the general Endangered Species International Fund
    2. Find the ‘End Wildlife Trafficking’ project page
    3. Find ‘Volunteer Stories’
  2. Mobile
    1. Sign up to volunteer with ESI
    2. Find information about the Wildlife Trafficking Project

Outcomes: users were

  1.  Participants found it easy to find the donation page on both desktop and mobile designs
  2. More information was desired about specific projects to inform participants exactly what their donations will be used for
  3. Participants were confused by ‘volunteer stories’ section (meant to showcase individual volunteer’s experiences) 

Usability testing round 2 revealed that the reworked user interface and information architecture enhanced the site’s efficacy. Navigating the site to complete each objective was significantly more intuitive for participants, and their recommended changes and critical input pertained predominantly to stylistic choices rather than structural and foundational ones. 

Final Prototypes

The final iteration of the mobile-first, responsive ESI prototype included ample information regarding volunteer projects, the organization’s mission and real-world efforts, as well as where donations go. The updated interface gives the site a modern look and increases a sense of trustworthiness for users wanting to join the cause. 

Other Case Studies