Сайт и интерактивная платформа для коуча и карьерного консультанта Полины Усовой

Полина Усова
Тип проекта
Сайт и образовательная платформа с функционалом онлайн-продаж
Используемые технологии
Laravel, Vue.js, Tailwind CSS, Inertia.js, Alpine.js, MySQL, NGINX
Адрес в сети

Описание проекта

Это был заказ на эксклюзивную разработку комплексной коммерческой онлайн-системы, которая состоит из трех основных частей:

  • Публичный сайт с возможностью покупки товаров и услуг онлайн
  • Личный кабинет пользователя с интерактивными задачами
  • Система управления продажами, заявками и контентом сайта

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

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

Создание публичного сайта

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

Воронка продаж или воронка для вашего бюджета?

Довольно часто негативные эффекты ограничений этой системы усугубляются некомпетентными или недобросовестными дизайнерами и разработчиками, которые создают на "Тильде" простые, но при этом невероятно медленные сайты. Я приведу в пример результаты аудита одного из таких сайтов с помощью известного инструмента Google PageSpeed Insights:

Низкие показатели такого аудита могут говорить о проблемах в оптимизации сайта, и особое внимание нужно обращать на показатели скорости загрузки сайта: First Contentful Paint, Time to Interactive, Largest Contentful Paint и Total Blocking Time, — они могут негативно отразиться на позициях сайта в ранжировании поисковыми системами, если ваш сайт не может выдавать хорошие показатели в этих категориях.

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

Решение очень простое: сделать быстрый сайт

Нарисуйте круг, еще один круг, а теперь дорисуйте всю чертову сову! Нет, серьезно, сделать быстрый сайт — это не так сложно, как кажется.

Во-первых, я выбрал и реализовал "монолитную" архитектуру на Laravel с настроенным кэшированием, что делает рендеринг страниц на стороне сервера очень быстрым.

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

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

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

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

Связка Tailwind CSS + Purge CSS генерирует очень "легкие" файлы CSS, что уже само по себе делает загрузку оформления сайта невероятно быстрой, а там, где необходима интерактивность, я использовал замечательный JavaScript-фреймворк Alpine.js, отличающийся небольшими размерами и очень высокой практичностью.

Быстро, хорошо читаемо и удобно — на любых устройствах

Результаты такой подготовки вы можете увидеть ниже, на скриншотах аудита сайта в PageSpeed Insights. Сайт показывает прекрасные результаты как на настольных компьютерах, так и на мобильных устройствах. И даже здесь еще остаются некоторые возможности для точечной оптимизации, но, с практической точки зрения, они не имеют сколько-нибудь решающего значения и ни на что не влияют, кроме пары баллов в результатах аудита.

Разработка системы личного кабинета

Покупка услуг и инфопродуктов на сайте не ограничивается для пользователей получением чека и дежурной фразой "Спасибо! Приходите снова.". Я разработал систему личного кабинета для покупателей и зарегистрированных пользователей.

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

Консультации без посторонних

Некоторые подобные системы на базе GetCourse или других платформ интегрируют стороннюю секцию комментариев (например, виджет ВКонтакте) в интерфейс курсов и лекций с заданиями, в которой каждый ответ становится публичным. Это особенно странно в сфере психологической консультации, так как она затрагивает подчас глубоко личные темы.

Я выбрал более разумный подход: прогресс и комментарии к заданиям всегда остаются приватными, доступными только самому пользователю и автору задания, — как это и должно быть в этой сфере, требующей доверия и готовности к открытому диалогу. В диалоге клиента с психологом никогда не должно быть посторонних.

Простой, но современный и быстрый интерфейс

Для системы личного кабинета пользователей я создал отдельный одностраничный (SPA) интерфейс на основе Vue и Inertia.js. Такая связка технологий, работающая на монолитной архитектуре, позволяет сделать интерфейс удобным и быстрым, а также добавить к нему интерактивные элементы любой сложности. Кроме того, я могу расширять его функционал и изменять его при необходимости в кратчайшие сроки.

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

Разделение групп пользователей на разные таблицы позволяет мне подходить к разработке более гибко, а Laravel предлагает все необходимые инструменты для раздельной авторизации этих групп.

Я предпочитаю создавать отдельные, самостоятельные интерфейсы (фронтенды) для каждой группы, — потому что их проще поддерживать и точечно менять, чем один большой, динамический "кисель" из условий, гейтов, политик и абстракций.

Эксклюзивная CRM-система для управления проектом

Главный инструмент в этом проекте — его CRM-система. Или будет точнее сказать, что это не просто CRM, а полноценный центр управления всеми бизнес-процессами, реализованный как одностраничное приложение (SPA).

Система управления включает в себя удобные инструменты редактирования контента на сайте, функционал для работы с каталогом услуг и инфопродуктов, а главное — инструменты автоматизации продаж и интеграции сервиса платежного агрегатора ЮKassa.

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

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

Эффективный монолит на современный лад

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

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

Итоги запуска для клиента

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

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

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