Lindsey Kirkbride

makes websites

Oregon Humane Society Concept Redesign

As part of an Art Direction course I created a set of wireframes and comps for the Oregon Humane Society. This project was purely conceptual and focussed on exploring how audience and goal considerations can affect the layout and design of a website. I selected several pages of the ending documentation to highlight my process.

  • Oregon Humane Society example image
  • Oregon Humane Society example image

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.

  • Oregon Humane Society example image
  • Oregon Humane Society example image

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.

  • Oregon Humane Society example image
  • Oregon Humane Society example image

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.

Tweet is Unrelated

Working with pre-created content always helps to make projects easier. For Tweet is Unrelated I used photos from Flickr and text from Twitter to create meme-like silly graphics. Tweet is Unrelated is a personal project that I created to brush up on my application building skills and play with using ImageMagick to create images.

Visit Tweet is Unrelated

The images themselves are the most important part of this project. Each image consists of two parts: a Flickr photo and a tweet.

A long list of random words—including “dinosaur”, “vader”, “bacon”, & “doctor who”—powers the random generator that create these images.

My hope was that by randomizing searches within these two immensely popular web apps Tweet is Unrelated could combine user-generated data in unexpected ways.

Although this application has not been officially released yet, the initial testing of the application has proven successful in creating unexpected—and often humorous—pairings of Flickr and Twitter data.

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.

Allonzee

The three other Summer graduates and myself collaborated on this art installation piece as a way to visualize our last three months in school. The installation was a built to be shown during the Art Institute's Summer Portfolio Show alongside our four separate portfolios. I created two web versions of the piece, one for before the portfolio show and one for after.

Visit Allonzee.net

Creativor

Creativor is a social network for creative groups that I designed and built to aid in the creative process, specifically for those in an academic setting. The site itself was never fully completed—such is the nature of class projects it would seem—but the designs are a cumulation of many hours of work exploring the creative process.

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.

J & K for more of this project. P & N for other projects.