Roanoke SPCA • Project & UX Lead • www.rvspca.org

 

About

The Roanoke Valley SPCA wanted to create a fun, informative site that really showed off the animals. To put a fun twist on it, we made it like an internet dating site, as if the pets themselves were writing the ads.

Responsibilities:

  • Project vision and team lead
  • Interaction Design
  • Information Architecture

Interactive Media Award:
Outstanding Achievement

Home Page

Banners

Additional banners were created to randomly show on the home page upon refresh. We all enjoyed finding pictures and coming up with headlines for these pages.

banners

Choose a Door

This landing page served as a gateway to the Flash animal gallery.

Gallery landing

Pick Me!

Post launch we received feedback that many of the people coming to the shelter had found their pets through the website. Some even said they felt a special connection to their new pet just from the description and photos.

Bella detail

Take the Quiz

Many times dogs are returned to the shelter because they just aren't a good match with their owners. We created an electronic version of the Iams's quiz to help users find the right dog for them.

quiz

Email Postcards

We noted that people often returned to the shelter to see if new animals had arrived when they were "shopping" for a new pet. As part of the custom CMS, we allowed users to receive mail about new pets that matched what they were looking for.

email

 
 

Behind the Scenes

 
 
sitemap

Sitemap
We created this sitemap to serve as a guide. Before creating it we analyzed other adoption sites, interviewed new"parents" and met with various stakeholders in order to align user and organization interests.

gallery

Gallery Wireframe
An early wireframe of the animal gallery. Dogs had different colors based on how well they matched a prospective owner.

Animal detail

Detail Wireframe
A wireframe of an animal detail screen with content and annotations regarding functionality.

scrapped

Scrapped
We wanted to have large pictures of the animals, but had a small amount of screen real estate. One idea was to slide in large pics from the top when the user clicked on a thumbnail. When prototyping, however, it seemed like overkill and we opted for a simpler overlay.


 
 
sitemap

CMS Design
The site had a custom CMS for maintaining the inventory of pets. This hub and spoke diagram laid out in broad strokes the necessary backend functionality to support the front end of the site.

Flow

Gallery Flow
This diagram (shown filled in with comps) was created to convey functionality to both the client and the programming team.

match

Modal
This modal dialog was used to encourage people to take the quiz before viewing dogs in the gallery so they could be matched up.

specs

API
We had to create our own mini API to have Flash communicate with the database via amfphp. This document laid out some of the necessary fields and functionality to support the front end.