Кейс «Дримтрип»: Продуктовая команда на аутсорсе для стартапа сайта по поиску отелей
Привет, это Лиза из агентства «Лига А.»! К нам обратился клиент с идеей запуска своего сайта по подбору самых дешёвых цен на отели. Помимо идеи и желания её быстро реализовать, у него была под рукой команда бэкенда и предварительный дизайн-макет будущего сайта. Оставалось только найти команду для реализации фронтенда. И вот, благодаря рекомендации, выбор пал на нас.
Кто мы
Лига А. — агентство разработки и почти геймдев компания. Основную экспертизу мы вливаем в сложные сервисы, интернет-магазины и и браузерные игры. Делаем проекты для дизайн-студий, диджитал-агентств, продуктовых команд и стартапов. Рассказываем о проектах, разработке, команде и делимся опытом в телеграм канале.
За последний год сделали больше 30 проектов, в числе которых есть сервисы по подбору недвижимости и отелей. Как упомянули в начале, в кейсе для клиента Дримтрип мы не просто забрали на себя весь фронтенд. Мы стали командой, которая:
- Помогла дизайнеру доработать макеты и докрутить фичи с точки зрения UX/UI;
- Подумала над архитектурой сайта и выбрала такой подход, который позволит запустить проект быстро, но и не навредит в будущем его развитию;
- Проработала отдельные элементы функционала, такие как фильтры, сортировка, карта, чтобы с ними было удобно и просто взаимодействовать.
После знакомства и погружения в проект, мы поняли, что клиенту нужны не просто руки, которые напишут код хорошо, а головы, которые подумают над проектом вместе с ним и предложат варианты решений. Ну что за счастье, подумали мы, и с головой нырнули в проект. Внутри кейса рассказываем, что получилось.
Построили процесс так, чтобы быстрее дойти до MVP-версии
Мы работали в связке с дизайнером со стороны клиента и построили процесс таким образом:
- Сначала глубоко изучили макеты и вместе с дизайнером подумали над UX составляющей, чтобы даже в MVP-версии пользователи быстро ориентировались на сайте и могли сделать базовые вещи — выбрать даты, найти отель на карте и забронировать его через агрегаторы;
- А потом взяли на себя фронтенд-разработку и за короткое время реализовали нужные фичи.
Вместе с дизайнером доработали макеты и фичи
Клиент пришёл с предварительными дизайн-макетами, которые уже в процессе дорабатывал, опираясь на наши советы и рекомендации. Например, вместе с дизайнером обсуждали, как оптимизировать контент в карточках и реализовать карту с отелями.
Хотелось сделать много и сразу, как это бывает на этапе создания чего-то с нуля. Но некоторые фичи оказались сложными в реализации для MVP-версии, поэтому мы вместе искали варианты более простых решений.
Первое, с чем работали — выпадашка с количеством гостей
На первых вариантах макета дизайнер отрисовал функционал так: взрослых можно было добавить в одно нажатие на «+», а детей через отдельный дропдаун с выбором возраста ребёнка.
Чтобы пользователю было просто совершить это действие, мы нашли схожие сценарии на других сайтах и остановились на решении с двумя дропдаунами.
Второе — фильтры с параметрами, где на выходе анимации выбора получались дёргаными
Мы решили изменить их внешний вид и добавить более простой эффект, который поможет пользователю быстрее сориентироваться и дойти до вариантов поиска.
В итоге, сделали минималистичный фейд-эффект — оставили всего 2 строчки и подняли их вверх. Теперь при скролле вниз они исчезают, чтобы не загораживать поле зрения. А при скролле вверх появляются снова.
Добавили в карту мобильное представление листинга на десктопе и сократили время на реализацию
Изначально клиент не планировал добавлять карту в MVP-версию приложения, поэтому она не была отрисована в макетах. Но в процессе всё-таки принял решение добавить отдельный блок с ней для просмотра отелей. Стало понятно, что без этой фичи не обойтись.
Для решения мы взяли Яндекс Карты — с ними проще работать технически, да и пользователи чаще выбирают этот вариант для навигации.
В процессе мы использовали представление листинга отелей из мобильной версии на десктопе — это помогло нам сократить время на реализацию. Сложность была в том, чтобы учесть эту особенность в архитектурной составляющей приложения.
Сейчас это работает так: после выбора города, даты и количества людей, сервис начинает подбирать отели и показывает карту, если войдём в соответствующий режим отображения. Слева пользователь видит по сути мобильную версию самого приложения.
Архитектурно всё же пришлось немного повозиться
Изначально не было понятно, как будет выглядеть карта и как пользователь будет взаимодействовать с ней. Мы посмотрели первые макеты с ТЗ и поняли, что нужно будет вносить структурные доработки, не сильно усложнив архитектуру и логику. При этом всё должно было работать чётко и без багов.
Сейчас на карте пользователь может управлять картой, выбрать фильтры, посмотреть маркеры с отелями, их цены и сразу перейти в карточку отеля. Смотрится аккуратно и пользователи могут использовать её также, как на телефоне.
Отдельный этап мы посвятили фильтрации и оптимизации на сайте
Вообще хотим отметить, что любим работать со сложными фильтрами — так, чтобы с кучей параметров и запросов.
В фильтрах Дримтрипа есть параметры, которые помогают найти подходящие отели — с городом, тарифами, типами размещения и удобствами. Когда пользователь выбрал фильтр и нажал «Найти», мы идем на сайты других сервисов и ищем варианты. А именно: к Яндекс Путешествиям, Отелло, Трип и Островок!
Под капотом всё оказалось не так просто и запросы могли грузиться вечность
Проблема была в том, что сервер может долго запрашивать варианты от партнёров, а может и бесконечно. Но выдать пользователю какие-то результаты и статус поиска нужно быстро.
Для запросов мы использовали длинные опросы — они помогают поддерживать соединение с сервером. Пока мы не получим статус о том, что все данные собраны.
Это работает так: каждые 3 секунды сервис обновляет статус по запросу. Мы получаем первые варианты сразу, а остальные подгружаются со временем. Если нужного для прекращения опроса статуса не получено, то сервис продолжает собирать данные.
Взяли готовое решение для календаря и сэкономили время клиента на разработку с нуля
Нам нужно было сделать привычный календарь, который используется на всех агрегаторах. Но при этом важно было не упарываться в сложную разработку и сэкономить клиенту время на реализацию. И в итоге — получить календарь, с помощью которого пользователи смогут выбрать дату заезда и выезда из отеля.
На главной странице сайта есть календарь, который помогает пользователю выбрать дату заезда и выезда.
Для реализации мы использовали популярную библиотеку React Datepicker и кастомизировали календарь под стиль сайта.
Это тот случай, когда можно и нужно брать готовое решение и не тратить время клиента на разработку с нуля. Получилось привычно и стильно.
Получили красивый и быстрый сервис, на котором вы теперь можете найти отель
Для MVP-версии мы выбирали решения, которые не требовали много времени на реализацию и при этом хорошо смотрелись на сайте клиента.
Что сделали:
1. Помогли доработать макеты по части UX, чтобы интерфейс был простым и понятным;
2. Забрали на себя весь фронтенд;
3. Интегрировали карту;
4. Поработали с фильтрами;
5. Добавили простой календарь;
6. Оптимизировали запросы;
7. Помогли клиенту быстро запустить MVP-версию сайта, а себе добавили классный кейс в портфолио
Проект Дримтрип — тот случай, когда было особенно приятно работать с клиентом
Было видно, как его команда горит своей идеей и хочет сделать действительно удобный и быстрый продукт для пользователей. Мы, в свою очередь, с удовольствием делились экспертизой и предлагали оптимальные решения в процессе, чтобы не растягивать разработку и как можно скорее вывести проект в релиз 💙
Приходите к нам за сложными сервисами, корпоративными сайтами, админками и играми. Разберёмся с любой документацией, расскажем, какие решения можно сделать кастомными, а какие упростить, чтобы быстрее выйти в релиз. Заберём на себя всю разработку и подключим дизайнеров, если нужно.