Early on I identified four key personas—Someone who wants a pet, someone who wishes to help the humane society, someone who is curious about pet ownership, and one who stumbles upon the site—which helped establish the organize the plethora of information that could go on the home page.

Once the personas were settled it became clear that browsing available pets was feature that all four user types would be interested in. This led to a large interactive piece that inhabits the entire top of the website that features all the available pets and allows basic browsing and sorting functionality.

The remaining home page is highly modularized, with set slots for a variety of content that changes contextually throughout the site. I used the popular 960 Grid System to organize the content. The columns are highly flexible and shift depending on the relevant content for each page.

The Adoption section landing page is the place I would expect most users to head after the home page. The interactive pet browser module is repeated, though in a smaller format.

This page features a search tool that guides a user through finding pets that match his or her wants. The search tool is designed to be a dynamic element that sorts the list of pets that follows the element without reloading the page. Similarly, the list of pets is navigated with dynamic pagination that loads the next “page” of results without reloading.

I designed the site such that the color scheme could be easily changed to match whatever other promotions the Oregon Humane Society is running. For example, the red used throughout these comps matches the End Petlessness campaign. The simple color palette also helps highlight the photos and videos of the pets and volunteers that are throughout the site.

There were several pieces of the wireframes that I discovered, once implemented, were not ideal. For example, the site was originally wireframed with a prominent breadcrumb bar to help users see where they are in the site. The headers for each page—seen here has the pet’s name—turned out so unmistakable, especially so close to the sidebar, that it seemed unnecessarily redundant to add a breadcrumb bar.

The pet detail page originally featured a set of “recommended products” that were intended to help illustrate the initial cost of purchasing a pet. However upon laying out the page in Photoshop the extra information felt too superfluous and it was taken out.

The design of Tweet is Unrelated was a large departure from the work I normally do.

Given the inherent playfulness of the application I chose to design the app in bright blues and yellows.

The generator automatically chooses two random words to search Flickr and Twitter.

These search terms can be entered by the user is he or she has a specific pairing of words in mind. The user can also press “Random!” to receive another random pair of search terms.

Once an image is created the user can either save it, which closes the generator and shows the new image in the list with the others, or the image can be scrapped by performing another search.

All the work posted to Creativor is organized in “projects”. Each project can contain any number of images and text and are intended to include any pre-production work, such as sketches and wireframes, and also reference code either posted here or as posted to a set GitHub repository. Any part of the project can be commented on by classmates or those marked as “peers,” or friends. The idea was to provide students with as many opportunities for feedback as possible.

I strove to make Creativor as visually simple as possible to not compete with the art that users post. To this end I kept the palette in simple grays with bright red, blue, and green highlights. The brighter hues are used solely on "Add" buttons and on small indicator banners that are attached to projects. Each banner indicates something new about that project, such as new comments, new milestones, or if the project has been marked complete.