Building
Before research, building AdoptaPaw (then named DYR) began with mapping out necessities, features, and priorities. Search and organization, branding, and pet profiles were to be focused on first before adding independent uploading and extraneous information.
Necessities
-
Responsive website (laptop/tablet/mobile)
-
New logo/UI kit
-
Search for pet feature
-
Search for shelter feature
-
Pet Profiles
With this information, mini-profiles were made to brainstorm potential users.
Research
After knowing what to look for and who to target, competitor websites were then compiled and analyzed. Websites such as Petfinder and Adoptapet were most closely related to the central point of interest, while websites such as the ASPCA official site, How I Met My Dog, and various pet compatibility apps were of similar themes.
Interviews were conducted with men and women between their 20s and 50s, married and unmarried, with jobs ranging from welder, student, and retired military. A survey was also sent out to gauge people’s opinions on their priorities when adopting a pet, the adoption experience, and adoption websites.
Interviews were conducted with men and women between their 20s and 50s, married and unmarried, with jobs ranging from welder, student, and retired military. A survey was also sent out to gauge people’s opinions on their priorities when adopting a pet, the adoption experience, and adoption websites.
​
It was found that many participants found that complete visibility of pet health and behavior was high priority, especially from those with prior adoption experience. Trustworthiness of the potential shelter was also important, as well as detailed information about pets. Unless looking to specifically adopt senior or sick animals, most participants wanted pets that would not cost them extra money in health bills or be too difficult to take care of.
​
For the website, strong navigation and filtering would be priority, as well as having a way for users to easily be able to contact shelters or owners with their interest. Having profiles that both display the pet’s personality as well as their history, with shelter information being easy to access. A section for at risk/senior animals would also be good to make apparent to those looking for them.
A feature roadmap was created to reflect this information....
...and a storyboard was created to understand the user’s point of view when designing the flow and priority features.
Design
Multiple thumbnails were drafted to consider potential ways to display and organize onscreen information. After deciding on pages for the homepage, browsing, and pet profiles were lofis and aesthetics considered. Potential renames were also considered at this stage, along with logo designs.
​
After lofis for web were drafted, homepage wireframes were reimagined into tablet and mobile forms. Components were designed and laid out to easily translate between screen sizes.
Logo designs and UI were designed at the same time, with a style kit and UI kit influencing each other. Bright and pastel colors were chosen to create a comforting and inviting atmosphere while complimenting the friendliness of the featured pets. A Style Tile and UI Kit were made to represent these.
Prototyping
For efficiency’s sake, designing the hifis and prototyping were done simultaneously, with the visual and interactive flowing into each other. This allowed responsiveness to be an active priority while constructing components and flow. Setting up a search page with a thousand cats named Oreo also removed the need to waste time on numerous pet profiles.
Pet Profiles were set up with a limited tagging system that highlighted their personalities while also making them easier to search for. The browsing page also features a preview feature for pet profiles to make browsing flow easier for users attempting to filter through many pets. A favoriting system present in competitor websites also makes it easy for users to save potential pets.
Other features such as adoption resources, a dashboard, and interview portals were also suggested throughout the site.
Testing
Testers were asked to navigate the site’s flow and experience. Feedback was received on the wording of some copywriting, content visibility, filtering options, as well as the usefulness of some sections and their hierarchy on pages such as the Homepage.
Positive feedback was given to the site’s aesthetics and feel, with tweaks made to certain areas, such as changing the shape of the sliders and adding the Favorite Pet button on the profile pages, which had previously only been in the browsing page.
Conclusion
AdoptaPaw was a challenge of content navigation and filtering, essentially a giant library of pages with different ways to display them and lead the user on a journey to find their most desired content.
As a nonprofit, displaying the site’s mission and priorities and projecting them onto the user in a way that encourages them to participate was also a key feature in creating the aesthetic, so a friendly yet clean design had to convey both a sense of comfort and professionalism.
Most of all, it had to make the user want to adopt a pet, so having a system where each pet is properly displayed was of utmost importance.
​
Overall, this project allowed me to display some of my unique aesthetic as well as hone my organizational skills in both the planning and designing of this website. The responsive aspect of it kept the content of each of the pages neatly laid out for maximum translatability beyond its three potential screen sizes. For a short flow, combining the designing and prototyping also made for some very efficient results and a highly responsive end product. I am eager to use what I learned here on future products.
