Lingua Compass

eCommerce-платформа для бронирования и оплаты международных языковых лагерей

Посмотреть вживую

linguacompass.com

UX/UI design

Web

Responsive

Front End

Places

Filters

Admin Panel

Travel

Education

Back End

Stripe

Pipedrive

Sendgrid

Wufoo

E-commerce

Предыстория

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

ПРОТОТИП

То, с чего стоит начать

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

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

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

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

Иллюстрации

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

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

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

ФИЛЬТР

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

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

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

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

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

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

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

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

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

CRM

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

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

ОПЛАТА

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

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

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

Аккаунт-менеджер
Влад Коробов

Менеджер проекта
Дарья Абрамова

Дизайнеры
Сергей Попович
Ева Рупенко

Front-end разработчики
Павел Байбара
Алексей Федоренко

Back-end разработчики
Ольга Шикло
Антон Мишин

Тестировщик
Игорь Курганов