top of page

AWC Redesign

This endeavor aimed to construct a website flow for the Google UX Design Professional course. As the project progressed, it evolved into a comprehensive overhaul of my local animal shelter's website. This redesign will be executed once an engineer is identified to execute the finalized designs. I relished the opportunity to utilize the skills acquired from the Google UX Design Professional course to benefit a cause that I genuinely endorse.

Role: UX Designer and UX Researcher 

Duration of Project: 8 weeks (October 2021 - January 2022)

Tools used: pen and paper, Adobe XD

High Fidelity Prototype Link

Project Overview

The Problem

 The primary objective of this project was to revamp the Animal Welfare Coalition of Northern New Mexico's website to render it more user-friendly and visually engaging for visitors. The AWC's website had remained unchanged since 2008, and the organization sought to modernize it in response to user feedback. Specifically, visitors reported dissatisfaction with the lack of comprehensive information about the animals housed in the shelter, resulting in decreased foot traffic to the facility.

The Goal

The primary objective of this redesign is to enhance user-friendliness and facilitate visitors' ability to establish a connection with animals housed in the shelter. By implementing these changes, the hope is to augment the number of adoptions and donations received by The Animal Welfare Coalition of Northeastern New Mexico. The redesign aims to target users in the local vicinity, and explore strategies to enhance their chances of adopting or contributing to the organization through its website.

Research

The AWC's focus was on engaging with users in the North Eastern New Mexico region, as this demographic represents the primary audience for adoption from the shelter. For this study, I interviewed 5 users who live in Northern New Mexico, who are a mix of incomes, races, occupations, and consisted of adults with prior experience in animal shelters, encompassing adoption, volunteering, and donation processes. Additionally, two other user groups were identified: single adults seeking pets for personal companionship and adults with families seeking pets for household members.

Research findings corroborated many of the assumptions made by myself and the AWC. However, it further elucidated the critical need for a simplistic, intuitive, and user-friendly website design, specifically for animal shelter websites.

User Pain Points

Information

All research participants felt there was inadequate and unclear information provided by the AWC, both regarding the organization itself and the animals housed within. The participants expressed apprehension about the potential for shelters to be disingenuous about animals available for adoption, raising concerns about dishonest practices within the industry.

Organization

Numerous research participants identified the cluttered and disorganized layout of the original website as a significant deterrent to usage. The users emphasized that disorganization and clutter frequently lead to a loss of interest and frustration, ultimately resulting in decreased time spent on the website.

Convenience

Given that many research participants lived in rural areas, they expressed a strong desire to preview available animals online before physically visiting the shelter. The inability to view animals ahead of time was identified as the second-largest pain point, deemed highly inconvenient by users.

Paper Wireframes

The AWC's focus was on engaging with users in the North Eastern New Mexico region, as this demographic represents the primary audience for adoption from the shelter. For this study, I interviewed 5 users who live in Northern New Mexico, who are a mix of incomes, races, occupations, and consisted of adults with prior experience in animal shelters, encompassing adoption, volunteering, and donation processes. Additionally, two other user groups were identified: single adults seeking pets for personal companionship and adults with families seeking pets for household members.

Research findings corroborated many of the assumptions made by myself and the AWC. However, it further elucidated the critical need for a simplistic, intuitive, and user-friendly website design, specifically for animal shelter websites.

Digital Wireframes

Digital wireframes of appointment confirmation page and the adoption page

The original version of the AWC website did not feature listings of animals available for adoption at the shelter, instead directing users to another website for this information. To improve convenience and enhance the user experience, the AWC sought to shift to a model where animals were listed on their website. Given our mutual desire to promote adoptions, we opted to showcase available animals prominently throughout the website, incorporating adoption listings on multiple pages to capture user interest.

In the original design of the website there was not very many indicators of social media despite the AWC being present on multiple platforms so I wanted to highlight their social media pages on every page.

Screenshot+(100).jpg
Digital wireframes of the set appointment page and contact page

The AWC expressed a desire to incorporate a scheduling feature, enabling users to easily arrange a time to meet animals for adoption. To ensure a cohesive and streamlined user experience, we opted to maintain consistency in the design of scheduling and contact forms throughout the website. This approach served to simplify the user experience, making it easy for visitors to navigate and engage with the various components of the website.

Low Fidelity Prototype

Usability Testing: Findings

For this study, I recruited 5 people to test the low fidelity prototype. Participants were a range of incomes, races, occupations, and ages. Below are the top 3 key takeaway from this study.

#1

Several research participants expressed their opinion that the social media icons on the website were excessive and irritating, with some suggesting that smaller icons would be more appropriate. This feedback highlighted the importance of considering user preferences and making adjustments accordingly, ultimately resulting in a more streamlined and user-friendly design.

#2

According to several research participants, the headlines for news and announcements on the website were awkward in appearance. Furthermore, some users expressed dissatisfaction with the brevity of the article descriptions and would have preferred to see a bit more information before clicking to read more. These insights underscore the significance of prioritizing user feedback and iterating on designs to ensure that the final product aligns with user expectations and preferences.

Mockups

mockup of landing page

The AWC and I were mindful of the importance of color accessibility when selecting the color palette for the redesign. We chose to retain the organization's signature colors of red, green, and yellow but made slight modifications to ensure that they were more accessible to all users. Additionally, I opted for a white background to create a clean and uncluttered design that allows for a more focused viewing experience, while also effectively directing users to key pages through the use of imagery and icons.

Making the major call-to-action buttons prominent and easily identifiable is a crucial design aspect to ensure that users are guided towards the desired actions. To achieve this, the AWC and you decided to use a bright and attention-grabbing yellow color for these buttons. This color choice not only stands out against the background but also provides a strong contrast that draws the user's attention. By doing so, users are more likely to identify and engage with the important buttons, leading to a better user experience and increased conversions.

mockups demonstrating redesign of buttons

High Fidelity Prototype

Conclusion

Learning

Entering the realm of UX design can be a daunting task, yet as a novice, I was eager to broaden my horizons and cultivate my abilities. Despite having limited familiarity with Adobe XD, I diligently invested time in researching techniques to incorporate features such as animations and drop-down menus into this project.

Challenges

Although my lack of familiarity with Adobe XD made the task daunting, I was excited to be learning a new software and tried to absorb as much knowledge as possible. Similarly, conducting user research with participants I did not know posed a challenge. It was difficult to analyze data and glean insights without the contextual understanding that familiarity with the interviewees would provide.

Reflection

Undertaking this project was a daunting prospect, given that it entailed a significant amount of work and pressure, especially since it was my first time having a design implemented on a live website. However, despite my apprehension and trepidation, I recognized it as a chance to sharpen my existing skills and expand my knowledge in the field of UX design.

Location

Austin, Texas

Email 

Social

  • LinkedIn
bottom of page