A7: Interactive Prototype (Wireframes) for a Pet Adoption App

Click any image in the gallery below to get a closer look.

Interactive Mobile Wireframes can be found here.

Interactive Web Wireframes can be found here.

For A6, we were tasked with creating interactive wireframes. Specifically, the spec is as follows:

For this assignment, you will choose a design challenge from the options below and create a web and mobile app component, and develop interactive wireframe prototypes of each. (You only need to make it clickable, you do not need to include the macro-interactions.)

For the design challenge you may choose from one of the following three application areas. In all cases, assume that your target user is a college student, and that your design goal is to create a system that makes the experience more fun, more meaningful, more efficient, or any combination of these goals. You may decide the features or goals, but we have included a few examples that you may use. You only need to create ONE end-to-end user task. For example: the user flow of a college student who needs to create and submit a reservation for a music room on campus.

  • Pet Adoption: process for pet adoption, finding a pet to adopt, keeping track of pet adoption process, donate to shelter, etc.
  • Music Rehearsal or Library Room reservation: creating or changing reservations, searching for rooms, filtering, possibility of reserving materials, etc.
  • Task management: creating and managing personal to-do lists, for academic or general life, anti-procrastination techniques, etc.

In addition, we were to follow Apple iOS guidelines or Google Material design guidelines.

I chose to do an app/website pair for pet adoption, specifically adopting a dog, using Google material design guidelines.

The Design

The City Humane Society website for desktop and mobile prioritizes four main functions: adopting a pet, volunteering, donating to the humane society, and an about page for help/information about the organization as well as the site. In addition, there are also login/profile management pages. While the entire site is mapped out as follows below, I focused only on the adopt-a-dog path, as I mentioned earlier.

City Humane Society Sitemap
This is the basic sitemap for the City Humane Society website. The adoption pathway is the most complex, with other pages being stand alone pages, or leading to only one additional page

For my design specifically, ignoring the other pages that I did not focus on, a user would:

  1. Start on the Home page, move to the “Adopt” page, which lists categories of animals
  2. Move to the “Dogs” category page, which lists different dog profiles
  3. Move to a specific “Dog Profile” page, with expanded information on the dog
  4. Tap the “Meet Me” button, which would lead some form of external communication, such as an email or messaging system to contact the humane society and set up a meeting with the animal.

The site makes use of a flat-minimalist design. I repeated elements such as thin, grey lines for dividers, and the image placement/layouts across desktop and mobile share similar visual structures. As the main goal of this site is for adopting a pet, I used a tiled/repeated block layout with elements that are easy to add or remove without messing up the layout—this is primarily to accommodate changes to the site on the humane society’s end, such as adding or removing a dog listing.

A dog listing can easily be added or removed from this page. Additionally, the layout is similar to many online shopping websites, making it easy for a user to browse through listings.


These blocks can also be added, removed, or changed easily based on the needs of the humane society.

The simple design allows the content, specifically images of the actual pets, to stand out. Most other images besides the pictures of the pets I envisioned to be basic, flat vector-based SVGs, to fit with the overall minimalist design as well as to provide more contrast with the pictures of adoptable pets.

The navigation and tab bars are placed to be as unobtrusive as possible, while also following material design. Here, the desktop and mobile components differ quite a bit in order to best suit the viewing method. For the desktop version, the navigation bar appears at the top and follows that of a traditional navigation bar, listing all the appropriate major page links, so that a user can easily flip between pages. The mobile component makes use of a tab bar with fewer links, and is more suited for focused, singular, shorter tasks. Additional links and functions are minimized to make use of small screen real estate and to reduce the risk of overwhelming the user.

The Process

A7 Sketches: Original Sitemap and Random Ideas

A7 Sketches: Layout and Design Elements
These are my initial sketches. Much of what I’ve drawn here was kept, although I did get rid of some extraneous features.

For the City Humane Society website, I imagined that the typical user would be someone eighteen years old or older, who probably has an idea of what type of pet they would like, but may not have any specific characteristics in mind. This person also likely doesn’t visit the site very often—if the main purpose of the website is to provide an portal for pet adoption, a person would only be using the website as long as they were looking for a pet, and would likely not return for a while, if at all. Therefore, their interaction with the site should be simple, straightforward and fast, with little onboarding. Now, usually more research would have to be done to ascertain the type of user, but for this short assignment I mainly went off of speculation on what a typical user would look like.

