Roku

I've decided to take a small break from posting about changes to the HART website to talk about something else for a bit.

After watching Apple's keynote a while back about the AppleTV, I wanted to get one; specifically the latest one. Most people who know Meg and I know that Apple products tend to cause an unnecessary lust in us. Having something that allows us to easily watch Netflix streaming on the bedroom TV without costing us extra subscription fees (looking at you, Xbox 360) sounded like a little bit of heaven. After doing some research though, I decided to go with a Roku player instead of the AppleTV.

If Apple products give Meg and I such boners*, why would we go with Roku? Was it the fact that the Roku was cheaper? No, but it helped. Was it the fact that the Roku provides a lot more functionality out of the box? Not really. So what was it? Cloth Tag.

It's like a stuffed animal I can't comfortably cuddle with!

It should arrive soon, and I'll probably post something about it.

* For some reason when Meg says that something gives her a boner it sounds funny; for me it sounds all kinds of creepy.

The Rough Cut

Fun Fact: When I was in high school, I made a website that
was basically nothing but beveled/embossed images. It's
apparently an addiction I've never kicked.

After taking Meg's initial sketch, we came up with.... this. I don't even know what to say about it; not one of our better designs. You can see the actual current layout in there, if in a rough state. The header is obviously completely different; a bit newsletter-y in all honesty. It has the upper and lower bars, Bob & Bonnie, links to GoodSearch, etc., the United Way & CFC banner, and the links to other adoption websites that we post our pets to. We wanted to have a solid header and footer that would appear on every page, and this is a start. We were trying to produce a glass-like effect on the two red bars, which we didn't manage to accomplish. From this version, the only things that made it onto the final website were Bob & Bonnie and the United Way/CFC banner.

As far as the content is concerned, the featured pets column may as well be empty. The announcements section is pretty close to finished. It's mostly just missing some of the coloring. The Events section isn't even a section at this point, just a banner and links to the adoption schedules.

Fun Fact: The Bob & Bonnie images were extracted pretty roughly
and have never been cleaned up. Why? Laziness mostly.

Here we cleaned up the header a little bit. Lost the ridiculous font and added some more base navigation. The significant change is the addition of the content to the Feature Pets column. We liked the idea of a short blurb stating what HART actually does. That text was part of the About HART section on the previous website, but it seems appropriate to not make a user click through to figure out what you're about. Since most people are visiting the website to actually adopt a dog or cat, we wanted to feature links to our major sections. You may notice a link to a "Precious Pets Ad." HART used to feature a pet in a local newspaper for a while, until it became incredibly expensive. We eventually replaced this link with one to a page listing our pets that have special needs. Seemed like a better use of the space.

It Starts

Paul and Joli had started to work on the website redesign before they'd brought us on board and had a basic framework of a new website already started. While I don't have a picture of their design, it had a lot of the elements that made it into the final design. Meg and I took what they'd started and began to merge it into the designs we'd been working on.

The beginnings of the final design

The design lost the menu on the left, which really wasn't all that necessary. It also cut the page width to 800 pixels to prevent scrolling from side to side on most displays. The page also gained a solid footer which helped to frame the design.

You can see the major block elements that make up the current homepage here: Announcements, Upcoming Events, Adoptable and Featured Pets. These would get rearranged a bit, but they're there.

The final design doesn't have an explicit fund raising area on the homepage, but that was done to help prevent the page from becoming cluttered again.

While I was playing around with this layout, Meg sketched some stuff out in Photoshop.

Insert content here

It looks incredibly simple, but it's from this image that the entire current design came about.

Baby Steps...

As soon as Joli asked us to help redesign the website, we started work on a basic layout. We weren't sure at first how much of a change they really wanted, so we tried to keep it at least somewhat similar to the existing design.

Website version .01

Step one was to strip out all of the random links and "ads" that no one probably even saw. Again, we wanted the main page to be no more than a single screen; if it made the user scroll, it had to go.

Step two was to rearrange the left menu a bit. We grouped the links a bit more logically and added indents for grouped items. We also added a basic menu across the top of the page of the links we felt were the most important.

We placed an Announcements section at the top. It's not really evident in the screens from the previous website, but any announcements, lost pets, etc. appeared under the "Welcome to HART!" text. We wanted give them their own area so they would stand out more.

Other small changes, the "HART Spotlight" became "Featured Pets" and got bigger, the Events section moved up the page a bit, and "Overlooked," "Special Needs," and "Needs Fosters" lost their images and were condensed a bit to make it above the fold.

Website version .02

We made a slight revision of this layout later on. The biggest changes were losing the color behind the left menu and the "Events" sections.

In addition, "Events" became "Upcoming Events" with a heading that matched the Announcements heading. We also added a "Fund Raising" section. This section would have some of the more "ad" type things, such as the Awesome Sauce, GoodSearch, etc.

On one hand, we like this second version because it had more white space, and felt more open, but at the same time, it is a bit boring.

Where We Came From

In The Beginning... This is only about a third of the page's entire length.

This is a screen shot of the website from about 2-3 years ago. At that point, Meg and I were volunteering regularly, helping out with special events, and fostering dogs. We had really no involvement in the website itself, with the exception of the odd banner that Meg would create for an event. In fact, I think that Yard Sale banner is hers. 

You thought I was kidding earlier

After creating a number of banners for the website, Meg began to develop a relationship with the current webmasters of the HART site; she even became a fill-in photographer for the dog events. Eventually they asked us if we would be interested in helping them redesign the layout of the website. The biggest issues with the website were it's length, it's bandwidth usage, and its overall clutter.

The primary focus was to get as much of the important info "above the fold" and to cut down on the overall length of the page. There was so much information about ways to help HART and our animals, but I doubt many people got that far down the page. Even after visiting the HART website for over 2 years, I still wouldn't have been able to tell you what was below the two featured pet photos.

Armed with Photoshop and some sense of what should change, we set out to brainstorm some ideas...

Getting Off to a Flailing Start

As some of you know, I'm one quarter of the Web Team for the Homeless Animals Rescue Team. Recently I was going through some old files trying to find something we'd done for HART previously and found a bunch of the old designs we did for the website. After looking at them, and seeing where we came from to get to the current design, I thought it might be interesting for people to get a chance to see some of it. A blog seemed like a good way to go about that. Also, and I'm stealing this idea from my friend Christina, having something like this to write on might help me to get better at non-technical writing, and perhaps even help me to get better at designing stuff as I look at what we've done in the past.

So the basic purpose of this blog is to chronicle some of the work I do for the HART website, to explain where designs came from and how they changed, and maybe even why some things worked and others didn't. I'm sure some other stuff will crop up on here as I go along; I like to think there's a least a little that happens in my life outside of HART.