Wags & Whiskers Animal Rescue Redesign

TEam

Meg - Project Manager, Branding, UX/UI Design
Cortney Wiersma - UX/UI Design, Wireframing/Prototyping
Hetal Shah - UX/UI Design, Wireframing/Prototyping

Industry

Non-Profit

Company

Wags & Whiskers Animal Rescue

Duration

3 Weeks

UX Research

PROJECT OVERVIEW

This project will transform the non-profit’s website to better serve its mission and users. The redesign will focus on creating a clean, intuitive, and mobile-responsive site that improves user experience, increases engagement, and simplifies key actions, such as browsing adoption listings and submitting forms. We will also streamline navigation to make it easier for visitors to explore the site and donate to the rescue. Additionally, we’ll provide rebranding suggestions to ensure the website’s design aligns with the organization’s values and resonates with its audience.

User PErsona

Name

Age: 30s
Income: Middle class
Occupation: Office Jobs
Location: White Bear, MN
Relationship Status: Married

Alex and Robin are considering adopting a cat. They have discussed their desire for a companion and believe a cat would be a good fit for their current lifestyle. The cat should be tolerant of dogs and kids as they are planning their future. They are particularly interested in adopting from a local rescue, Wags & Whiskers, as they want to support their mission.

Interest

  • Making a decision
  • Finding a pet that fits their lifestyle
  • Support animal rescue

Goals

  • Find a loving companion
  • Grow their family
  • Want to get a cat first as this is their first time adopting from animal rescue

Needs & Expectations

  • Would like a cat that likes to cuddle and play
  • They seek a cat that is tolerant of dogs and children, recognizing that their family may expand in the future
  • Needs a quick and easy adoption process

Influence

  • Want to get a cat first as this is their first time adopting from animal rescue
  • Had family pets in the past, but not their own
  • Future Growth

Motivations

  • Research about cats ownership/training
  • They might attend adoption events
  • Generally home, but they go out 1x a week and have plans with friends/family on the weekends from time to time

Pain Points

  • Unfamiliar with the adoption process
  • Finding a pet that fits their lifestyle
  • Uncertain about dietary needs

PROBLEM STATEMENT

As an individual or family seeking to adopt a pet, I want an organized and easy-to-navigate website so that I can quickly find detailed information about animals and facilitates a smooth adoption process.

Content Hierarchy issues

Hero Image Issue

The current hero image/banner provides a poor initial user experience, lacking visual appeal and failing to effectively introduce the brand.

Confusing Structure

Chewy Wishlist and Amazon Wishlist displayed with inconsistent formatting and the footer is disorganized low contrast with the colors of pink on white.

Unorganized Body Content

 Important site elements are grouped in the right sidebar, as well as in the navigation. They can be easily overlooked or cause confusion due to duplication.

Recommendations

Improve Content Organization

Structure page content with clear visual hierarchy (headings, subheadings, white space), remove sidebar and keep all selections just in the nav, Redesign the wishlist for better clarity to users, and redesign hero and footer

Problem Definition

Content Inventory & Audit

We preformed a inventory and audit of the content of the website to evaluate all of the content on the site and hierarchy of items that needed to be addressed first.

IA Analysis & Navigation Issues

Redundancy

Duplicate menu items ("Events")

Unclear Nomenclature

Confusing menu labels ("Adoption Process" vs. "Forms")

Scattered Structure

Difficulty finding key information (adoption forms)

Solution:

Paragraph Consolidated navigation and clear menu structure for improved user experience.

UI Design

LOW-FIDELITY Wireframes - Desktop

LOW-FIDELITY Wireframes - Mobile

A/B Testing

We developed two distinct form versions. The first version adhered to a more conventional form format while enhancing the overall organization compared to the existing form. The second version employed a fixed screen size, preventing the need for scrolling.

A/b Test

TAsk One

‍Each team member conducted user testing sessions with 2-3 participants, guiding them through both versions of the adoption form.

TAsk Two

We encouraged participants to verbalize their thoughts and reactions, focusing on their understanding of each section, ease of completion, and the intuitiveness of navigation.

TAsk Three

We asked each participant to choose their preferred form version and explain their reasoning.

A/b Test Findings

Finding One

Our initial A/B testing revealed a near-even split in user preference between the two form versions, highlighting the strengths of each design.

Finding One

Analysis of user feedback revealed key preferences for specific features. Users preferred the progress bar, navigational sidebar and the “save & next” feature in the dog adoption form (A).

Finding One

The cat adoption form (B) excelled in its pet selection feature, household listing feature, and overall form structure. Users found these elements more intuitive and user-friendly. 

PATTERN LIBRARY

Defined Brand Guidelines: Established clear rules for using brand colors, typography, and visual elements.
Created an Asset Library:
Developed a central repository of icons and assets for easy access and consistency.
Established a Branding Library: Created a comprehensive guide with various logo versions for different uses.
Standardized Form Elements: Designed consistent form elements (buttons, inputs) for a unified user experience.
Created Reusable Components: Developed consistent page components like headers, footers, and navigation bars for efficiency.

Defined Brand Guidelines

 Established clear rules for using brand colors, typography, and visual elements.

Created an Asset Library

Developed a central repository of icons and assets for easy access and consistency.

‍Established a Branding Library

‍Established a Branding Library:

‍Standardized Form Elements

Designed consistent form elements (buttons, inputs) for a unified user experience.

Created Reusable Components

Developed consistent page components like headers, footers, and navigation bars for efficiency.

STYLE GUIDE

Color

The original brand colors were retained, with a darker pink added for contrast. To address the lack of variation in color combinations, we incorporated deep teal and verdigris, creating a balance of warm and cool tones. Finally, the stark white was softened for a more refined aesthetic.

Typography

We chose Chewy for our logo and display font to add a playful, organic touch, while Open Sans serves as our primary font for its readability and versatility. Both are available on Google Fonts for seamless website integration.

Icons

Our icons are modern, friendly, and playful, with rounded corners that complement Chewy’s bubbly style, reinforcing an approachable brand identity.

Images

we focus on natural, candid moments between people and their pets, showcasing diversity across age, ethnicity, and lifestyle to create an inclusive and emotional connection.

High-FIDELITY Wireframes - Desktop

High-FIDELITY Wireframes - Mobile

Prototype

Key Takeaways

Challenge

One of the challenges was combining everyone's ideas into one cohesive design. A challenge was synthesizing everyone's unique erspectives into a unified design.

Lessons Learned

We collaborated closely on this project, and everyone contributed effectively to their respective parts. We began by observing the website together, discussing our initial impressions, and identifying areas for improvement. Each team member took responsibility for a specific section and worked on restructuring it in the most efficient way possible. Meg worked on Home Page, Courtney worked on Cat adoption form and I worked on Dog adoption form.

Once we finalized the structure, we moved on to wireframing. Each of us designed a page independently and then shared our concepts. We provide constructive feedback and remained open to suggestions from one another. By working through the feedback and combining best elements from everyone’s work, we were able to refine our designs to achieve the best possible outcome.

What worked particularly well for us was the balance between independent thinking and collaborative refinement. The continuous exchange of feedback and openness to others' ideas played a key role in the project's success. We also tested different versions of our designs with individuals outside our team, collected their responses, and used that input to further enhance the design.