Web Design, UI/UX Design
WOTNVR.com is the official website for West Orange TNVR, a local New Jersey animal rescue organization. West Orange TNVR is a non-profit group that helps control local feral cat populations by trapping, spay/neutering and vaccinating stray cats before re-releasing them back outside. In addition to fixing outdoor cats and helping manage outdoor colonies, the group also adopts out kittens born and found outside with the help of volunteers who foster and socialize the kittens before they find permanent homes.
I served as web designer for WOTNVR.com, in charge of updating the website’s look to make it cleaner and more responsive for mobile devices. I was also in charge of adding new pages and features that did not previously exist on the website, including a revamped adoptions page, events page and media gallery. I worked in communication with the organization’s founder and president, Judith Stier on this project.
WOTNVR.com was originally created to give visitors detailed information about what the organization does, including information on feral cat trap-neuter-vaccinate-release programs in general, as well as solicit for donations and promote kittens up for adoption under the organization’s care. When I first started talking with West Orange TNVR, the concern was that the existing website looked dated and disorganized. Text and visual elements on the site were placed without a strong grid structure, featuring iframes and other widgets that were not mobile-friendly.
In my own assessment, I felt there was a redundant number of subpages with general information, but at the same time there wasn’t enough to promote the organization’s current and ongoing activities. For example, there were two pages of information on volunteering, but no page telling me when or where their next adoption event was. In my pitch for the redesign project, I made a case to reassess the general information on the site and organize the text into fewer subpages, allowing for more room to promote events and fundraisers, as well as give more exposure to the organization’s foster kittens and cats. This would not only make it easier for visitors to find the right information, but would also boost donations and adoption rates through the organization’s website.
With that, I outlined three primary goals for this website redesign:
1. Design a clean, modern, responsive interface with a more uniform stylesheet. Update existing pages with new interface, adjusting content as necessary for better mobile experience
2. Reorganize and consolidate (where appropriate) general information into fewer subpages
3. Add new pages for events and media, revamp adoptions page to increase exposure to the organization’s ongoing activities.
Addressing the content reorganization issue first, I outlined the primary use cases for WOTNVR.com in order to determine how a visitor would get from the home page to the information they may seek. That is, a person would be referred to West Orange TNVR for one of the following reasons:
- Need group’s assistance in addressing a feral cat or colony in their neighborhood
- Seeking general information on trap-neuter-vaccinate-release programs
- Looking to volunteer, donate, or help out group in some way
- Looking to adopt a cat or kitten from the organization
With these use cases in mind, I reviewed the old site again to determine what all needed to be rearranged, merged, condensed, expanded upon and eliminated, as my flow for the new site began to take shape:
I sorted the site’s contents into two categories: persistent pages with general information (organization info, volunteer info, FAQs, etc.), and dynamic pages that would be constantly updated with time-sensitive entries (adoption listings, upcoming events, media gallery, etc.). This helped me merge and group related information that was previously scattered across multiple subpages, streamline the site’s navigation and allow visitors to find what they need quicker and more efficiently.
Having a solid plan in place for the site’s contents, I moved on to draft wireframes for the site’s revamped layout. The biggest change from the old site’s design would be implementing a card-style pattern for showcasing both foster kittens and upcoming events.
My first impression on the original homepage was how cluttered it looked. To clean it up and make it more inviting, I implemented a simple screen-wide slider to show preview blurbs for three featured sections: What We Do (general info on the organization’s trap-neuter-vaccinate-release procedures), How To Help (info on helping out the organization thru donations or volunteer work) and Adoptions. I also removed all the free-floating social media widgets and instead put buttons for Facebook, Twitter, Instagram and YouTube links in the footer where they can be seen on every page.
Because fostering and adopting out kittens is a big part of West Orange TNVR’s mission objective, I sought to make adoption listings a more prominent feature of the new website. The organization partners with Petfinder.com to make online listings for its adoptees, however the old site simply uses an iframe widget provided by Petfinder to feature these listings. To give the new site more control over how the listings appeared, I implemented a card layout system that displays all the organization’s cats in a larger, easier to read grid. Not only does the card layout do a much better job presenting the cats, its editor makes it easy for the staff to update the page to add/remove entry cards themselves.
An Events page was something the old website was missing, but the organization agreed should be added. Because the card layout worked well for the Adoptions page, it was only logical to apply it here too, as the Events page would also need to be easy for the staff to update with new entries. While they never require attendees to RSVP for their events, I added the option for visitors to confirm they are going to an event, so that the organization can know if they are to, for example, expect somebody coming to see a specific kitten at an adoption event.
While working on the new site, staff and volunteers provided me a large collection of photos and videos of the organization’s past and present fosters. Because there were far more than I needed to construct the other pages, I offered to make a new Media page with an embedded video playlist and a dynamic photo gallery for visitors to enjoy.
Once all the pages were finished I sat down with Judith to review my updates and changes to the website, and had her and several other staff members do a UAT walkthrough of the new site, testing on both desktop and mobile, to ensure everything was functioning as expected. Feedback on the new site was overwhelmingly positive from Judith and the staff; they felt the new design made the site much easier to read and expressed excitement about referring people to the new Adoption and Event pages. With the organization’s sign-off, the new site immediately went live.
It was a great pleasure working with West Orange TNVR on this project; I got to learn a lot more about all the great work they do for the local animal community, and I’m very proud to have had the opportunity to help their cause.
Click here to view WOTNVR.com!
All images © West Orange TNVR