Project Details

Skills: Sr. Design Lead, UI Team Lead, CSS, HTML
Client: Away Network | Orbitz Worldwide

Project Description

The Away Network is an editorial travel service owned by Orbitz Worldwide (Orbitz.com). While I did not create the original website template/layout, all new visual design work would be created or reviewed by me. As the Senior Design Lead, I was charged to further grow and maintain the company brand. When a new product was being introduced, I would be involved from concepts to launch, working with all the necessary departments and overseas development teams, utilizing the Agile methodology.

 

port-away-article

 

Article Template

port-away-article02

 

New featured content module that promotes new articles and photo galleries. Design was limited to existing thumbnail sizes.

port-away-article03

 

Social media bar that scrolls with you as you scroll down the page. This assures all your social needs are close at hand. Social bar adjusts to a horizontal bar near the top of the page with slimmer browser windows.

 

port-away-article04

 

Photo gallery utilizes new global right-rail module styling. Thumbnails could not be re-sized and titles could not be hidden.

port-away-article05

 

New global CSS styling for buttons are utilized without image files which means less HTTP calls and faster page load speeds.

 

 

User Registration

We stripped the new user registration form down to it’s simplest elements, utilizing new user interactions. When you click on a form field, the form title will turn light-grey, then clear out when you start to type (rather than disappearing immediately after clicking). The “Current City” field utilized a drop-down box of matching cities that appear as you type. Pure global CSS us used for the submit button rather than images, speeding up load time.

port-away-login

 

Featured Slider

View Slider Prototype

Custom CSS creates a darkened, transparent background so that the styled, white text is readable even in the lightest or busiest photos. This allows the editorial department to update slide content without any coding knowledge required. The main title text is stationary while slides rotate via timer, button navigation or by gesture on touch screens. The full slide is clickable making this player primary promotion real-estate.

 port-away-contest


Monthly Contests

In 2012 Away.com hosted monthly photo contests, each with it’s own destination theme. Mid-way through the year, we added the ability for Away Network members to rank the finalists, choosing who would win the various monthly prizes ranging from $100 gift cards to high value flight vouchers and travel gear.


 

port-away-email

E-mail Campaigns

Sometimes we would run special campaigns that feature sponsored travel destinations as well as promo user interaction with our websites.

We also sent out an e-mail each day providing information to our readers about a new travel destination, including action items to rate and review the destination, share with friends via Facebook, Twitter or Pintrest and download an inspirational photo as a desktop wallpaper.

 

port-away-hotel

Hotel Pages

port-away-hotel01

 

Interactive Rate & Review, Been Here and Life List buttons help promote user interactivity.

 

port-away-hotel02

 

Global sub-navigation tabs help orientate viewers and promote informational pages of the destinations the hotels are located.

 

port-away-hotel03

 

Hotel stats from price, average guest rating, hand-picked vacation category recommendations as well as Away.com’s custom Value Ranking to help make choosing the best hotel.

port-away-hotel04

 

Compare rates module for real hotel prices and availability. This feature also helps to monetize our hotel pages. Button styles use global CSS without the use of images for fewer HTTP requests and faster page load speeds.

 

Icons and Sprites

When possible, buttons are built with CSS code but when icons for buttons or tabs are needed, they usually end up in a sprite image which will contain other, similar icons.

port-away-sprites

 

Logo Concepts

In attempt to update the Away logo to modern times, you can see just a few logo concepts in the works.

port-away-logos