Работы участников Russian Drupal Awards 2022: num.rukoved.ru, AurumXR, Оптика Люри

Предприниматели, фрилансеры и студии разработки рассказывают о своих сайтах: сервисе для нумерологических расчётов, платформы для создания 3D-моделей и сайте салонов оптики.

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

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

Автор проекта — Наталья Репнягова.

Расскажите о бизнесе, которому помогает сайт

Проект num.rukoved.ru полностью посвящён нумерологии. Он будет полезен тем, кто захочет узнать о влиянии на жизнь личного имени или даты рождения, обнаружить скрытые возможности в себе и научиться благотворнее взаимодействовать с окружающим миром.

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

Готовый результат нумерологического расчёта автоматически загружается на страницу сразу после оплаты, по редиректу или по нажатию кнопки «Вернуться в магазин».

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

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

Сейчас доступны основные нумерологические расчёты:

В процессе разработки — модули для расчёта числовой мандалы от Т. Зюрняевой и для детей.

Какие цели и задачи ставились перед сайтом?

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

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

Как достигались цели, поставленные перед сайтом?

В 2005 году у меня был опыт создания подобного сайта на Visual Basic, который проработал 15 лет. VB сам по себе не новый язык, он не был распространён в России, и каких-либо инструкций на русском языке тоже не было. Его приходилось изучать вместе с английским языком, принимая участие в развитии самой платформы. На это ушло несколько лет. Всё это время я не производила на старом сайте каких-либо обновлений и он жил своей жизнью, стабильно собирая статистику до тех пор, пока не появилась нужда в смене хостинга.

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

Так как я больше не работаю с VB и не использую сервер Windows в своей работе, старый сайт был переписан на Drupal. На данный момент я довольна этим решением, меня всё устраивает: и гибкость системы, и её доступность. Drupal 9 очень порадовала своей стабильностью, в отличие от предыдущих версий .

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

Укажите, пожалуйста, показатели, подтверждающие достижение поставленных перед сайтом целей

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

Так как текста с описанием работы нумерологических калькуляторов оказалось недостаточно для самостоятельного продвижения сайта по ключам, был создан дополнительный раздел «Интересное». Открыв его для индексации, я получила увеличение посещаемости в три раза, а отказы снизились в два раза, судя по Яндекс.Метрике.

Google также начал индексировать основные страницы и показывать по ключевым запросам некоторые из них на первых строчках.

На данный момент тест по скорости главной страницы сайта показывает:

80% посетителей оказались пользователями смартфонов. Очевидно, сайты подобной тематики нужно разрабатывать, ориентируясь на мобильные устройства.

Расскажите про самую сложную задачу на проекте и как она была решена. Поспособствовал ли решению непосредственно Drupal?

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

Почему вы построили сайт на базе Drupal? Какое качество этой CMS максимально проявляет себя на проекте?

Свобода действий и расширяемость Drupal. Я пока не нашла ни одной задачи, которую было бы невозможно реализовать в Drupal, несмотря на то, что ранее я программировала на Visual Basic, и мне было непросто влиться в PHP.

Если можете, расскажите о технологическом стеке вашего сайта

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

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

Для подключения платежей был выбран сервис «Робокасса». Помню, что тогда там ещё не был представлен модуль подключения платежей для Drupal 9. Но, зная, как работает формирование платёжной ссылки и её шифрование, я написала handler для их формирования на лету. Дополнительно я создала модуль для редактирования цен на сайте. Обработку запроса от каждого нумерологического модуля при возвращении пользователя после оплаты распределила через контроллер.

Как сайт продвигает себя и привлекает правильную аудиторию?

После закрытия Instagram* я создала официальную ВК-страницу.

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

Почему вы решили участвовать в конкурсе?

На Drupal 7, 8 и 9 я уже написала несколько проектов и думаю, что эта платформа достойна того, чтобы её продвигали в России. Как разработчик я в этом тоже заинтересована, тем более, что теперь занимаюсь разработкой сайтов, в основном, на этой платформе.

Автор проекта — Михаил Кульбижеков.

Расскажите о бизнесе, которому помогает сайт

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

Какие цели и задачи ставились перед сайтом?

Создать автоматизированный сервис для работы с 3D-визуализацией и дополненной реальностью.

Как достигались цели, поставленные перед сайтом?

UI/UX разрабатывался исходя из личных предпочтений. Сейчас в интерфейс вносятся правки на основе предпочтений пользователей. Тема построена на Bootstrap и сторонних библиотеках для достижения необходимого результата.

Укажите, пожалуйста, показатели, подтверждающие достижение поставленных перед сайтом целей

За счёт использования возможностей дополненной реальности возрастает заинтересованность в просмотре продукта. На основе статистики, предоставленной клиентами сервиса, возможность посмотреть продукт в AR-режиме увеличила продажу продукта в среднем на 20%. На данный момент статистика не ведётся, но разрабатывается решение для учёта статистики просмотров продуктов именно в режиме AR.

Расскажите про самую сложную задачу на проекте и как она была решена. Поспособствовал ли решению непосредственно Drupal?

