AWARE Wildlife
About the Project
The AWARE Wildlife Center is a nonprofit organization that rehabilitates Georgia’s injured and orphaned native wild animals and educates the community about peaceful coexistence with wildlife. Our team’s website redesign focused on making this website more effective for first-time and regular users coming onto the site and connect their community through the website (rather than only on social media).
AWARE Wildlife - Redesigned Home Page
Team
Christine
Lindsey
Rachel
Swathi
Tools
Figma
Miro
Trello
Discover Phase
Stakeholder interview
We had the opportunity to connect with AWARE Wildlife’s Executive Director Scott Lange. From him, we gained key insights on where to focus on the redesign:
Website not updated as much as he’d like
Highlight important services:
How to help an injured animal
Donation page, crucial to highlight
“The last redesign was done roughly 4 years ago by the 48-48 program (48 nonprofit website redesigns for programmers in 48 hours). Website was terrible before this redesign. However, the job wasn't finished and I was left with a website that half worked. It was overall decent redesign. “
-Scott Lange
Research Plan & Interviews
We identified 3 objectives that users have when visiting this website:
Need support in helping injured wildlife
Want to volunteer or donate
Seeking educational programs
From here, we formulated user interview questions and conducted 5 user interviews to gain insight on the habits of individuals who may visit the Aware Wildlife website.
Empathy Map
We developed an empathy map to explore how a potential user will think and behave, as well as main pains and gains from a website redesign solution.
Empathy Map
Current Website
We focused our website redesign on the Home page and Donation page, as these are the most common and the most crucial pages for a nonprofit’s website.
AWARE Wildlife Home Page
AWARE Wildlife Current Donation Page
Affinity Diagram
From the user interviews, we conceived an affinity diagram that highlighted some common goals and frustrations of users.
Affinity Diagram
User Persona
Below is Becca Thrasher, a young adult that is an animal lover but is not sure how to best help the animal community around her. Like those we interviewed, she has a basic knowledge of animal care but not enough to take care of an injured animal without help. In addition, she wants to volunteering opportunities relating to animals. To help her and others like her meet their goals, we began to ideate on ideas we had for the solution.
User Persona - Becca Thrasher
Define Phase
How Might We
How might we help a community supporter who needs to have adequate knowledge about their local community's wildlife support find resources for how to help injured wildlife in their area?
User Insight
A community supporter needs access to information on local organizations that benefit animals and ways to contact them because they want to learn more about wildlife and how to help them, if they ever come in contact with injured wildlife.
Problem Statement
We have observed that current resources are difficult to find for community supporters who are looking for reliable information when they come in contact with injured wildlife. Since they are not very knowledgeable on wildlife, they want to know how to help an animal in need through a local organization.
I Like, I Want, I Wish Method
This method organized the features of the website that we want to keep, pain points in existing features on the website, and additional features that would be helpful to users.
User Task Flows
We outlined the current process for 3 tasks flows that a user can do on this website:
Donate
Help Wildlife
Volunteer
User Task Flows
Usability Tests
We utilized the 3 task flows to create tasks for usability tests for the current website and recorded several of these to identify the most impactful interface changes.
Affinity Diagram
We each voted on the top 5 most important user insights from the usability tests and charted them on an affinity diagram, focusing on the level of importance to AWARE Wildlife and the users.
We found that users did not notice important links, such as “Donate” or “Get Help with an Animal.” There was also a desire for more visually captivating information on the website. Users wanted more information and clarification before making decisions to donate.
Affinity Diagram for Usability Tests
Develop Phase
Information Architecture - Card Sorting
We completed a card sorting activity by writing all the site pages on sticky notes in Miro, then rearranging them based on information architecture principles. This new structure should be more intuitive for users interfacing with the site for the first time.
Information Architecture - Card Sorting
Lo-Fi Prototypes
Below are the lo-fi wireframes that each team member contributed towards the home page. We combined our favorite features from each design to create the hi-fi prototypes.
Christine’s Wireframe of Home Page
Rachel’s Wireframe of Home Page
Swathi’s Wireframe of Home Page
Lindsey’s Wireframe of Home Page
Hi-Fi Prototype
After deciding on the color scheme and overall design, we got to work on the hi-fi prototypes.
Hi-Fi Home Page
Hi-Fi Donation Page
UI Style Guide
We created a UI Style Guide for this website for two main reasons:
Quick access to design guidelines while creating remaining prototype pages
Easy for future developers to create this design for AWARE website
Information Architecture - Sitemap
From the card sorting, we organized the new site architecture onto a sitemap.
Sitemap for New AWARE Wildlife Site Architecture
Color Accessibility
We decided to utilize the logo colors to design the new interface. To do this, we first extracted the colors and tried to find accessible colors of font that are readable with these background colors.
Color Accessibility Tests with 4 Main Logo Colors
Usability Tests & User Insights
After completing the hi-fidelity prototype, our team conducted usability tests on the redesigned AWARE website to see what is needed for further iterations. From these user insights, we each voted for our top 5 most important feedback to integrate into the next iteration.
User Insights & Voting with Yellow Dots
Feature Prioritization
After voting for our top ideas, we charted these ideas on a feature prioritization matrix, focusing on the value for the user and the effort for us to integrate these insights into the next iteration of the prototype.
Feature Prioritization Matrix for Usability Tests
Delivery
The video shows a demo of the AWARE Wildlife redesigned website hi-fi prototype. After several iterations, we developed a website redesign that highlights the important features of the nonprofit organization (home, donation, help with wildlife) and provides an interface that is enjoyable to use.
Future Opportunities
Incorporating social media accounts more on website
Scrollable dashboard (with more items) on home page
Finding more accessible color schemes
Automated chat bot that can fill out & submit forms
User accounts
