PROJECT NAME:

Happy Tours Bangkok

SKILLS USED
– Site build using WordPress and Divi.
– Custom CSS.

THE CHALLENGE – Book a trip

A web design school was looking to update a travel website template they use to teach their students how to build websites.

My job was to update the site’s look and feel and add a few commonly used, important UX features.

The homepage before the re-design

THE METHOD – A guided tour

My first job was to make the font easier and clearer to read.

I did this by first, increasing its size and second, darkening its colour to make it stand out more.

I also chose to add a golden colour to use throughout the site. I felt this particular shade created an association with warmth and sunlight. A good connection to make if you want to get people to book a holiday.

 

Small, hard-to-read text in the original design

Larger, darker text that incorporates colour in the re-design

The next step was to tackle the homepage. The priority here was to improve the user experience by adding extra features and some re-styling.

Header

The original header fell flat for a number of reasons. The text was difficult to read, it didn’t give the user a clear idea of what the site was about and there was no CTA.

I addressed these issues by adding an enticing video background that made it clear what was on offer. I then added a gradient overlay over it to make the letters stand out more.

I also added a sub-heading to clarify to the user what was on offer and most importantly, a button with a link to the tours available.

 

Cities

To make it easier for people who wanted to see what is available in each city, a new section was added with CTAs that link to the relevant tours.

Testimonial & Social Proof

Trust is essential for any travel agency. To help potential customers feel confident they are dealing with a reputable company, a testimonial and social proof logos were added.

I used a distinct gold border to distinguish the testimonial from the content above and below.

The social proof logos are presented in a faded black and white so their colours don’t overwhelm and distract from the overall design.

Newsletter

I also added a newsletter sign up offering discounts and tips about less well known travel options as a way to market to users in the future.

I decided to use the gold as a background in order to catch people’s attention as they scrolled downward.

More Headers

 Moving on from the front page, I decided to make changes to some of the other pages.

I began with increasing the size of the headers to make them clearer to the user.

I also added a gold gradient overlay to the images to make the text stand out and to maintain a visual style consistent with the home page.

The header image was too small and the text difficult to read

Larger image and text, plus a gradient overlay improved readability

Individual Tour Pages

The pages containing details about individual tours are integral to the site’s success as this is the main point of their business.

In the old design, these pages were rather flat and did little to excite the user about the tour on offer. Crucially, they didn’t contain any CTAs.

I started by increasing the header size and aligning the accordion with description text to make for a better reading experience.

Next, a promotional offer banner was added to encourage users to stick around and explore the site more.

Finally, I added a contact form to allow people to act instantly on booking a tour.

Location Page

My last changes were made to the Location page.

I wanted to ensure the contact details for each location were easier to pick out.

I did this by increasing the font size of the headings and adding a gold divider line.

THE RESULT – Happy holidays

By adding a gold colour and adjusting the text’s size and layout, I was able to make the site more visually appealing and easier to use.

I was also able to increase user engagement with the site by creating a promotional banner and a contact form for each individual tour page.