ECommerce-платформа для бронирования языковых лагерей Lingua Compass

1. Вводная задача от заказчика, проблематика, цели

Предыстория

Клиент пришёл к нам с готовым логотипом, более-менее продуманной бизнес-моделью и фиксированным бюджетом на первую версию веб-приложения. Основными требованиями были: мультиязычность, отзывчивость, удобная система управления, гибкий фильтр образовательных программ и интеграция платёжной системы с возможностью вывода денег другим компаниям.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Прототип. То, с чего стоит начать

Видео 1. Работа над проектом началась с создания прототипа клиентской части. На этом проекте мы зашли чуть дальше чёрно-белого прототипа, что иногда помогает определиться со стилистикой.

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

Посадочная страница

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

Клиентская часть приложения

Рис. 1. LinguaCompass отлично смотрится на десктопах, телефонах и планшетах на всех этапах заказа вплоть до совершения оплаты.

Иллюстрации

Рис. 2. Основной фокус при запуске проекта мы сделали на детские языковые программы. Выполненные дизайнером симпатичные иллюстрации призваны подчеркнуть контекст детства.

Удобный фильтр для быстрого поиска

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

Детали фильтра

Рис. 3. Локализация страниц переключается быстро и на той же странице. Стоимость указывается в различных валютах с курсом на момент просмотра.

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

Мини-карточки программ помогают выбрать необходимую, а при развороте можно полностью просчитать стоимость программы с мгновенным пересчётом итоговой цены.

Административная панель

Административная панель сайта позволяет заносить информацию на трёх языках. Все этапы работы с заказом в CRM Pipedrive автоматически отображаются в личном кабинете пользователя.

CRM. Обработка заявок пользователей

После заполнения заявки пользователь регистрируется в веб-приложении автоматически, а сама заявка обрабатывается менеджерами в CRM-системе Pipedrive со всеми необходимыми данными — мы сделали тщательную интеграцию. Pipedrive имеет колоночную структуру. Когда клиент создаёт заявку или она меняет свой статус ( заполнены данные формы, оплачен депозит, подтверждено место и прочее), менеджер перемещает заявку из одной колонки в другую. Для удобной работы с Pipedrive мы написали обработку перемещения заявки. В зависимости от колонки и состояния заявки система автоматически отправляет на почтовый ящик клиента детали, счёт или просьбу заполнить форму.

Оплата. Два этапа для полной безопасности

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

3. Результаты сотрудничества

Создали адаптивный веб-сервис с подробным фильтром школ, удобной административной панелью с возможностью добавлять контент на трёх языках, обработкой заявок пользователей с помощью CRM-системы Pipedrive и платёжной системой, позволяющей отправлять средства языковым школам напрямую.