Day 4:
Prototype the Solution

Prototype

For the CityPups website prototype, I wanted to take the parts I believed were intuitive from my inspiration websites, which were AdoptAPet.com, PetFinder.com, and Bumble. My goal is to convey a personality with the dog’s profile and help dog seekers get a good feel for the dog they are interested in as well as any practical requirements they need from a pet dog before emotionally investing any further in the adoption process.

Home Page

For the homepage, I decided to follow the convention set by AdoptAPet.com and PetFinder.com and designed the page to have the typical left-aligned logo and horizontal navigation bar on top of the page.

I noticed the primary CTA and feature of the homepage of both pet search sites was a concise search form for the users to get started on their search easily and quickly. I believe that by making the form no more than three basic search inputs, it jumpstarts the users’ search without committing too much time to make several selections and decisions. The three inputs I chose were Zip Code, Age, and Breed, because I believe these are the most basic physical features. In a high fidelity prototype, I would only make the Zip Code required as I think this is the minimum information needed to begin a search query for a city-dwelling dog seeker.

Search Results Page

For the search results page, I chose to follow a typical product browsing page that ecommerce sites employ so that there was an immediate familiarity with the browsing process for users.

The search result page is formatted like an ecommerce website where the thumbnails of the dogs are the main focus, and underneath are the dogs’ basic information: their Name, Age, Gender, Breed, and Location. The Name is bolded and larger than the other information because I want dog seekers to think of these dogs as more than stats that fit their needs, but as a living thing. The top part of the page has a detailed, left-aligned filter bar and a right-aligned Sort feature.

I believe exact filter options would still need to be more precisely defined through further user research and testing in future stages of the project, such as home size needed, amount of time able to be left alone, and comfortability with strangers.

Dog Profile Page

I deviated from the typical aggregate pet search website for the dog profile page. For the profile page, I wanted to adopt some of Bumble’s features that I found gave the profile subject more character and life than an ordered list of facts. I broke the information up into four main sections: Basic Info, Personality, Story, and Adoption Info, so the information was easier to digest and decreased the mental load of the user as they try to piece together the dog’s practical features and personality.

I also believe having a big hero photo in each section will help users keep in mind the dog they are reading about and be able to create a more life-like picture in their minds of what this dog is like.

My goal was to make the dog’s profile less like an athlete’s stats page and more like a personal profile that the dog would have created for itself on an app like Bumble. Finally, at the bottom in the last section is where I decided to place the CTA because I believe to make a good match, I want to encourage the user to read through the dog’s entire profile before reaching out to the shelter to move forward in the adoption process.

“Send a Message” Pop-Up

The final screen in my prototype is the Send a Message pop-up screen that shows when users click “Send a Message” at the bottom of a dog’s profile. Again, I wanted to reinforce my goal of “humanizing” the dog, so while the user is composing their message, I designed the pop-up to display a large hero image of the dog to keep it in the user’s mind as they move forward with their dog search process. I also designed the form to mention the dog’s name at the top of the form in case the user has difficulty recalling the name when composing their message and to avoid the inconvenience of returning to the dog profile while trying to send a message. For the form, I kept it simple and only ask the user to provide their Name, Email, Phone Number, and Message to make the experience seem as easy as commenting or direct messaging on a social media app. (In a high fidelity prototype, I would only require either Email or Phone Number.)

Confirmation Message

Once the user clicks Send, I have a confirmation screen, so that the user has the feedback that their message has been successfully sent. At the very bottom, I placed a CTA for users to continue their search, and the link takes users back to their previous search query so that they would not have to restart their search and re-select all their filters again. Also, on the confirmation screen, I again placed a small avatar of the dog they are messaging about and added a little message as if from the dog. This is to keep my theme of a dog’s personal profile and make it seem like the user was directly messaging the dog itself. I want CityPups to help city-dwellers to start forming a personal connection with the dog through the dog’s profile because a key finding during the primary research, many users were more concerned with the dog’s personality and temperament than they were with the look, age, or breed. Moreover, city dwellers were more concerned with the dog’s behavior in urban environments than any physical statistical feature, which is why I think it is important to skew the profile page and search experience to focus more on the personality and feeling of the dog, rather than its breed or age.