Launching the Oryx

First a little history…

“Established in 1903, Fauna & Flora International was the world’s first international conservation organization. FFI’s work spans across the globe, with over 100 projects in nearly 40 countries, mostly in the developing world. Fauna & Flora International proudly stand up for biodiversity and aim to show just how relevant it is to all of those who share the planet.”

FFI came to me to re-design their new website in March 2010.  6 months prior I had completed work on the IGCP website (which is a part of a coalition with FFI, WWF and AWF) and FFI felt I would be worth speaking to about their upcoming re-design. I was immensely proud to have been asked; but it’s fair to say I was apprehensive. I’d never tackled a site of this size (both in terms of content and development) before and the magnitude of the task was a little daunting.

You can visit the finished article here if you’re bored of me rambling already!

Good work will get you so far. Good friends will get you further.

Luckily, I have some awesome friends, whos help really set the project up in terms of technical possibility and implementation.  So before I go any further, thank you Chris for writing an amazing plugin to power the site, and for spending hours helping me develop and fine tune the system to be a truly fine piece of work. Also, thank you to Daz for dealing with all the stuff a designer (and below average developer) like me could never do. Both of you were life savers.

Designing a system, not just a site

After having a long chat with members of several teams at FFI in April, myself and my long standing friend  Roger (FFI’s web/design man) sat down and talked about planning the full picture. We spent two days with a big flip-chart and various site mapping tools deciding on how to re-group all the existing content, and how each area would ‘talk’ to the others. One of the biggest bugbears of the old system that came out of the meeting was that it was hard work cross-referencing content, and as a result, the site had become over grown with similar pages to pug this gap, or certain news stories had fallen into the abyss.

To rectify this, we allowed certain pages to provide and receive content from other pages. This removed the need for bridge pages, and similar content. Now we could easily populate one page type with content from several others.

Furthermore, we also had to decided on how we pitched the site to our audience. FFI has a very varied audience from Scientists, Field workers, Graduates and a general web traffic of users interested in conservation.

We decided early on, that by coupling plenty of science with with rich media, strong images and splitting a lot of the science into bite size chunks on the sections of the site with a larger and more varied audience reach (species pages especially) we could maintain FFI’s commitment to delivering good science without making the pages too text heavy and jargon rich.

Putting it all together

This is, without question, the type of project that needs a lot of visual planning. How the site links together, and how each section works within a global layout is very important. So we wireframed, sketched, re-sketched and occasionally re-built pages several times. We always had a simple set of goals in the forefront of our mind.

1. Can our users find it easily?
2. Can our users navigate what they’ve found?
3. Can our users reach the desired content without using a third party application (IE flash) if one is being used?
4. Can they navigate away from it to something related?
5. Can they share what they’ve found?

Using these ideologies, the design of the UI became quite an easy one. By grouping elements together, and refining these elements further in page, we were able to create what we hoped to be a systematic flow through the site in a logical manner. For example, if you were looking for our work in Africa, you can visit our ‘Where we work‘ page and select ‘Africa‘ and view each individual area and project related to Africa.

This visuals

Below are screen grabs and development wireframes and sketches from the process from inception through to completion: You can visit the finished article here

Initial sketch from Roger for the homepage

The final homepage render (after several major revisions)

Initial sketch from Roger for the donations page

The final render of the support page

Second stage wireframe for species pages

Final render of the species pages

You can visit the finished article here

Enough now please

It’s not the first time, and I doubt it will be the last time either, but this really needs to stop.  The amount of arrogance being displayed and, at times sheer vitriol directed towards our fellow professionals is becoming out of control; We need to stop this right now.

So far this year, we’ve seen the whole backlash against conferences & their apparent conveyor belt loop of speakers, and now it seems a person’s livelihood is becoming a cause for anger, tutting and finger pointing. Am I the only one whose fed up with this attitude in general?

I work (as many of you know) at an internet marketing company, in an industry pretty much famed for it’s long, varied and lets face it sometimes downright incorrect jobs titles. But that’s just it, it’s a title. It doesn’t define you, and it sure as hell isn’t worth getting all pissed off over. I’d probably describe myself as a web designer. I could go with the term ‘Front end developer’, ‘WordPress developer’ and even ‘Graphic designer’ (I’m qualified and proficient in each of these) but when pushed, I’ll generally go with ‘Website botherer’ or any other term that pops into my head. Fact is, it’s the least interesting thing about you and what you do.

So here’s an idea, call it a Mantra if you wish:

You have the right to earn an honest living. Define yourself by what you do, not how you label yourself (or by what others may label you). Chin up, eyes down. Back to doing what you do best; You’re fucking good at it!

Jumpers for goal posts