Сервис реализует возможность просмотра модели товара в режиме дополненной реальности. Эта технология новая, и её API подвержено изменениям. Возможность просмотра моделей сразу в браузере без установки дополнительных приложений реализована через WebXR — API для веб-контента и приложений, используемых для взаимодействия с VR-гарнитурами и очками со встроенными функциями дополненной реальности.

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

Почему вы построили сайт на базе Drupal? Какое качество этой CMS максимально проявляет себя на проекте?

Гибкость, производительность, безопасность и просто чистосердечная любовь к Drupal.

Если можете, расскажите о технологическом стеке вашего сайта

Drupal, Twig, кастомные модули для расширения функционала.

Так как сервис предлагает размещать 3D-модели товаров и работать с ними в дальнейшем, пришлось разработать собственную логику для управления моделями и для их взаимодействий между собой.

Модель — это файл, но он может иметь описание, материалы, сценарии анимации, изображения и другую информацию. Это нода с набором полей. Но её отдельные части — материалы, анимация и прочее — это сущности (content entity), которые, в свою очередь, также содержат в себе поля и ссылки на другие сущности. Это взаимодействие довольно сложное в плане логики работы, и часть информации хранится в JSON, часть — в текстовых полях, часть — в entity reference и т. д. Так вот, Drupal представляет очень гибкую систему для связывания всего между собой. Но наиболее простой и производительный вариант — сделать всё это программно в виде кастомного модуля, поэтому нет никакого смысла выкладывать подобный модуль на drupal.org, он очень специфичен и решает одну конкретную задачу.

Вот именно поэтому Drupal — это круто! Ты заботишься только о работе сервиса, всё остальное делает Drupal.

Как сайт продвигает себя и привлекает правильную аудиторию?

Рекламная кампания в яндекс директ, VK.

Почему вы решили участвовать в конкурсе?

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

Проект разработан в студии WEBSHOP. Представитель студии — Михаил Головкин.

Расскажите о бизнесе, которому помогает сайт

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

Клиент: розничный покупатель.

Демография клиентов: проживают или работают в Автозаводском и Ленинском районах города, а также в небольших городах Нижегородской области, в которых есть отделения «Оптики Люри».

Пол: более 75% аудитории — женщины, т. к. зачастую они пытаются выбрать очки (или принять участие в выборе) для своего супруга, ребёнка или себя. Возраст: 25-45 лет.

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

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

Какие цели и задачи ставились перед сайтом?

1. Презентация ассортимента.

2. Выделиться на фоне конкурентов в Нижнем Новгороде и увеличить узнаваемость компании.

3. Подтолкнуть пользователей пойти в салон оптики.

Главная цель — продвинуть пользователя по воронке продаж:

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

2. бронь понравившейся оправы с дальнейшим посещением салона оптики.

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

Как достигались цели, поставленные перед сайтом?

1. Провели маркетинговый анализ:

1.1. хорошо изучили бизнес, проведя с клиентом брифинг;

1.2. изучили целевую аудиторию;

1.3. разработали воронку продаж;

1.4. провели анализ конкурентов;

1.5. составили CJM;

1.6. изучили метрики предыдущего сайта.

После анализа мы зафиксировали выводы и внедрили их в техническое задание.

2. На основе анализа разработали и сверстали индивидуальный дизайн всех ключевых страниц сайта.

3. Разработали сайт на CMS Drupal и настроили импорт .xls-файла с товарами для формирования каталога товаров.

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

Для «Люри» мы сделали визуальный интерфейс простым и чистым. Цветовая палитра подобрана в актуальных тенденциях, олицетворяет современность и открытость бренда. Цветовые акценты выделяют наиболее значимые части сайта (например, яркий насыщенный цвет кнопок целевого действия отлично контрастирует со светлым фоном, и это делает такие элементы максимально заметными). Сбалансированная композиция, обладающая большим объёмом негативного пространства, контрастное сочетание заголовков и основного текста позволили структурировать информацию на странице и расставить акценты.

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

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

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

Укажите, пожалуйста, показатели, подтверждающие достижение поставленных перед сайтом целей

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

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

Почему мы ушли от лендинга:

1. заказчик захотел заниматься SEO для увеличения посещаемости сайта;

2. дизайн лендинга устарел;

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

Почему вы построили сайт на баз Drupal? Какое качество этой CMS максимально проявляет себя на проекте?

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

Если можете, расскажите о технологическом стеке вашего сайта

Для фильтрации каталога используется модуль Facets с доработками, чтобы работал Ajax.

Для импорта каталога реализован модуль получения информации из .xlsx-файла. В модуле задействован Drupal Queue API.

Для получения текущих позиций каталога с сайта реализован экспорт с помощью модуля Feeds.

Почему вы решили участвовать в конкурсе?

Для нас важно, чтобы заказчики видели качество сайтов, разработанных на CMS Drupal.

Если вы хотели бы увидеть такую публикацию о своём проекте, то присылайте заявки на участие в Russian Drupal Awards через форму на сайте russiandrupalawards.ru. Участие бесплатное. Дедлайн — 31 июля.

*деятельность компании запрещена на территории Российской Федерации