On the flip side, I envisioned that the “City Humane Society” would be a smaller-scale humane society, probably more local with fewer frills and extra services, much like the West Columbia Gorge Humane Society, a small one from my home town of Washougal (it’s also the only one of those animal shelters that I have actually been to.) This also means a smaller capacity for pets, and therefore less of a need to organize large numbers of animal profiles. This also means that their adoption methods are likely less technologically complex, and possibly less formal than the larger organizations.

In designing the website, I considered two major factors, based on what I’ve mentioned above: that the user wants a simple, straightforward way to adopt a pet, and that the City Humane Society wants a simple, straightforward way to add or remove information from their site. This thought led to elements such as the information “blocks” that are easily replaceable, as well as the minimalistic design, which paired well with the material design guidelines.

To decide what pages to include in the layout, I briefly surveyed some pet adoption sites around the Washington/Oregon area. The assignment didn’t allow for enough time to ask a bunch of different people about their experiences with pet adoption sites—however, I could look at a bunch of websites themselves and see if there are any trends. This includes organizations that serve Seattle http://www.seattle.gov/animalshelter, Oregon https://www.oregonhumane.org/, Southwest Washington https://southwesthumane.org/, West Columbia Gorge http://wcghs.org/, and Tacoma & Pierce County http://www.thehumanesociety.org/. These organizations all vary in size and offer a range of services beyond pet adoption. Their websites also range from the more basic to the more visually complex.

All of these websites included two main links in their navigation bars: “Adopt” and “Donate.” Other pages that were common included “About” pages, “Volunteer” or “Get Involved” pages, and links to additional resources or services that are specific to that organization. In addition to this, the “Adopt” page was almost always listed first, or sometimes second following a “Home” or “About Us” link. After much deliberation, I decided to divide the site into four major parts: Adopt, Donate, and About pages, as well as a Volunteer Page, as they seemed to be essential to the operations of a humane society or animal shelter.

In designing the app, I decided to work on the mobile side first, as many people seem to be skewing towards a mobile-first approach, and thought it would be interesting since most of the current sites I looked at are not very mobile-friendly. After sketching, I decided to remove the bubbly buttons I’d originally planned, switching them out for simple rectangular buttons, and focusing on minimalist elements such as the gray lines for dividers.

I then created the prototypes using Adobe XD. The prototypes are interactive, and the mobile and desktop versions can be found here and here, respectively.

Here are the annotated wireframes. As above, click the gallery to get a closer look:

Analysis after testing + Reflection

I conducted two usability tests, telling each participant to adopt a dog, once for the mobile layout and once for the desktop layout. Here is a short clip from one of the usability tests:

Overall, the desktop/mobile site pair worked. People who tested it said it was “consistent” and “easy to follow,” and participants had no difficulty in completing the task of adopting a dog. Additionally, participants were able to easily correct their own errors, as seen in the video above when a participant clicked something accidentally.

Perhaps the biggest takeaway from the testing sessions was that people were confused about where the process ended. After a user makes it to the Pet Profile page during the test, they instinctively tap the “Meet Me” button, as that is how you arrange a meeting with an animal at the humane society. However, that button does not lead anywhere, since in reality it would usually link to something external, like an email service. The participants were told before hand that the button would lead to external site for communication  with the humane society, but it was still confusing for users to get no feedback from the site when they tapped the button. Having an additional confirmation page afterwards, or perhaps an in-site form for setting up adoption meetings may be helpful instead.

In addition, because only a portion of the site was prototyped, links that would typically be live actually lead to nowhere. One test participant misheard the testing prompt and tried to tap the “Horses” category instead of the “Dogs” category, and was confused when nothing happened.

One participant also said that the phrase “View Pet Name” wasn’t intuitive, and she said she “wasn’t sure what new information I’d be getting that I couldn’t see on that page [the Dogs page] already.” She suggested changing the link to something more intuitive, like a “learn more about…”-type prompt.

Now, I have never adopted a pet. So it follows that I’ve never really used a pet adoption website. In the future, I would like to do more research on what users expect from pet adoption sites, as well as their previous experiences adopting pets, so the design can be better informed.

Also, looking at my designs, I wonder sometimes if it is too simple– if I’ve maybe used a little too much minimalism and the site is lacking somehow. But then again, maybe it’s just the temptation to add more “cool” features just because I can, not necessarily because I should. I think more tests with the design could give me an answer there.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s