Разработка мобильной версии проекта для «Инфофлот»

Главное о кейсе

По результатам аналитики UI/UX разработан стильный современный дизайн проекта для смартфонов и планшетов. Его простота и лаконичность помогают пользователям быстро подобрать круиз в соответствии с их предпочтениями. Все требования и пожелания заказчика выполнены в полном объеме.

Based on the results of UI/UX analytics, a stylish modern design for the mobile version of the project was developed. Its simplicity and conciseness help users quickly find a cruise according to their preferences. All requirements and wishes of the customer are met in full.

Бизнес-задача и ее решение

Бронирования туров происходят на основном сайте, однако клиенту необходимо было также иметь адаптивную версию для привлечения мобильной аудитории. В результате со смартфона или планшета пользователи смогут подобрать круиз и оставить заявку в форме обратной связи или продолжить бронирование на основном сайте.

Мы провели полный спектр работ от аналитики UI/UX до разработки и внедрения современного дизайна.

Ключевые требования заказчика:
- Кроссбраузерность
- Кроссплатформенность (корректное отображение на устройствах Android и iOS)
- Высокая скорость работы

Мобильная версия предполагает возможность подобрать круиз и оставить заявку в форме обратной связи или продолжить бронирование самостоятельно на основной версии сайта. Круиз подбирается с помощью фильтра, который имеет два режима – простой и расширенный. Простой совпадает с фильтром на главной странице, а расширенный содержит все имеющиеся поля.

После выбора тура пользователь переходит на детальную страницу круиза. В слайдере демонстрируются изображения теплохода, ниже находится блок с описанием тура, стоимостью, маршрутом, услугами, скидками и т.д.

Чтобы отправить заявку, пользователь предоставляет минимальные данные (электронная почта, телефон, имя), которые передаются в CRM заказчика, что позволяет менеджерам оперативно связаться с клиентом. После того, как заявка принята, пользователю предлагается дождаться звонка или продолжить бронирование самостоятельно на основной версии сайта.

Перед подбором круиза можно ознакомиться со всеми доступными теплоходами. На странице каждого из них представлено описание, фотогалерея, список кают и туры, в которых задействован теплоход.

В соответствии с пожеланием заказчика информация в мобильной версии представлена компактно, чтобы облегчить восприятие пользователями. Дополнительное нижнее меню позволяет быстрее ориентироваться на сайте. Помимо страниц подбора круизов и информации о теплоходах также разработаны разделы новостей и данных о компании.

Bookings are made on the main website, but the customer also needed an adaptive version to attract a mobile audience. As a result, users will be able to pick up a cruise and leave a request in the feedback form from their smartphone or tablet, or continue booking on the main website.

We did a full range of work from UI/UX analytics to the design development and implementation.

Key customer requirements:
- Cross-browser compatibility
- Cross-platform (correct display on Android and iOS devices)
- High speed of work

The mobile version assumes the ability to choose a cruise and leave a request in the feedback form or continue booking on the main website. The cruise can be selected using a filter that has two modes – simple and advanced. The simple one looks the same as the filter on the main page, and the advanced filter contains all available fields.

After choosing a tour, the user goes to the detailed cruise page. There is a slider that shows images of the ship, and below there is a block with tour description, cost, route, services, discounts, etc.

To send an application, the user provides the minimum data (email, phone number, name), which are transmitted to the customer's CRM, and that allows managers to quickly contact the client. After the application is accepted, the user is asked to wait for the call or continue the booking on their own on the main website.

Before choosing a cruise, users can check out all available ships. Each detailed ship page contains a description, a photo gallery, a list of cabins and tours in which the ship is involved.

In accordance with the customer’s wishes, the information in the mobile version is presented compactly to facilitate the users’ perception. An additional bottom menu allows them to quickly navigate the website. Also, the news section and the page with the company information were developed.

Прочая информация о кейсе

Инфофлот – сервис подбора морских и речных круизов. Заказчик обратился с задачей разработать дизайн мобильной версии проекта.

Infoflot is a sea and river cruise search service. The customer reached out to us in order to develop the mobile version design.

Скриншоты