Our Goal

The WCS, or "Wildlife Conservation Society" is a non-profit organization dedicated to the protection of wildlife. They are a global organization, operating in over 65 countries. They also own many zoos and an aquarium. As successful as they are, surprisingly enough, their website leaves a lot to be desired. So as a team, Justin Blake, Theresa Hoang, and I created a prototype for what an improved WCS website could look like. Unfortunately, the WCS themselves weren't keen on the idea of giving us any useful information to start with. But through careful research and a lot of testing, we were able to create a mockup that improves upon the WCS' current design.

On some parts of the website, they even have a side global navigation and a top primary navigation. We really didn't like this at all. We thought that it would be better if the global navigation was stacked on top of the primary navigation. The content would be framed less awkwardly that way.

Their donation page doesn't seem too bad. But the footer is always peeking up from the bottom a little bit for some reason. No matter where you are on the page the very top of the footer follows you, and this is just awful. The footer is of no use if you can't see the whole thing, and it just gets in the way. On the bright side, we loved the way their donation process actually worked. The buttons are simple, eye catching, and informative. Making a donation is relatively painless and this page actually looks pretty good on mobile. But on desktop it definitely needs a rework.

We learned from our survey data that a surprising number of people have heard of the WCS, and that many of them are actually really into their cause and are willing to contribute. All of our survey takers love animals, and most of them consider themselves to be "outdoors people." We agreed that our redesign should encourage people to volunteer. As many of these users are willing to get their hands dirty.

Here is our user persona, "James Brown" he is a 24 year old graduate who is also environmentally conscious and occasionally donates to non-profit organizations. This being the case, James is definitely interested activism. He would love to volunteer, but as a recent college graduate he doesn't have a whole lot of money. So even though he loves to donate when he can, it would benefit him a lot to be able to contribute with his time and energy instead.

As far as UI is concerned, many of our testers had the same issues with the website that we did and almost all of them complained about the navigation.

From what we saw on the website previously, the donation process is actually fairly short. So we decided to scrap the donation page in favor of a modal. The idea being that getting through the process on a modal with a couple of quick forms would flow well with the experience of browsing articles. This also let you get right back to what you were doing when you're done donating. This is good not only because it's pleasant, but the longer you stick around the more likely you are to do something else. Like signing a petition or signing up to volunteer. In the images below you can see a quick paper sketch and a low fidelity mockup of the modal. You can also see that we scrapped the sidebar on desktop.

We actually wanted to put volunteering and petition signing on modals too. But it became very apparent that each of those causes warranted its own page, so we opted for just having a clearer call to action on each of them instead.

And here is an image of it on mobile:

So as you can see, we changed the website quite a bit in our design. We didn't really change the branding very much, but we changed the arrangement of the various elements on the page quite a bit. The images are arranged much better and each of them has a clear call to action. In particular, the hero image and text at the start of the page clearly and concisely tell you what the WCS stands for and prompts you to contribute immediately. On the desktop version of the prototype, each of these CTAs have their own page. I highly recommend that you try both of the prototypes for yourself. There's a lot more to them than the images I just showed you. There may yet still be room to improve this, but if this redesign was really going to be used, I think the changes we made would improve the site significantly.

| Desktop Prototype | | Mobile Prototype |