The task was to develop the interface of a service for planning trips and routes. The project includes both search and recommendations of interesting places, as well as a route planner with a map, the ability to add your own locations, calculate the trip distance, and share impressions. The site also features a blog with travel articles, recommendations of objects and their descriptions, as well as a selection of tours and excursion programs.
About the project
The client already had a prepared structure and partial layout. It was necessary to develop the visual style and bring everything to a polished and aesthetically pleasing appearance.
What was done
Research and preparation Design concepts Design of the entire interface Adaptive versions
More than 50 hours
development time
Concepts
The client already had a finished logo, so the color palette and visual style needed to be based on it. I prepared several concept options for the first screen to determine the main idea.
Main page
The main screen guides the user to the pages and services they need. Therefore, it contains different types of navigation, links, and action cards. From the main page, it becomes clear what the company does and what services and materials are available.
Map
The map is the core functionality of the service. It presents all the objects available on the site: attractions, hotels, top places, resorts, and apartments. Here, users can quickly view an object’s card and add it to favorites or to their route.
Route creation
The map interface needed to be intuitive and not very different from familiar services. Moreover, the client already had existing APIs and wanted to keep them to simplify development.
I based the interface on patterns from Google Maps and Yandex Maps, keeping familiar interactions. Here, the user can build a route from various locations, distribute the route by days, and see duration and total distance. These data are saved in the personal account. The user can also share their route and impressions.
Solution
Solution
It was important for the user to take advantage of the partner’s services. Therefore, the page includes a block with similar products in case this one doesn't fit. The first screen features large high-quality photos, the ability to add to favorites and share, as well as a large contact form.
Product card
This is a partner page. Here, partner offers will be placed: tours, excursions, hotels. The idea is to earn a commission from each acquired client.
Object card
On the map, users can see a short description of the object, while here the information is more detailed and complete. From this screen, users can add the object to their route or open it on the map.
Resorts
This section contains a selection of all places with many filters. We created three similar pages: for resorts, events, and places.
Stories
No travel website is complete without a blog. We implemented it in the format of stories that users can share. For convenience, I divided them into categories.
Personal account
The personal account contains all the information a user may need when planning trips: which places and countries they have visited, which ones they are planning, the list and editing of routes, favorite products, and personal information.
Adaptive versions
I developed both tablet and mobile versions. Special attention was given to the mobile version, as it is expected to generate the highest traffic.
UI kit
Projects like this always require preparing layouts for development. I created a UI kit, defined the visual style and animations, and prepared interactive prototypes to ensure developers had no questions during implementation.
More than 80 layouts and over 50 hours
We delivered a complete result — with all states, modal windows, and full adaptation for tablet and mobile versions. Now we’re waiting for the launch of the first version to try it out and test it.