Mayor’s Alliance for NYC’S Animals
Non-profit website redesign, reorganization, and branding strategy.
Client
Mayor's Alliance for NYC animals. Non profit organization.
Role
UX Research, Visual Design, Prototyping, Product Design, Usability Testing
Tools
Figma, Photoshop, Illustrator, Miro.
Timeline
4 Weeks
Team
Victoria Demetrio (me), Cristina Samper
Sully Follin, Charlie Krawczel
Project Deliverables
UX Research report, Mifi Prototype, Hifi Prototype
The Problem
The existing website faces usability challenges, as it is confusing, disorganized and overwhelming.
It fails to effectively communicate the importance of responsible pet ownership and spaying/neutering initiatives and lacks user engagement.
Project Goals
To enhance user experience, making it a compelling and user-friendly space that not only increases volunteer but also educates and encourages pet owners to actively pursue microchipping and spaying/neutering for their pets.
_edited_edited.png)
The Solution
We propose a comprehensive solution involving website redesign, reorganization and a branding strategy. This initiative aims to eliminate user difficulties in finding crucial information during important situations, while increasing user engagement.
As the primary resource for information and veterinary care in NYC, the Mayor's Alliance will become a user-friendly platform, benefiting both current pet owners and engaging increased commitment from volunteers.
The Impact
To evaluate the effectiveness of our website redesign, we focused on two crucial usability tasks: accessing information about spaying/neutering and facilitating donations.
Prior to the redesign, it took users an average of 3.25 minutes to navigate the site to perform these tasks. After the redesign, this time was substantially reduced to just 1.30 minutes. This represents a significant improvement, reducing navigation time by an impressive 60% percent.
Existing Website Analysis
We met with the Stakeholder at the beginning of our research, as well as throughout the project to learn more about the existing experience and identified the following pain points:
-
Problems when optimizing search queries.
-
Poor browsing experience due to disorganized and diverse navigation bars.
-
Information overload without clear navigation guidance.
-
Current color palette is perceived as outdated.
Heuristic Evaluation
We conducted an analysis of the Mayor's Alliance for NYC's Animals website and identified the following issues.
Key Research Themes
We conducted 50 surveys and guided 4 semi-structured interviews from possible users of the Mayor’s Alliance for NYC’S Animals website.
All primary research was conducted remotely. Based on the survey and interview findings, we identified the following user's pain points in using the existing website:
-
Poor navigation is a result of overwhelming and disorganized information on the site.
-
Locating the nearest veterinary centers during emergencies is not easily accessible.
-
The number of options for adopting dogs/cats can be overwhelming.
-
Crucial information such as medical history, microchip details, and spaying/neutering procedures and care, is lacking.
Understanding the User
Based on the results of our research, we created two different personas that represented the potential users that the Mayor's Alliance for NYC'S Animals website could have.
User Journey
With the user in mind, our team created the current and future user journey, focusing on the process rather than the final solution.
The future journey will make sure to eliminate user pain points when searching for the required information and build user engagement.
Ideation
Based on our persona's needs, our team came up with ideas to meet them and prioritized them based on their impact and feasibility.
After breaking down the interview responses into I like, I wish and what if, we came up with ideas but using an impact-effort matrix we were able to select the ideas with the greatest impact and feasibility.
Taking into account the needs of our users, the main ideas that emerged from the ideation phase were the following:
-
Information Reorganization
-
Condense multiple navigation bars into a single one.
-
Enhance information on Spaying/Neutering and Microchipping.
-
Custom Search and Location Tool.
Information Architecture
The new user flow simplifies and streamlines the experience for web users. The underlying conceptual model demonstrates good behavioral design; you only need to understand the process once to navigate through the various tabs smoothly.
Iterations
Due to the remote nature of the project, our team started the process with exploratory sketches in FigJam, which evolved into lofi sketches. We then merged ideas to develop a mifi prototype using Figma.
The process was dynamic and interactive. Following an initial approach, we presented it to stakeholders and incorporated their feedback to iteratively adjust and refine the design until achieving the final result.
User Testing
We conducted user testing on the existing website that allowed us to identify critical issues and also receive valuable feedback to inform our design.
The main findings from the usability testing were:
-
Streamline and Consolidate Navigation: Create a seamless browsing experience that simplifies user interaction and reduces visual clutter.
-
Optimize Information Organization: Review and improve the overall information organization to ensure clarity and ease of readability. Group related content logically, making it more accessible for users to find relevant information quickly and efficiently.
-
Unified Footer Design: Consolidate a new and unified footer to provide users with consistent access to essential links, contact information, and other relevant resources.
-
Website Branding and Layout Update: Update the layout for a more modern and engaging look, aligning with current design trends and user expectations. Make sure it reflects the organization's values and enhances the overall user experience.
Visual Design
For the UI redesign, we chose to replace the red color from the original website with two complementary colors: green and orange. This change adds a sense of fun and freshness to our design, making the website more inviting for users.
The Solution
Following weeks of dedicated effort, the redesigned Mayor's Alliance of NYC Animals website now offers users a seamlessly streamlined experience.
With an emphasis on ease of navigation and visually appealing design, users can effortlessly find the information they seek. The revamped site encourages users to delve deeper, fostering engagement and support for the organization's mission of promoting animal welfare in New York City.
Goals
Returning to our project's main goal, our redesign aimed to improve the user experience, making the Mayor's Alliance of NYC Animals website more engaging and easy to use.
By accomplishing this, our goal is to boost volunteer participation and educate pet owners on the significance of microchipping and spaying/neutering.
Project Reflections
The Mayor's Alliance for NYC's Animals project personified teamwork and dedication. Through virtual collaboration and extensive research, we created solutions based on user feedback.
The Mayor's Alliance for NYC's Animals website redesign was both challenging and rewarding, emphasizing user-centered design and iterative development. Extensive research and testing provided valuable insights that guided our decisions to strike a balance between complexity and accessibility.
The Power of Storytelling: It helps us connect with our audience and ensures everyone understands the future user experience.
Design as an Iterative Process: By integrating user research and usability testing throughout the entire design journey, we caught issues early on and made quick adjustments.
Consideration for All: While our main focus was pet owners, it's crucial to weigh the product's feasibility, viability, and desirability for all user groups. All stakeholders matter.