AAF Website Redesign
Tools:
Figma, Figjam, Zoom, Google docs, Trello
Roles:
Design team lead
Time Frame:
4-5 weeks

Animal Adoptions of Flamborough (AAF) is a no-kill shelter focused on connecting families with resources and support during the adoption process. The website educates families, fosters connections, raises awareness, and builds a community for adoptees and adoptive parents. Its goals are to streamline adoptions, attract donors, and grow a network of volunteers. They needed a website redesign to enhance user navigation and improve site accessibility.

Before
After

Our goal:

The goal of the website redesign was to make it so that the AAF website better serves its users and address the organization’s needs. Ensure easy navigation and clear, concise presentation of essential information, while focusing on making volunteer opportunities easy to find and enhancing the overall user experience.

We started by exploring how best to support our users.

To better understand our users’ needs, we conducted surveys to identify issues with the current website. Results indicate that adoption information should be the top priority, followed by options for donations, general information, and volunteering opportunities. With 36 survey responses, we found that 60% of users are over 51, 25% are retired, and 94% have adopted. These insights have been essential in guiding our content hierarchy and decision-making going forward.

Users said:

“The options of donating financially or with items/food/litter, etc. could be made clearer on a new site.”
“The font and writing style is usually in capitals which makes
it hard to read. The images in the website have words in them that make it not accessible to screen readers.”
“The site is difficult to navigate, the information seems scattered. As a potential foster/volunteer, I had a difficult time finding information on fostering opportunities.”

Our user persona:

This user persona represents a typical visitor to an animal shelter website by highlighting key characteristics relevant to adoption and animal welfare. Daphne is driven and community-focused, qualities often found in individuals who support shelters and animal causes. Her desire to connect with others in a new city indicates she may value volunteering, fostering, or participating in local events, all of which shelters frequently promote to build engagement. Her passion for animals suggests she’s interested in adopting or contributing to the shelter's mission, making her a strong match for services and information the site provides.
Demographics:
Name
: Daphne Lane
Age: 45 Occupation: Owner of a small finance company
Location: Hamilton, ON
Marital Status: Single

About: Daphne is an ambitious and dedicated woman determined to escape the rat race by relocating to Hamilton, ON. She is eager to find a sense of community in her new surroundings. She is also passionate about animals and hopes to connect with fellow animal lovers.
Frustrations:
- Gets frustrated with poorly built websites
- Having a hard time finding some sense of community
- Looking for ways to meet new people

Gains/Goals:
- She wants to be a part of her new community
- She is looking for ways to donate her time and money
- Wants to interact with animals

Now that we know who our user is, we can begin to find a solution

Before exploring solutions, we began by reviewing the existing site's sitemap and content. The site’s structure featured multiple navigation bars, making it challenging for users to find the information they needed. Our goal was to develop a streamlined navigation system that enhances usability and enables users to quickly access relevant content. The current navigation complexity had been a significant barrier to user experience, so a clear, simplified approach was essential.

Existing sitemap:

aaf existing sitemap

Content Inventory:

The current content hierarchy fails to emphasize the most critical information. At first glance, the red color on certain items stands out, but this choice reflects the brand color rather than a strategic attempt to draw attention. Key details, like shelter information, are lost amid the dense text on the homepage. Additionally, inconsistencies in font styles and line spacing disrupt readability, forcing users to constantly adjust their reading approach to absorb the content.

How we improved our user's experience:

AAF new sitemap

Revised sitemap

The revised navigation system provides a single, central menu to guide users directly to their destination, allowing them to find the information they need quickly and efficiently.

Wireframe iteraetions & annotations

Then we engaged in a thorough process of iterating and annotating our wireframes, refining each version based on user feedback and insights. This iterative approach allowed us to explore various design possibilities and make necessary adjustments until we developed a solution that effectively addressed our users' needs. Through careful evaluation and adaptation, we ensured that the final design was user-centered and aligned with our goals.
a/b testing for aaf website redesign

A/B Testing

We then conducted A/B testing, where users overwhelmingly preferred Test B for its simplicity and ease of navigation. This version provided an immediate overview, allowing users to see all the information on one page without the need to leaving the page. The volunteer form was particularly well-received, as it was described as easy and quick to navigate, with users appreciating its intuitive structure. Additionally, Test B enhanced accessibility; elements such as dropdowns and buttons were clear and user-friendly, making the overall experience more enjoyable for users.

Then we added colour

In developing our visual language, we prioritized using easily readable fonts and ensured that all our colors complied with the W3C accessibility guidelines. We incorporated the color red, the only existing brand color, and modernized the logo to enhance its legibility at various sizes.
AAF style tile displaying AAF brand elements

What was the impact?

Our client was delighted with the solution we provided. Our design not only fulfilled their requirements but also brought their brand to life, creating a vibrant and engaging experience that exceeded their expectations. We look forward to continuing our collaboration with AAF to bring this vision to life and help even more animals find their “fur-ever” homes!
High-fidelity prototype >

Other Projects:

Cookie Jar landing page and app screen

Cookie Jar

Managing finances can be daunting, especially for those facing financial literacy challenges. This project seeks to create a simple, stress-free tool to foster positive financial habits.

View case study >
a few screenshots from TechEase app

Techease

Managing finances can be daunting, especially for those facing financial literacy challenges. This project seeks to create a simple, stress-free tool to foster positive financial habits.

View case study >