Mother Gaia Animal Rescue
Non-Profit Website Redesign
A UI / UX Case Study
The current dilemma with Mother Gaia Animal Rescue's interface is multifaceted. This ranges from an unclear surrender policy, to navigation imperfections. This is in addition to the greater issue with pet adoption as a whole where prospective owners are unsure of their future pets needs. This causes a high rate of adoption returns, which is not ideal.
We aimed to ease the strain potential new owners have with adopting their forever pet by creating an intuitive interface and adding descriptive pet profiles for clarity on each pets needs.
Introduction:
-
The purpose of this UI/UX case study is to demonstrate the process of conducting a heuristic analysis on an existing website and service, identifying areas for improvement, and collaboratively redesigning a platform. Our chosen project, Mother Gaia Animal Rescue (MGAR), stems from a shared passion for animal welfare and a belief in their mission. The goal is to revamp this small non-profit's online presence, driving more traffic, and, ultimately, increasing animal adoptions.
-
MGAR's current website dates back to the early 2000s and is constructed using Wix and basic HTML. It was outdated, lacked modern usability standards, and heavily relied on costly third-party services.
-
In the wake of the COVID-19 pandemic and the return to normalcy, a concerning trend was the surge in pet surrenders as owners faced new work demands. MGAR, being a small non-profit, heavily depends on donations and personal funding for animal rescues and fosters. Our case study is significant because it tackles a real issue, affecting the quality of animals' lives. The redesign aims to address these issues, particularly with a mobile-first approach, which saves money and enhances the overall adoption process.
Problem Definition:
-
Our primary objective was to identify the key factors that draw people towards specific animals, understand the challenges experienced by MGAR's stakeholders, and refine their browsing and surrender processes. MGAR already boasts an impressive 90% success rate in matching animals with suitable homes. Thus, our focus was not on altering their evaluation process. However, users reported during interviews that the website felt "clunky and outdated." Through competitive analysis, we identified valuable features and site architecture elements that we integrated into our redesign.
-
The pain points included navigation difficulties, an outdated website appearance, pets being adopted based on looks rather than compatibility, and expensive third-party services draining revenue.
-
We conducted interviews with MGAR's owner, previous clients, and recent pet adopters. We also distributed quantitative surveys, amassing 12 responses that yielded valuable data and insights. We used these insights to create a feature prioritization matrix and crafted UX scenarios to ideate an enhanced platform.
User Research:
-
Collaboratively, we created a shared Google Drive folder, serving as a central repository for our design process and research data. We conducted three interviews - one with MGAR's owner and two with recent pet adopters. Additionally, we disseminated a quantitative survey through social media, garnering 12 responses.
-
We employed a systematic framework using Google Services, storing interview transcripts, survey responses, key insights, individual outputs, and group collaborations. We also engaged in a FigJam board, aggregating data from remote moderated interviews, quantitative surveys, competitive analyses, SWOT assessments, and heuristic evaluations.
-
- Our research objectives were to understand motivations behind pet choice, identify limitations in the pet adoption process, and create a solution to match pet personalities with prospective owners.
Key findings encompassed factors like the need for education about responsible pet ownership, preferences for honest pet profiles, and concerns about impulse pet purchases.
Participants wanted in-depth information, such as pet likes and dislikes, activity levels, size, age, and behavior with other animals.
Ideation & Conceptualization:
-
After recording interviews and creating an affinity board to consolidate findings, we utilized an Empathy Map Canvas to drive the ideation process. We also constructed a feature prioritization matrix to determine which features to include within our limited timeframe.
-
While wire-framing designs, we collaborated on a style tile aligned with MGAR's branding. We designed, tested, and iterated our design from low-fidelity box models to high-fidelity mock-ups, adhering to mobile-first and atomic design principles. A central consideration was addressing the problems users encountered when browsing animals online and when adopting a pet.
-
Regular collaboration with MGAR at the project's outset ensured alignment with the organization's challenges and the wider issues faced by pet shelters in the Denver Metro Area. Our mobile-first approach caters to the majority of internet users, and our internalization of the screening survey and pet profiles saved MGAR from costly third-party services.
Wireframing & Prototyping:
-
Based on UX scenarios, we swiftly transitioned to crafting wireframes for an MVP encompassing the landing page and the adoption and surrender flows.
-
Figma was our primary tool for prototyping design iterations, progressing from low-fidelity box models to high-fidelity interfaces.
-
Our team members shared clickable prototypes with initial survey respondents and contacts in our network. User testing feedback was logged in our shared repository and subsequently integrated into the final MVP design
-
User Testing and Iteration:
-
Our user testing involved sharing clickable prototypes, still images, and recording user feedback.
-
Feedback highlighted issues with size and spacing inconsistencies, particularly on mobile devices. Specific concerns included an oversized navigation bar, text alignment in the footer, and padding between UI elements.
-
To address these concerns, we adjusted the navigation bar's size, realigned text in the footer, and fine-tuned the padding between elements within the UI.
Visual Design:
-
- Our team collaborated to define the typography, color scheme, and create an MVP-style tile.
-
Quickand and Robotoslab fonts were chosen for their curvy, organic nature. The color palette adopted calming earthy tones, inspired by MGAR's brand, encompassing light green, blue, and brown hues. We sourced stock photos of pets for our high-fidelity mock-ups and introduced a needs and personality chart, providing a visual representation of essential pet qualities.
-
- User tests affirmed that our UI design constituted a significant enhancement. The redesign notably improved the visibility of pet needs, streamlined website navigation, and offered an improved FAQ section and surrender page for clearer communication.
Results & Conclusions:
Adoption and Surrender User Flow Demo
-
-
The project yielded several positive outcomes, including:
- A significantly improved user experience.
- Enhanced transparency regarding pets' needs and personalities.
- A modernized, mobile-friendly interface.
- Increased client satisfaction.
-
- The primary problem, an outdated website, was successfully transformed through modern design and architecture. By doing so, we reduced the organization's reliance on costly third-party services. The introduction of the needs and personality chart now empowers potential adopters with more information about the pets before they make a choice, leading to more informed decisions and reducing the likelihood of pets being returned.
-
- Our design leveraged the Material UI library, enhancing both the user interface and user experience with micro-interactions and a fluid, organic visual style. Users could now easily find crucial information about each pet and had a smoother, more transparent experience.
Lessons Learned:
-
This project provided valuable insights and lessons for both design and teamwork:
- We learned the importance of managing conflict gracefully.
- We realized that a Minimum Viable Product (MVP) approach is often more practical than aiming for perfection.
- The project highlighted the significance of effective communication in collaborative work.
- We also learned how to balance design outcomes with design outputs.
-
In retrospect, we could have handled conflicts with more tact and patience. The project's focus should have remained on design outcomes, and we should have collectively adhered to decisions made early in the process.
-
The project taught us the importance of checking in and offering or asking for help when necessary. Effective collaboration relies on team members being clear about what is expected and what has been agreed upon.
Future Directions:
-
In the future, we plan to revisit our UX scenarios and continue to enhance the pet adoption and surrender process as more resources become available
-
Future iterations of this design could include features like:
- Donation functionality.
- Volunteer sign-up.
- AI chatbot follow-up services for pet owners with inquiries.
-
This case study informs our approach to future projects by emphasizing the importance of collaboration, effective communication, and the value of Minimum Viable Products (MVPs)
Acknowledgments & Credits:
-
- Jason Daniel Lutz - UI / UX Designer / Researcher
LinkedIn: Connect with Me
Email: jason.lutz@du.edu
- Marjorie Gross - UI/UX Researcher
- Jennifer Lynn
- Dominic Velando - UI/UX Designer / Researcher
-
Special thanks to Tiffany, the owner of MGAR, for her dedication to animal care and rehoming.
We also extend our gratitude to the University of Denver and the academic staff, including our instructor Sean Keating, and TAs Sergei and Zoey.