Julia E. Durall, UI/UX Design Portfolio
More Projects

Interline Vacations

UI and Visual Design: Redesign of a website for the travel industry

by Julia E. Durall
UX 101 Mockups

About the Project

Interline Vacations owns a few websites serving the travel industry. This site redesign was for Travel Industry Services - https://www.traveltis.co.uk - which is a website based in the U.K. for those who work in the travel industry, such as travel agents, cruise ship employees, flight attendants, etc.

The IT Director was originally overseeing the design of the websites, and was eager to "get the project out of the hands of the developers". The first phase of the redesign was completed by a UX designer prior to my arrival, so I was given a set of completed wireframes for which I was tasked with establishing the user interface and visual design. I discussed my ideas with the developers and the product manager before starting, and also during the course of the project.


From Current to Future State

Interline Travel Inspiration

This is the progression from the original website to the finished mockup of the landing page.
Wireframe by Bart Landry and Mockup by Julia E. Durall.


Finding Inspiration

Interline Travel Inspiration

In order to bring the look of the site up to current best practices, I researched other popular travel sites for inspiration. The product manager indicated to me that he wanted us to primarily use the blue and red colors from the logo. I also referred to the UX designer's choices in his design of the wireframes, in which he used gradients and tables, in addition to photographs.


Style Guide and Workflow

Interline Travel Style Guide and Workflow

Creating a style guide and workflow was a highly important step in my process, especially because I would be completing mockups of many pages with similar content. My goal was to have consistency across the project, and to shorten my production time with repeatable tasks and reusable elements. I also consulted our front end developer to find out what assets he would need so that I could prepare those as I went. By extracting my header and footer into their own files, I was able to streamline my process for each page by just pasting them in as entire groups, ensuring everything would be precisely aligned when navigating the website. I also prepared several blank tables to use in various places, as that was a design element that was used repeatedly and would really slow me down if I had to start each one from scratch.

Challenges

Interline Travel Wireframe Layers

One challenge that I faced was that the wireframe files, although presented in layers as a .psd file, had been converted to grayscale. The site required dozens of photographs, and even though the UX designer had chosen some, he had converted them all to black and white, which I couldn't use. Although I had requested access to the marketing photo library, the person who could help me was on vacation. Rather than sit and wait, I was resourceful, locating appropriate images on Google images which would eventually be replaced with licensed photographs. The UX designer had also used a technique for making the many tables which couldn't be replicated easily. I ended up having to make a few from scratch so that I could make adjustments to the colors.

Another challenge was that I was working remotely, with the product manager being overseas. The team communicated via email, Slack, and Google hangouts, which worked well for us.


Completed Mockups for Desktop

Interline Travel Mockups

These are some of the finished mockups that I produced based on the wireframes by the UX designer on the project, Bart Landry. The files were originated in Adobe Photoshop with the wireframe file as a guide. All files were converted to .jpg format and both sets were uploaded to Google drive where they were shared with the team.

Interline Travel Mockups