UI Case Study - TakeTours

This is a UI Design Study. I researched a website and chose 2 pages to re-create the UI on and updated iconography, typography, colour pallet. I also moved UX components within reason.

Mock-ups of Taketours

Background

In this UI/UX redesign case study, I worked on the website of Take Tours, an established leader in booking multi-day guided bus tours and day tours. Take Tours' online booking system offers a large number of products to help travelers find the perfect vacation package for them. It then needs to present a wide range of information to customers, including departure dates, duration, cost, destination, appeal points, and reviews, so that they can compare those products. With the amount of information the website must provide, the challenge was to design a website that would inspire users to travel, yet be organized enough to make it easy for them to find the plan they want without being overwhelmed or confused.

Current Website

Current Website

Problems

Structure/Layout

HOME: A more organized division of areas would be beneficial to the layout of this website. Currently, they are combined like Tetris, which distracts the user's eye and lacks a sense of unity and consistency of information.
Tour List Page: Combining the search filters into one place would improve user convenience. Currently, the filters are split into two separate areas, requiring users to go back and forth between the two areas to configure the filters. In addition, there is wasted space under the filter that is underutilized.

User Experience

Placing the primary color buttons only on the main leads to conversion would improve the UX. In the current site, the primary color is used everywhere, including buttons and text, which can cause users to lose sight of the main lead and get lost.

Hierarchy

By increasing the strength of the font size and adding hierarchy to the headings and body text, the site will be clearer and easier for users to understand. Current sites lack a clear hierarchy of information by font size, making it difficult for users to find the information they need. Additionally, the large amount of text used can overwhelm the user with information. In this situation, users may miss important information or portions of the site that are relevant to their objectives, making it difficult for them to use the site.

My Solution

Home Mocu-ups
Search Mocu-ups

Improvement

Organized Layout

HOME: Rearrange areas by category so that information is more detailed from the top of the page to the bottom. Sub elements, such as app downloads and subscriptions, can be placed in the footer to keep the page clear, as people will go to them if they want to.
Tour List Page: Placing filters in one place will increase user convenience. In addition, the search results area is expanded to the dead space below the filters and the photos are displayed in a larger size to improve the appeal to users.

Effective Use of Colors

By reducing the number of areas where primary and secondary colors are used, important elements and actions stand out. For example, buttons using primary colors are used only on the path to conversion. This makes it easier for users to intuitively understand how to use and navigate the site as a whole.

Optimized Text and Font Size

By minimizing the amount of text by using icons and enlarging the photos, I visually approached the user's desire to travel. By doubling the size of the headings compared to the body text, I clearly indicate the hierarchy of information. This makes it easier for users to find important information and lowers the risk of missing key elements as they browse the site.

Branding

Branding