Endangered Species International
How can a website inspire others to take action during an environmental crisis?
UX Designer, User Researcher
Role:
Miro, Figma, Trello
Tools:
1 Graphic Designer, 2 UX Designers
Team:
3 weeks, April 2022
Length:
UC Davis UX/UI Bootcamp
Purpose:
Competitive Analysis, Prototyping, User Testing, Web Design
Skills:
Getting to Know the Organization
Brand Attributes
I wanted to familiarize myself with Endangered Species International (ESI) by exploring their brand attributes to prioritize redesigning a website that best met ESI’s mission.
Culture:
Dedicated, Problem-Solving, Scientific, Conservation
Target Group:
Environmentalists, Optimistic, All-Ages
Voice:
Inspiring, Trustworthy, Driven, Innovative
Impact:
Inspire individuals to take charge of the environment’s future.
Encourage collaboration to power meaningful changes.
Mission Statement & Values
Mission
Endangered Species International is strongly committed to reversing the trend of human-induced species extinction, saving endangered animals, and preserving wild places.
Values
Passion for nature, respect all life, integrity, optimism for solving the species extinction crisis, and progress at all levels.
Preliminary User Test
To understand how a new user might navigate ESI’s website, I conducted 3 user tests asking each participant to complete the following tasks:
Explore ESI’s website and identify the purpose of this organization.
Success Metric: When asked, users can confidently talk about the organization’s purpose and mission.
Use ESI’s website to identify ways to take part in nature conservation.
Success Metric: When asked to identify ways to be proactive in nature conservation, users can list more than one method from the website (besides donating to the organization).
Feedback #1:
Website was not responsive when the screen shrinks and expand.
Feedback #2:
Website was not engaging and users did not know if existing buttons were interactive.
Building Empathy
User Persona
When creating a persona, I first asked the following questions:
What does an existing supporter of ESI look like?
Do we want our redesign to target existing users or new users?
Similarly, do we want to focus on improving online engagement or increasing user conversions?
While exploring ESI’s website, I learned that the site was created in 2011, which explained the site’s non-responsive and outdated design. With this in mind, I built the user persona as:
Someone who is exposed to current-day technology (because a lot has changed since 2011).
Someone who is new to ESI’s website because we want to redesign with the intention to boost user conversion rates.
User Journey Map
When creating Francois’s journey map, I specifically looked at what motivates him to use ESI’s website, what pain points he might run into, and how I could relieve those pain points.
With my research and constructed persona, I formulated a problem statement:
Problem Statement
New users who want to be proactive in nature conservation are unable to use ESI’s website to learn how to make a difference in nature conservation due to numerous usability issues such as poorly structured information architecture and visual hierarchy.
Evaluating Information Architecture
Content Audit
I had my team run a content audit to decide on what to keep, what to discard, and how to move content around to streamline ESI’s information architecture:
Remove repetitive links (e.g. “Back to Main Page”, “Visit Our Projects” already have unique landing pages)
Group similar landing pages together and label with a common name (e.g. “Our Galleries”, “Our Podcasts”, and “Our Videos” can be grouped together and labeled as “Explore Media”)
Reorganize content under landing pages that are most predictable to users.
Card Sorting
In addition to a content audit I wanted to perform card sorting to determine an intuitive content structure to users. My teammates and I learned that even after sorting ESI’s content to what made sense to us, it was still confusing the navigate the excessive amount of content.
Heuristic Evaluation
In addition to our group content audit, I wanted to perform a simple heuristic evaluation to look at how the site’s information architecture affect overall usability of the site.
Competitor Analysis
We compared ESI against similar non-profit organizations to understand the landscape of nature conservation websites. I wanted to see what made one site strategy more effective than another.
Building Site Structure
Defining features within the site
Take Action
While exploring deeper into ESI’s site my teammate found their “Take Action” page containing instructions on how to contribute to animal conservation, besides donations, in a person’s day-to-day life. It was an exciting discovery because I realized we can use the content within “Take Action” to create a site that was more engaging for users.
Animal Fact of the Day
Though useful, ESI’s comprehensive knowledge of different animals is difficult to sift through and can be overwhelming to users. To approach this challenge, I added a section within the home page that was dedicated to digestible content using ESI’s animal encyclopedia.
Site Map
Although some content were redacted, I tried to keep as much of it as I could while prioritizing a streamlined structure.
Low-Fidelity Wireframes
My team and I decided on a mobile-first design because it is more responsive and accessible to a diverse group of users.
I redesigned ESI’s site navigation to be less confusing so that users spend less time trying to figure out how to work the site and more time on engaging with the organization.
Clickable Prototype
The most important part of the clickable prototype was the “Take Action” page because it was one of our most interactable page. I wanted to prototype different call-to-actions that would entice users to explore and engage with the elements within the page.
Clickable cards were created to showcase ESI’s wealth of information on how an individual can contribute to animal conservation.
In addition to information on how to help different animals, ESI also created a list of “do’s and don’ts of species conservation. To capture our user’s attention we created cards that change when the mouse hovers over it.
Usability Testing
A/B Testing
I had my team focus on testing our “Take Action” page because it is a newly designed feature that will require multiple iterations. My team and I conducted a total of 3 tests and had 2 different versions of our prototype to observe major differences in our user’s ability to complete assigned tasks:
Task #1: Find “Take Action” page.
Success Metrics: User determines task as complete when they arrive at the “Take Action” page. In addition, user finds the task intuitive and easy to complete.Task #2: Point out ways to take part in animal conservation.
Success Metrics: User finds information is digestible and feels a sense of completion with task after exploring “Take Action” page.
Results & Feedback
Positive:
3/3 users found the website easy to use and found the minimalistic design to be enjoyable.
Improvements:
Provide visual feedback for “Do’s & Don’ts of Species Conservation”.
Perhaps create an interesting call-to-action button.
Simplify footer so that it is less overcrowded and busy.
Round out corners of design to make website seem more friendly.
Final Web Design
Visual Style Tile
ESI’s main colors from the old site were used in the new site to maintain their branding.
Paired colors to maximize contrast and made sure colors passed contrast tests.
I chose a sans serif typography that was most accessible to users.
Brand new buttons were created since the old site did not have buttons.