Skip to main content Accessibility Feedback

The Anatomy of a Website Redesign

Last week, I launched a website redesign for PAWS New England. PAWS is a fantastic dog rescue organization I’ve had the pleasure of working with for the last two years, since my wife and I adopted our latest dog, Bailey.

I wanted to walk you through the process and decisions we made.

Business Needs #

PAWS pulls dogs from high-kill shelters – in some cases, euthanasia rates are higher than 85 percent, which means only one or two dogs come out for every ten that go in. They give them much needed TLC and veterinary care, and then place them in loving homes.

PAWS is staffed entirely by volunteers, and funded entirely by donations.

They have three main priorities for their website:

  1. Place dogs in adoptive homes.
  2. Get donations.
  3. Find volunteers.

A large portion of the donations PAWS receives come from repeat donors and people who have previously adopted from them. Being able to keep in touch with their fans is important.

Through research, we also discovered that one of the key priorities for people visiting non-profit websites is a clear understanding of how the organization works. That said, a majority of the traffic coming to the PAWS website is from Petfinder, where people have already found a dog that they’re interested in and are looking to fill out an adoption form.

The Existing Site #

PAWS existing site was designed by me about a year and a half ago. It included integrated social sharing, friendly colors, and more upbeat messaging that their previous site. It was also built on WordPress, allowing them to make updates in my absence.

There were some clear challenges with the site though…

Calls-to-Action #

PAWS has three main priorities, but only one of them was represented on the home page. The main focus was on how they work, with a single call-to-action below it inviting people to adopt.

Weak Typography #

The dominant font on the existing site was Lucida Sans, a delightful font that plays well at smaller sizes but doesn’t work well in larger form. That means that titles looked a bit odd, and the spacing between lines and characters was a bit too big in particular sections of the site.

Stock Imagery #

The existing imagery on the site was stock photos of dogs. PAWS does amazing work, but it wasn’t represented in the images on their landing page.

Not Mobile Friendly #

People are increasingly browsing the web from their phones, and the existing site was not easy to use on a mobile device. It may not actually have been a problem right now, but in a year or two, it most likely would be.

The Redesign #

The redesign was more of a facelift than a complete overhaul. Here’s what we did…

Calls-to-Action #

Calls-to-action on the homepage (left) and in the sidebar.

There are now three calls-to-action instead of one: Adopt, Donate, and Volunteer. These are directly aligned with their three most important priorities for people visiting the site.

I created simple icons to go along with each action, and they’re repeated in the sidebar of every other page on the site. This creates repetition and consistency.

Invitations to Connect #

The home page features a clear invitation to keep in touch – by email, through the blog, or on Facebook. Like the calls-to-action, this is repeated in the sidebar of every other page on the site.

Remember, many of their donations come from former adopters and repeat donors. Inviting people to keep in touch is important to PAWS ongoing success.

How We Work #

The overview of how PAWS works is still featured on the home page, but it’s decreased in priority below the calls-to-action. There’s also a link to learn more in the sidebar of each page.

Doing so keeps this key piece of information where people can easily see and find it, without hiding or de-prioritizing the calls-to-action.

Better Typography #

The new site features the Museo font family. Headers are in Museo Slab, while the body is in Museo Sans. Because they’re both from the same font family, they work very nicely together.

The more pleasant a site is to read and navigate, the better you feel about the organization, and the more likely you are to do business with them.

Naturally, not everyone has these fonts on their computer, so they’re embedded using the @font-face HTML5 tag. Older browsers that don’t support this tag degrade gracefully to Helvetica or Arial and Georgia or Times.

Real PAWS Dogs #

Instead of stock photography, the site now features beautiful photos of real PAWS dogs. They were all taken by Jenn Frankavitz, a professional photographer and PAWS volunteer.

I was delighted that we were able to do this. It creates bragging rights for adopters (“My dog is on the homepage!”). That’s a great word-of-mouth opportunity.

But more importantly, the dogs PAWS rescues are the organization. They’re the story. Why not let them tell it?

Mobile Friendly #

Mobile browsing is growing rapidly. You may have heard that people looking at websites are only doing quick tasks, like looking up a phone number or getting directions. That’s true… sometimes.

But people are also browsing the web on their mobile devices for extended periods of time. Where before they may have opened up their laptop, people are now browsing on their phone or iPad. They’re shopping. They’re watching movies. And maybe they’re looking for their next dog.

Now it’s easier than ever for people to learn about PAWS New England on their mobile device.

The site now detects the screen size it’s being viewed on and adjusts itself accordingly. Tablets in portrait mode lose the sidebar to put the focus on the content. Mobile phones benefit from larger font sizes and a drop-down menu navigation that takes up less screen real estate.

Lighter Code #

Amazingly, the new site actually has fewer lines of code. By being more thoughtful about how how elements are positioned and arranged on the page, I was able to cut out some redundancy and remove a healthy handful of the CSS.

Check It Out #

If you haven’t yet, head over to PAWSNewEngland.com and see the site in action. If you’re using a modern, standards-compliant browser like Chrome, Firefox or Safari, try resizing the window to see how the website adjusts itself.

And maybe check out some of the wonderful dogs they have available for adoption.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips