Homeward Bound Animal Rescue
Portfolio Project | UI Design | Search + Filter Options | View Prototype
Tools: Adobe XD, Illustrator
Scope: UI Design for homepage, account page, search results, product detail page, and adoption page
Overview
Homeward Bound Animal Shelter is a fictitious pet rescue created to examine how to implement UI design patterns where search and filter options are integral to the user experience and site goal - in this case, matching a rescue pet to their forever home.
Research
Assessing the positives and negatives of different pet rescues, as well as what other sites reliant on search/filtering do well. The navigational patterns from established, well-known sites were just as applicable to solving the UI design crisis of a pet rescue, while maintaining the heart and soul of the goals driving Homeward Bound.
Design Process
Logo
Features a dog and cat looking forward to their future home. Blue geometric shapes create the cozy home to match with the same blue silhouette of the pets, while muted green and yellows are used to define the sun, sky, and yard. The edges around the shapes have an intentional gradient to look drawn by a crayon or marker, inspired by the kind of drawing that can be found on the refrigerator.
Shades of blue are incorporated throughout the rest of the site to help reinforce an “outside” feel (ex. blue skies) to coincide with the logo of pets seeing their future home on the horizon.
Primary Objectives
Homeward Bound Animal Rescue’s primary objective is to adopt animals into their loving forever homes, so the focus of the design process was on how to best and most accurately match users with the right pets based on their preferences. Additionally, the rescue seeks people who are available to foster pets waiting to find the right home.
#1 Emphasize accuracy and simplicity in the the Search + Filter process to match a pet to their forever home
#2 Create a way to better identify possible pet matches for foster eligible volunteers
Featured UI Patterns
To achieve the goals of designing a site to meet the primary objectives, the following complementary UI Patterns were carefully chosen to emphasize ease of navigation, filtering, and searching and browsing and are reflected in the below low-fidelity wireframes.
Grid of Equals leveraged on search results page with Cards for displaying pet photos/details in rows of 3 with customizable display ranges
Pagination on photo carousels to allow users control of rotating images
Breadcrumbs included at the top of all pages to allow user another escape hatch to navigate back home and a prominent logo at the top to send users back to the homepageMulti-select Dropdowns that allow users to check/select multiple options while searching and filtering
Checkboxes have been used on the application form where it is required both boxes are checked to proceed
Input Prompts provided on forms to guide users with correct formatting on form entry
Top Nav Bar lists links in order of importance to assist navigationToggles used in all areas where multiple selections are required to avoid accidentally "checking a box"
