UI and Banner Design for Gallop Global

Introduction

This is the UI design that I did for Gallop Global which is a Chinese based travel agency located in Quincy, MA. I worked as a UI designer to help with updating their brand new website. For the UI design, I’ve worked with the web developers and back-end developers. Since it is a start-up travel agency and with the budget limit, the final web development has been done but with some function limitation when they publish it. You can check the live view in here: https://www.gallopglobal.net/

Because it is a travel agency, I designed it with many travel features, such as icons and web picture background. The client wants a clear and call to action design which helps with tour sales on the website, so I used eye-catching color such as orange color, to design the buy button and view detail button. Their customers mainly focus on Chinese, so the language of this website is mandarin.

 

Here is the overview of the UI design for this website.

The following are some details UI design for the web pages.

this is feature parts showing on the homepage. It is used to tell users what feature services that they have. I used a stair align design.


Here is the slideshow displayed on the homepage. It is to show the features tours which start from Boston. I used a Boston scenery photo as the background and add a transparent layer on and to bring more contrast from the main contents.

This part shows tour categories. Their tour services are around global, so they have four categories–Asia, Europe, North American and Other places. I designed this part with featured icons and featured web background. I sketched four different scenery icons to show the four categories and illustrate a global background.

In this part, it is a detail page to display the details of the tour product. The left side are picture slideshows. The right side shows the price per person, tour duration, tour schedule and so on. I designed a very clear and call to action orange button to show the buy now.

This part is a product display page, which shows filters and all the tour products. For a better UX, I designed the filter in the top. Also, a big orange call to action button on each tour to ask visitors to know the price and view tour details.

In this area, it shows the details of each tour. I also used the icons to design the UI and keep consistency. The icons show location, scenery, details of tours and restaurant and so on.

Some other views for the web design

Here are some banners that I designed for displaying at homepage slideshow. Each banner shows a scenery of different places.