Blog

Today second post of a new series called “Face-lift”.

What is it you might ask me? Well it’s simple, I’m giving a “face-lift” to some website, web applications or any type of interface I come across while browsing.

It’s simple, a “face-lift” is me trying to make the interface more usable, easier to use and somehow enjoyable (I’ll try prettier but that’s a matter of taste isn’t it?)

I’m using simple usability techniques, a quick mock-up/prototype and some bullet points to highlights the before after.

But there is a trick: I only “face-lift” website that I actually use and I’m only giving me a few hours to get that done.

My first face-lift is today: http://www.trafikanten.no/ and this time I already broke my own rules.

I’m telling you why (and how) after the jump.

So why “trafikanten”?

Trafikanten is my girlfriend’s favorite website when it comes to transport time. Basically when is the next train for<insert station name>?

I used it a few time when I needed to go somewhere. I’m still fairly new to Oslo and getting my way around is not always easy. And I always walk, almost everywhere, but last week, the frozen foot-walks and my bad ankle suggested that I’d take the metro/tram/bus to go to this meeting.

I went to trafikanten to find the best route, but was a bit disapointed that I could get the time for any public transport, but had no idea as to where the place actually was (north, south, central, suburb, etc…)

I jumped then to google maps to figure out where was the actual location.

Why not put all of that together, and have a nice little package with time+routes+ all the info you might need to be on time at the “rendez-vous”?

As a good facelift practitioner, I noted the following:

Symptoms:

• The info is clear and reliable, but not presented very effectively
• Everything is “grey”, there’s no highlight as to where to click: What are the actions. Is thgis button more important than this one?
• The site is overall slow
• the search box are not forgiving and alternatives/precisions are expected in a 2nd screen (delaying again the results we’re looking for)
• Default assumption is that “I want to leave after <insert time>“. Actually not so much, in most case I need to be somewhere at a certain time, and without knowing how long it takes to get there, it’s a bit hard to estimate when I should be leaving. I want to system to tell me when to go based on traffic info.
• The action buttons have a counter intuitive position and no differentiation see below.

Diagnostic:

• A wealth of information that seems to get major support from Norwegian users. This rates good in terms of findability, but could improve on the usability side.

A note: as I thought about how to “facelift” that page, it struck me that the services as such doesn’t need to change. From my user interview findings (a few norwegian friends around an øl) the site serves its purpose. But I felt it could do more, especially for the newcomers, anybody who still needs to figure his way around. And when it made perfect sense to check times on one site and then map and direction on another (google map), I was looking for a one-stop shop solution. This is what you’ll get now.

So the remedy, my very own “face-lift”.

This facelift brings the whole process to a more advanced level.
You’ll see:

• My initial ideas as I skected them out on a sleppless night.
• A paper prototype to show the interaction ideas
• A first visual design draft.

The procedure:

• Make the search form stand out more
• Use “human language”. I want to go there, and I’m coming from….
• Better use of label
• Focus on time of departure and distance. This is not just a time schedule planner, this is a journey planner
• Extend options beyond public transport
• Keep the accuracy of informations and flexibility of search
• Move suggestion and search refinement into the form, not as a 2nd step.
• Allow forgiving format in search box
• Visually differentiate action from information

My initial ideas

Paper prototype*

Paper mock up – Trip plannin Concept from Eric Haidara.

*This paper prototype is intended to convey the interaction principle for validation before coding and having a visual design fixed.

I loved doing it, and this had probably taken more time to do than allowed/ necessary in a real project. This was my first time, so it took a bit of hit and miss to get the results. I’m convinced though that my next project using this technique will see the preparation time divided by half at least.

Visual design draft

Et voila:

As presented before, this is not quite a facelift but more of a “what if” trafikanten offered a more inclusive type of services.

I’m hoping that you’ve found this case interesting and moreover, that it makes sense.
What do you think? should you come and visit me in Oslo, will you use my trafikanten-plus to be on time

Let me know what you think.