Find Fido
Search interface design for a conceptual pet adoption site tailored specifically for dogs aims to connect potential adopters with their perfect furry companion. The primary objective is to streamline the adoption process by bringing together multiple adoption agencies within one easy-to-navigate platform.
Wireframing Find Fido
Focus on site layout, determining UI patterns for main site navigation, search and content organization. Website structure and general page layout became finalized while creating the wireframes.
Wireframe layout for the site's home page.
Wireframe layout of search query results.
Details for selected search result.
Newsletter and email notifcation sign-up.
Wireframe of a user's account profile editing feature.
Wireframe of saved searches and custom filtering managed by a user.
To view a PDF containing high-res versions of the final wireframes, click the ‘Download’ button below.
Designing Find Fido
Color Selection
When selecting the color palette for the Find Fido website, I wanted to use colors that provide a fun, and welcoming experience. The act of adoption is something that should not be taken lightly. There is innate response of joy that most people have when opening their home to a new pet. The aim of this website was to capture some of that emotion.
Yellow -Elicit feelings of joy, happiness, and optimism.
Blue -Know to instill trust and responsibility. Blue is a color that can bring about calmness and trust when building relationships.
Find Fido color palette; #F7B733 and #084489.
The combination of these two colors provide a complementary color palette, but also in their subdued use, help generate the feelings associated with pet ownership and the relationships we have with our pets.
Logo Design
The idea behind the logo was simple; kept it simple. How can I convey the site’s core function in a playful and fun manner? Utilizing the site’s name, in conjunction with the core function of searching for, and adopting a dog. The images below showcase some of the logo concepts before finalizing the design.
Logo variants explored before finalizing design (right).
UI Patterns
When designing the website, I leveraged recurring UI patterns to solve common design problems. Using these patterns enable a quick site design, specifically when addressing usability issues with navigation, content organization and search capabilities.
Horizontal Navigation Menu
Provides fixed location of pages within the site users can navigate. Persistent navigation remains on all main site pages.
Accordion Menu
Provide quick navigation to search filtering criteria without leaving the page. Sub-navigation for main Search page. This enables filtering criteria and search results to be viewed on the same page.
Search Filters
Filtering options to provide contextual search results based on user input. Provides ability to narrow and improve search results. Search filtering within accordion menu. (left) and home page search box with filtering (right).
Search Results
Users are presented with a list of results, relevant to the search criteria input. Results are listed with image and brief description of each available adoptee.
Autocomplete
Enabling quicker search filtering and results by pulling from existing data set. Provides suggested results based on user input. Listed results are displayed for user to select most relevant match.
Favorites
Provide means for self-curation of content by saving or “favoriting” searches and available adoptees. This will enable repeat use, streamline future searches and allow users to “opt-in” to receive notifications based on saved searches and favorites.
Center Stage
Heighten importance of content by placement and visual dominance of elements. Main focus of website is to support uniting people with available dog adoptees. Search is key to this goal.
Article List
Curated article on homepage to acclimate users to the world of pet ownership and adoption. Article used to set expectations of responsibility and resources needed to care for a dog. Provide title, brief description and call-to-action.
Final Mock-Ups
Find Fido website home page. Main call to action is "SEARCH."
Find Fido main search page displaying filtered results.
Selected search results detail page. Provides pet profile information detailing adoptee.
Find Fido email an newsletter subscription sign-up form.
Ability to manage and edit account profile information.
A user's saved searches for repeat use, and favorites to bookmark potential adoptees.
To view a PDF containing high-res versions of the final mock-ups, click the ‘Download’ button below.