Note: In a previous blog entry, I talked about step one of reworking the Real Travel UI. Here is the completion entry.
We are looking for someone to take ownership of the Real Travel website UI. That is what Paul Hepworth said to me when he initially interviewed me for the front-end UI position back in July 2008. I can now say that I have officially taken ownership of the front-end skin of RealTravel.com.
You’ve come a long way
Real Travel has made leaps and bounds over the past couple of months. First, we officially moved over to using Ruby on Rails in January, freeing ourselves from the scalability and development restraints that come with using .Net. Second, after the switch, Paul created a method to tie into the back end of the Rails system to cache our abundant pages to decrease our page load time immensely. Finally, the front-end interface has been completely revamped to bring a fresh new look to the well performing site — it currently is considered a top forty Rails site and it has only been running on Rails for only four months.
Of course we are continuing to iterate on many items for the site, including cleaning up our data system to make it more efficient, but we have hit major milestones in a very short time. We partly owe this to the implementation of SCRUM, an agile form of project management and of course the great pigs and chickens.
So fresh and so clean clean
The old or “retro” skin as we call it in the office, served its purpose well, but as a designer I am always looking for ways to improve it. The heavy dark blue background seemed to compress the content of the site making for a more cluttered look. Overall, the colors were just too heavy. I mentioned this to Ken Leeder, the CEO of Real Travel, but before so, created a mockup of what the site could look like to help strengthen my point. I wanted to take the site in a whole new direction, to lighten it up and bring it more to life than current. I find it very helpful to bring a mockup into a meeting where you are trying to convince the boss to let you take on a monumental task, luckily it worked and Ken gave me the go ahead instilling full confidence.
Beforehand, I browsed around competitor websites to see what they were doing and how they were conveying the plethora of information that these sites infuse. I was bound and determined to surpass any of these that I stumbled across in not only design, but also usability. So many of them that I found were nothing but jumbled masses of content and advertisement. Of course Real Travel uses advertisement, but luckily we are allowed to make it look like content, which is a win win situation for both users and Real Travel. My goal was now set.
Oh the colors
Choosing colors for some of my designs can be haphazard at times, but end up being for a purpose. Jenica, the managing editor at Real Travel, asked me how I came up with the color scheme and I told her I find a base color and roll with it to create it’s compliments. The main Real Travel colors were a gold and dark blue and were very prevalent on the retro skin being very heavy colored. I wanted to go in the opposite direction and introduce lighter feeling colors, but at times using the bright colors for the items we wanted to draw attention to, hence the eye candy implementation. Thus a citrus color scheme was created to give it a very fresh and clean feel. Each time I look at the site now, it gives a sense of refreshment from the skin that used to hold its place.
Lightening up the background color solved two things right off the bat. It allowed for the site to once again not look so heavy and two not visually compress the content. Sometimes having the eye drawn straight to the middle of the page is good, but when there is so much content on a page, reading can be somewhat of a drag.
Owning the UI
Needless to say, before Real Travel pulled me aboard, they had gone through many designers and freelancers that put in their own markup building on the previous. As a code junky, sometimes jumping into someone else’s code base can produce a big learning curve and messy outcome. Over the years working with CSS and xHTML, I have honed in my code to be reusable and lean and really wanted to introduce it into Real Travel’s UI. Being able to re-skin the site allowed for this to happen as I ripped out most of the old markup and started afresh, building on top of the Blueprint CSS structure.
We also are utilizing the jQuery javascript library. The site has been through three different libraries, starting with YUI (very bloated in my opinion) then onto Prototype (good library, but losing developer steam) and finally jQuery. Let me just say, I have never been happier to be able to use jQuery. Granted it doesn’t come prepackaged with Rails to produce the helpers, but there are great plugins such as jRails. I personally have used and created plugins now for MooTools, Prototype and jQuery. To me, jQuery just makes sense.
What is next?
The web is ever evolving and so is Real Travel. We have plenty more ideas up our sleeves for what we will roll out next. Now that the UI is there, with exceptions of a few tweaks here and there and some layout changes to be made, I will be focusing some of my energy on to more Rails programming within the site. I am very stoked to be working on the next project that will involve intertwining Twitter.