Website Redesign Process
Backstory
While researching online where and how to adopt dogs in South Australia (Keywords Used: Rescue Dogs South Australia), one of the top 5 google results I found looked outdated. The flow of information was confusing and the whole experience just felt like it needed some work.
Disclaimer
So I took it upon myself to explore this self indulgent redesign of a pet rescue and adoption website. Referencing sadogrescue.com re-branded as Rescue+Me as the imaginary client of this personal project.
SA Dog Rescue has no knowledge or connection to this case study.
Redesign Goal
- Create a user-friendly and visually appealing website.
- Highlight and display the websites primary goals (to connect people and rescued animals).
- Find help and sponsors to keep all behind the scene machinations moving.
- Make it enticing for users to take action.
Rescue+Me – Is a pet rescue/adoption platform that links the right family to give generous amounts of TLC to our unfortunate often neglected or abandoned furry friends and critters.
I changed the domain name so I don’t have to deal with branding and identity and just focus on specific user experience flaws.
Some words I played around with before settling on Rescue+Me
- Companion (X)
- Adopt & Rescue
- Rescue Me
Note: I discovered only after finishing the design that rescueme.org is live. But this has nothing to do with them as well. Refer to disclaimer.
For this exercise I am using the following personas:
- User one is seriously looking for a particular pet to rescue.
- User two is undecided or just browsing.
- User three is looking to support the cause as a volunteer or a sponsor.
A persona is a representation of a type of customer. Personas answer the question,
How To Create UX PersonasWho are we designing for?
Getting to know the (old) website
Before I start with the updates I need to break down the site into components to see what the users pain points are before I could start making my design recommendations.
Current Website Layout
Initial Observations
Header – The entire header is an image. It caught me by surprise because they are using it to display statistic information, it currently shows the number of pets adopted every year since 2015.
Updating this would require someone who knows how to use an image editing software. And how will this scale by the year 2020++?
Sidebar Navigation – There is a debate about Top Navigation vs. Side Navigation but some argue and I agree that side bar navigation most often is best suited for dashboard interfaces. Like when you have to do some work and not just consume information.
Most of us are trained to read Left – Right.
Top navigation would be the ideal choice as it helps display the links based on hierarchy of importance.
Content (Home) – The content is mostly text, if someone revisits the website they would just ignore this page. Most people will not read the same thing over and over.
This current design is not ideal to post updates, announcements or future content changes that just might go unnoticed.
Footer – The footer was not even utilised which is a waste of a perfectly good real estate.
Identifying Pain Points
Looking at the SA dog rescue website, the most obvious issues I found with the personas I created were:
Color Scheme – Black is a good color (although technically not a color). It’s strong and serious. People associate it with elegance but it’s not helping this website.
Home – The copy at the landing page starts with a welcome note. Followed by what seems to be a mission statement. I understand that establishing a rapport with the users is important but most visitors who come here are looking to rescue pets. Or already interested in helping out in anyway they can.
Getting to know the organisation is secondary and should not be the first thing visitors see every time they go to the website. At least maybe just keep it short and sweet.
It does not give a positive first-impression.
Navigation – I would like to give them points for the navigation menu labels. It’s very clear in setting up the users expectations when they click on the link.
However long menu labels have negative effects on search results. Not to mention the aesthetic presentation. Some of the links share the same category and should be grouped together in the same page minimising the number of clicks users need to do to get to the content they are looking for.
What it currently looks like
Home / Announcements – As the first thing the visitors see landing pages should make an impact that would make them want to stay awhile.
Dogs for adoption / Cats for Adoption – This two are on their own separate page. If the user is neither a dog or cat person they need to go back and forth while trying to make a decision. It’s time consuming and puts off some people that causes visitor drop-off.
Donations – A very important feature of the website as the organisation is not for profit, they need all the financial help they can get. I’m on the fence with this. Part of me feels it should not have it’s own page. People have the tendency to shy away from this and it’s easy to just ignore this link.
Merchandise – Another important feature because it would generate additional income.
Adoption / Rehoming Process – The website doesn’t have an FAQ page but consistently displays description of processes all over the place, Like in the Dog / Cat adoption pages where they explain about what’s included in the adoption fee. All those information should be in one location thus the need for an FAQ.
Meet our Animals / Events – Events is a good idea, so maybe just call it “Events”. It does not need to be an either or, just keep it open to any gathering or showcase.
Foster Care / Volunteer and Sponsors – Like the Dogs / Cats pages, these two can be grouped together for the same reason. Maybe the visitor is not sure if they want to help out as Foster, Volunteer or Sponsor.
Contact Us – Another important feature.
All in all a total of 10 navigation links or menu. As you can see there is much room for improvement which makes it a really good candidate for a make over.
New Components and Design Recommendations
With the list I made of what the website needs and what is not working with the current design I started building a template based on the redesign goals.
Layout
By grouping content into sections any visitor can easily scan the page and find the specific information that would interest them.
Color Scheme
I’m a huge fan of black, most of my wardrobe is in that shade. But for this redesign adding color will breath new life into it, give it a vibrant feel.
Adopting pets should be fun and engaging. The colors would help separate the sections and make it easier for consumption.
Adding vibrant colors makes Call to Action buttons pop up. The idea is to make them obvious and trigger users curiosity.
Color Palette
Header
Logo – (Rescue+Me) I wanted a simple wordmark, I used Oswald Font and added a + sign for accent.
Rescue me can mean two things in this scenario, obviously it’s the pets plea to kind hearted hoomans to be rescued. But it could also mean that the pets are the ones rescuing the hoomans from their own dull and colorless existence.
Navigation
I managed to reduce it from 10 to 8 menu links. With an additional Search function which is a really useful feature and a Blog (optional).
Making minor tweaks to the labels gave it a cleaner look and the best part was reducing accessibility issues by grouping some of the categories in the same page.
Home – Simplifying the landing page into one column by moving the navigation to the header
Our Pets – Dogs, Cats and Others. The current website only caters to rescued Dogs and Cats there should be room for other types of animals. This solves the scalabilty issue if ever they decide to rescue more than just cats and dogs.
Events – It can be any event regardless if pets are present or not.
Help Us – The label is now more of a request, inside this page people can choose to either donate or purchase merchandise. Of course a good written copy would help in convincing people to help out.
Friends – Full descriptions and forms to become a Foster, Volunteer or a Sponsor all in one place.
FAQ – Organisation processes in one page and with this new feature they can always update all the important and relevant information anytime.
Scaling will not be an issue when there is a central location for questions that may arise in the future or any clarifications that has been asked by different visitors on a regular basis.
Contact Us – Making this accessible gives the site an approachable identity.
Search – Users find it annoying to go from page to page looking for a particular keyword. A search is definitely good to have.
Blog (Optional) – Content is king, this website has a good domain name. But if they want to have organic growth then blogging regularly would definitely help. Because you don’t expect the same people coming back to adopt more pets. You need a pool of people to help take care of the rescued animals.
Hero Banner
Establishes what the site is all about. A combination of image and text it gives a clear objective to any visitor.
Sections
Most users visit the site with a purpose, they know what they want. They don’t want the wine and dine dance, so just give it to them.
Each icon links to Our Pets page. Filtered by category as what the icon suggests. By default all pets are displayed from latest rescued to last.
Pets by Category – Pets are grouped as dogs, cats and others (original website is exclusive to dogs and cats).
To showcase a pets profile I turned to card UI. Cards are a great tool for communicating quick stories. This will also be effective in the Our Pets gallery.
Volunteers – This section provides an overview of how important volunteers are for the organisations success. It links to the volunteer section Friends.
Sponsors – A section for sponsors. Sponsors give credibility to the web site. If people see familiar names in the list they would automatically have some familiarity with it. It also plays on peoples vanity, some company might join the program just to be in the same league as a well known competitor.
Subscription and Contact Form Section – When visitors reach this part, they are offered to subscribe to the newsletters and get timely updates. They can also complete the form to send messages and inquiries to admins. Both are good ways to keep in touch with your audience and recent visitors.
Footer – Closing the page with contact information and links to connect via social media. There are so many useful ways to use the footer and it should not be wasted.
Mobile Ready
The number of people using the internet on their mobile devices steadily increases every year. It was recorded in 2016 that mobile internet usage surpassed desktop usage for the first time in history. And this trend will not revert anytime soon.
A mobile friendly website improves the users experience. It’s not only a good idea but the responsible thing to do to help increase the visitors time on your website.
Limitations
This case study exclusively explores a homepage redesign and does not include other pages implied in the navigation menu and other links. But the design can be implemented throughout the web site using the home as a basic style guide.
Wrapping Up
- Group the same categories together
- Use colors when it helps
- Most people are visual, use images and graphics to convey a message
- Present accessible information to users
- Useful and engaging content brings traffic
- Be mobile ready
- Scalability should not be an afterthought
- The best advertising is word of mouth
Take Away
It would seem some not for profit organisations don’t invest too much on their web presence or maybe they can’t due financial constraints. I don’t really blame them, but the sad thing is having a well designed website could mean the difference between having a mediocre or a very successful campaign.
Adding nice photographs would also help (it worked for airbnb) as well as improving the over all quality of content. I already like the way they write the pet descriptions. Humanizing the animals is one way to get people to look at them more than just a responsibility but as future members of the family.
But again this comes down to budget, alternatively they can look for skilled volunteers who will do this for the love of animals. Maybe hook up with a digital design agency as a sponsor, they could provide the entire service. Or a financial sponsor that will shoulder the expenses to hire the agency.
These are just suggestions and not the master plan of a successful organisation campaign so take the good and leave or try to improve on the bad. Just my two cents based on research and my own personal experience from both sides of the spectrum (development side and consumer side).
Credits
The final design content are from existing pet adoption websites reworded or rephrased by me to suit the purpose of the redesign. And the images are from Flickr. (Links below)
Dog Photos, Cat Photos, Surprise Me Pets, Volunteers
(This is a work of fiction. Names, characters, businesses, places, events and incidents are either the products of the designer’s imagination or used in a fictitious manner. Any resemblance to actual pets or persons, living or dead, or actual events is purely coincidental.)