About the Project
For this project, we were asked to pick one of the four nonprofit organizations provided to redesign their website. We were given descriptions of each one. I decided to go with Spaymart which is a non-profit organization that runs a no-kill shelter and foster care program in the greater New Orleans area. You can visit their current website at http://spaymart.org. Before the redesign, we had to review the clients’ brief, which highlighted the objectives and pain points of their current layout (see below) and then, had to review the website ourselves (see past blog post).
Objectives & Pain Points:
“We will need to keep the current logo, but feel free to bring in other fonts and colors to create
Alright, so let’s start from the very beginning. Here is my very first iteration of the redesign.
So clearly after seeing the final iterations, you see that I’ve made a lot of progress from the start. Although this design is very weak and “flyer-like”, I think the intentions behind this were good despite it not appearing as effectively as possible. For example, I tried displaying a clearer call to action by having three options, “Donate”, “Adopt”, and “Volunteer”, for the user to choose from. I also tried to simplify how one could become involved by providing a list of the five main programs of Spaymart on the home page that were easily accessible and that the user could find easily. The incentive behind providing a brief description of SpayMart was so that the user would know what SpayMart even is since what it is and what it embodies isn’t directly implied by the name of the organization. Yes, the original design was cheesy and weak, but it was a step in the right direction.
Okay, so here were more improvements upon this original idea. Unfortunately, I have no iteration of my sub page during the beginning of the process because of computer space issues, but not much was done until the final piece anyway. Above you will find the second iteration of the home page. I tried to make it a little less “flyer-like” by ridding of those cartoon paw prints and by adding more elements that are typically found on a website. This iteration resembles a website a big more than the original considering it has a more distinct header, body, and footer. I was getting closer to what I was envisioning, but as you can see, the design was still very weak. This iteration has somewhat of an unclear hierarchy and isn’t the most visually appealing, so I continued to peruse different websites so that I could get a better handle on what a clean and modern website really looks like.
The Home Page
So these iterations were the first major steps taken in the direction of my final deliverables. I was able to invest a lot more time and focus on what I truly wanted to produce. For the home page, you see that I provided a header with distinct items to choose from so that the user has options to explore. You will also find a “Donate” button that can be clicked at all times no matter what page of the website that you are on. Then, underneath, you’ll find the SpayMart logo and some social networking links along with a search bar. In the body, one of the first elements that hopefully catches your eye is the eyes of the cat. I decided to use this picture to create somewhat of an emotional appeal to the audience. It was my attempt at “pulling at their heart strings”. On that picture, you will find the mission statement, which I think is important for the user to know right away because who wouldn’t say no to stopping “the needless killing of cats and dogs”. Let’s hope no one. Then, there are the three main directives that one can choose – DONATE, ADOPT, VOLUNTEER. This provides a clear call to action for the user to feel like the must get involved as soon as they visit the site. Again, the general description of what SpayMart is and represents is shown to clue in the user about what they may prospectively get involved in. At the latter half of the footer are two main sections – Recent News and Get Involved. Recent News was provided to create somewhat of a community by letting the user know what has been going on and then the Get Involved section elicits somewhat of a platform where the user can jump right in and get involved. This is supplemented by the “Sign Up” for email updates section that appears above the footer. Lastly, the footer resembles more of a professional website by providing the user with a breakdown of the overall layout of the website, displaying all the possible pages and subsections that exist under each main category.
The Sub Page
The sub page displays a consistent header from the home page. As requested by the client, the sub page that I redesigned was the Adopt page, where all the possible cats that could potentially be adopted were displayed for the user to peruse through. Here is the original design:
What I wanted to really improve about this look was its’ overall feel. Since they used a gallery format, I feel like it took away from the personability of the document. The way the cats are laid out really takes away from their individuality. As a result, I decided to create “Meet Your Match”. This would provide a more personable way to choose a cat that is more aligned with your interests. Through this format, the user is provided with five different characteristics sections that they can choose from – Age (Kitten or Senior), Gender (Male or Female), Coat Type (Short-haired or Long-haired), Special Needs (Yes or No), and Felicity Fund (Yes or No). After they provided their preferences, a cat that best fits their preferences (their “match”) would appear. Then, alternative suggestions, other cats that fit a similar description, would appear at the bottom underneath the subsection “See Also”.
Improvements and Interactions
After the iterations above, I made a few more improvements, as evidenced by the final iterations, and further refined my interactions.
Here are the interactions for both the home page and the sub page.
The home page interaction is just a drop down menu option. Once the user selects the main tab of the header, a drop down of sub menus appears for the user to select from. Additionally, as the user puts their mouse of the submenu item, the typeface changes color to orange so that they know exactly what they are selecting.
The sub page interaction, as somewhat described above, requires the user to choose their specific cat preferences from the sections provided. Once they do just that, a potential match appears with a brief description, along with other possible options at the bottom below it.
At the very top of the page you will find my final deliverables. The critique was really helpful. My peers gave me several suggestions regarding how I could further improve my design. A lot of the comments concerned how the website would manifest itself if it was actually programmed to be an interactive website. Although there is always room for improvements, I think that my originals came a long way over the course of the project. It was fun to work on something that isn’t the most second nature to me. It took me out of my comfort zone and I’m happy with how the final iterations turned out.