Sketching = Events

Old post from (9/11/09)

A few months back my colleague who we delegated the events section on our website to, came to us - or maybe we (@HelenaB) and I looked at the page and thought it looked a bit messy and needed to be redesigned. The point I'm trying to get across is that, we got a bit gatvol (irritated) with the way it was looking.

So first on our to-do-list was for Hayley and myself to do quick research on what other event pages were looking like around on the net and write down what we liked and didn't like about them. A bit of tree killing later - which we recycled - I dragged Hayley off to the empty desks armed with a pad of paper and pens and the all important coffee. We looked at a few event layouts on a few different websites and once we got a few ideas in our head, we started sketching on the pad of paper.

After a few ideas were jotted and drawn really badly down on the paper, we came up with a pretty cool layout and most definitely a better user experience then what is was then. What was it? Well, imagine a table with the date, venue and name linked to their page and you have the events page. Now that said, our site is still an infant and only turning 1 on Dec 1st so there was a lot of development work around it at that stage and finding our feet as a digital communications team of 2 people and another 2 wonderful people who we have delegated sections to for their ownership and responsibility.

I couldn't find the previous version on the staging site for comparison of what it looked like then but this is what it looks like now.

Step 1: Robyn's pretty wonky drawing and wonkier ideas on Paintshop Pro (The notes were to our suppliers and for their people to come up with the most functional 'tool' for the user based on our random ideas)

The idea was to have the months as tabs so easy navigation around the different months and then once you have clicked on a month, it would open up to a page full of events. Obviously my artistic drawing doesn't convey my full meaning behind this but once you click on the event, the information (a short description with the essential information) would open up and then if you want to find out more, you can click through to the full event listing).

Step 2: Send off CR to our suppliers and after a few back and forths, ironing out the event page and testing, we have the final product.

I really wish we had the previous version...

You want to find further info on the Smaller Housing Association Conference? Click...

Event geocode (do I speak Greek?): Ooh... look at that map embedded (go to Google maps, put in postcode, take out certain coordinates - feeling like I'm back at Sea Rescue - and paste it in the dedicated area) in the event. Pretty cool. I thought it was another cool feature added to the idea and really adds a nice touch to the events, especially with having all the information you need at your fingertips.

If you were to click through to find out more about the event, a full standard 3-C layout will give you all the information you need and the event's website for further further details.

Like most of our web development, it's always a lot of fun, applying your skills, learning new technical aspects that sometimes, when I listen to our developers, I wonder if they superhumans and well having a lot of fun being creative and providing a better user experience in the end of the day. Though it may seem very small, the little things do make a difference to your experience on a website and in the end of the day, it makes your journey pleasant and worthwhile, instead of pulling your hair out and makes us happy that we've produced a useful tool. Well, definitely makes me happy.

Didn't Twitter start from sketching? Anyway, for an interesting read, head on over to 20fourlabs and read the article Innovate successful products: sketch!