Кейс: веб-приложение для компании «Salz Club», которая проводит онлайн и оффлайн мероприятия в Германии

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

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

Игровой клуб «Salz Club», в котором организаторы проводят мероприятия для личностного роста (настольные игры и тренинги) в Германии.

Со временем количество мероприятий и обращений в личные сообщения кратко выросло и на обработку лидов стало уходить много времени.

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

Поэтому ко мне они обратились с идеей создания чат-бота, в котором клиенты могли бы посмотреть расписание всех актуальных мероприятий, записаться и оплатить участие. Чат-бот должен дать клиенту возможность сделать это в Telegram и особенно в Instagram*, так как там проходит 99% переписок. Также все должно было выглядеть красиво и самое главное юзабильно.

Из-за ограниченного функционала чат-ботов в Instagram*, мы поняли, что для решения задачи нужно собирать веб-сервис, который будет работать независимо от социальных сетей.

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

На платформу добавили возможность завести личный кабинет, в котором отображаются оплаченные участником предстоящие мероприятия. Также можно посмотреть историю оплат.

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

После покупки предлагается подключить чат-бот в Telegram, который за день до события отправляет напоминание. На случай, если клиент не подключил чат-бот, то напоминание дублируется на электронную почту. С помощью чат-бота наш клиент может отправлять информационные рассылке по базе.

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

Как обычно, процесс реализации можно разбить на несколько этапов:

Этап 1. Составление технического задания (ТЗ)

Собрали от клиента вводные данные: основное видение проекта и айдентику. Затем составили майндкарту со схемой веб-приложения.

Вот, что у нас получилось:

Этап 2. Создание и согласование дизайна всех разделов приложения

На этом этапе подключили дизайнера, который нарисовал дизайн нашего сервиса.

Вот такой прототип получился:

Этап 3. Выбор сервисов

Настало время выбирать сервисы, на которых мы будем собирать наше веб-приложение. Я не люблю изобретать велосипед, поэтому выбираю уже существующее на рынке решение и адаптирую его под свою задачу. Это позволяет сокращать время разработки, а также не париться по поводу стабильности и надежности, так как за этим следят разработчики сервиса.

Так вот я отдаленно был знаком с конструктором сайтов Creatium.io (в ссылке встроен промокод, который дает 30 дней пользования конструктором бесплатно), который имеет встроенные шаблоны для создания интернет-магазинов на тысячи позиций и личного кабинета.

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

И чтобы к нашему сайту подключить свою базу данных и платежную систему, я арендовал виртуальный сервер и развернул на нем n8n.io – сервис по типу Albato, но только в разы дешевле (экономия более 2000₽/мес).

В качестве платежной системы был выбран Stripe, так как клиент уже его подключил.

Этап 4. Реализация проекта

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

Теперь мне предстояла задача сделать раздел для администрирования. Здесь я также не стал изобретать велосипед и все управление сервисом реализовал через всеми любые гугл-таблицы.

Как это выглядит:

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

Пример напоминания:

Этап 5. Запуск и исправление ошибок

После запуска потребовалось внести несколько корректировок для оптимизации загрузки сайта и клиентского пути.

Чтобы ускорить загрузку сайта, я скорректировал два момента:

Результаты тестов от Google PageSpeed:

До оптимизации производительность на телефонах была около 58. Так что с задачей оптимизации мы справились.

Также оптимизировал создание ссылки на оплату и переход на страницу оплаты. Примерно на 2-3 секунды сократилось время ожидания пользователя.

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

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

За 4 недели получилось собрать довольно простой и в тоже время юзабильный веб-сервис, в котором посетитель может:

Как результат заказчик остался в восторге!

Чтобы задать вопрос или записаться на бесплатную консультацию, пишите мне в личные сообщения: @nlevchenko99

Также подписывайтесь на мой телеграм-канал, в котором публикую больше интересных кейсов и рассказываю про жизнь разработчика: @nilevforce

*Instagram - запрещенная в РФ социальная сеть