Мы разработали новый сайт для «Биомолекулы» — самого популярного в России журнала по молекулярной биологии и современных биотехнологиях.

Проект был запущен в 2007 году моим сокурсником Антоном Чугуновым. За это время вокруг журнала сформировалась лояльная аудитория, появились партнерские связи с крупными компаниями (например, «Инвитро», «Ди-а-Эм»), настроен регулярный поток качественного научного контента.

«Биомолекула» — это устоявшееся сообщество людей, которые интересуются естественными науками или занимаются ими профессионально.В РФ нет специалистов в области естественных наук, которые бы не читали этот журнал.

Как все работало раньше

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

При всем этом технологическая составляющая сайта уже в 2015 году устарела и мешала развитию:

  • у сайта был низкий uptime и скорость отдачи страниц;
  • недоступность страниц на устройствах из-за некорректной семантики разметки;
  • не выполнены базовые требования доступности для поисковых роботов и оперативной индексации материалов;
  • дизайн сайта не отвечал современным запросам.
Так сайт выглядел в 2016 году. Источник

Проектирование нового продукта

Прежде всего, важно было понять, что заказчик хочет поменять в продукте и зачем. Я провел интервью с заказчиком и изучил текущую ситуациюпроекта. Подготовил бриф и прототип. Бриф объяснял, «что и почему» я предлагаю, а прототип объяснял, «как» я предлагаю. Во многом  опирался на данные гугл-аналитики проекта. На это ушел месяц.

Основные задачи работы:

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

На рейтинг влияло несколько факторов:

- количество добавлений в избранное у обычных пользователей;

-  у редакторов;

- количество упоминаний в списке литературы статей;

- количество упоминаний в содержании статей;

- свежесть последнего комментария.

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

4. Разработать надежную техническую платформу: высокий uptime, доступность для устройств и поисковых роботов. Сайт должен стабильно работать при нагрузке 60 тысяч просмотров страниц в сутки. При этом скорость отдачи страниц должна быть в пределах 300-500 мс.

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

Процесс разработки

Мы начали работать с действующим бизнесом, и, что именно надо сделать, владельцу было понятно. Это идеальный случай, когда бизнес-модель обкатана и не надо ничего придумывать — надо просто задать побольше вопросов, собрать побольше ограничений и сделать ТЗ.

Конечно, лучше работать с бизнесом, которому 10 лет, чем со стартапом, где основатель не знает, как и почему все это будет работать, зачем ему это надо. Бизнесу это нужно, он будет ехать вас по срокам, стартапер забьет и мотивация платить пропадет — будете бегать за ним просить принять работу — такое бывает.

Технологический стек и рабочее окружение

Тестовая версия проекта была развернута на сервере DigitalOcean.Было настроено Continuous Integration и Continuous Deployment. При каждом изменении в проекте автоматически происходила сборка проекта, выполнялись автоматические тесты и статический анализ кода. Настроена отправка статусов сборки проекта в GitHub так, чтобы изменение кода можно было принять только в случае успешной сборки. Для CI/CD использовался сервис TeamCity.

Сценарии автоматического развертывания проекта были написаны сиспользованием fabric. Для развертывания проекта в окружении разработчика использовался Vagrant и Packer для сборки базовых образов системы.Production сервер был настроен при помощи автоматических сценариев, написанных на fabric.

Настроили автоматическое развертывание новых версий с помощью TeamCity. По проекту написаны функциональные тесты для автоматической проверки работы в реальных сценариях использования. Для написания функциональных тестов использовался Selenium и Python 3.

Фичи

Интеграция WYSIWYG-редактора

Для создания и редактирования статей был реализован WYSIWYG-редактор со следующими возможностями:

  • задание авторов, редакторов и технических редакторов статьи;
  • различные блоки статьи: сноска, врезка, цитата, списокопределений, галерея изображений и так далее;
  • задание списка литературы с получением информации через DOI и PubMed ID;
Так подгружается список литературы из базы данных PubMed.

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

Стили статьи

Самым трудным было создать макет страницы статьи. Антон хотел много разных стилей, которые я не встречал на других медиа. Было трудно сделать всю эту систему. В итоге сейчас в статью можно добавить такие элементы:

  • Вставка
  • Сноска
  • Врезка
  • Цитата
  • Галерея
  • Картинка / Видео

И разные комбинации этих элементов — пример статьи с элементами разных стилей.

Конкурс «био/мол/текст»

«Биомолекула» ежегодно проводит собственный конкурс на лучшую научно-популярную публикацию в области современной биологии. Это важный и популярный конкурс среди студентов и научных работников в сфере естественных наук.

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

Админка страницы конкурса

Перенос данных на новый софт

Кроме этого, большой работой был перенос данных в новый софт. Если с пользователями все было просто, то со статьями, которых было пару тысяч, все было иначе. Мы писали конвертеры для обновления html-разметки, переносили и проверяли результат. Эту процедуру повторили 5 раз, пока большинство статей не «встало» как надо.

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

Функциональность сайта

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

В итоге сейчас на сайте есть следующие форматы:

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

Поиск по этому огромному количеству контента был реализован с использованием возможностей СУБД PostgreSQL.
Сделали пуш-уведомления о новых статьях. Для комментариев к статьям используется сервис Disqus для которого была сделана интеграция с пользователями сайта.

Блок похожих по теме статей создается с использованием вероятностногометода Монте-Карло.

percentile = 0.1
normalized_rating = (rating * (1 - percentile * 2))/max_rating + percentile


Берется случайное число от 0 до 1. Если рейтинг статьи больше или равен этому числу, статья попадает в рекомендованные. Параметр percentile можно увеличить, чтобы уменьшить влияние рейтинга на попадание в рекомендованные.percentile = 0 — самая рейтинговая статья всегда попадает в рекомендованные;percentile = 0.5 — рейтинг не влияет на вероятность попадания в рекомендованные.

Для вспомогательного финансирования сделана интеграция с Яндекс.Деньгами — пользователи могут отправлять донаты.

Интерфейс админ-панели

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

Кроме этого, заказчик попросил сделать в админке управление страницами ошибок 404 и 500 — это деталь, о которой многие владельцы сайтов не думают.

Как и во всех разработанных нами админках, всеми сущностями меню можно гибко управлять (CRED).

Дизайн

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

Макет главной страницы после редизайна
Утвержденный вариант нового логотипа проекта

Команда проекта и сроки реализации

Над проектом работали 6 разработчиков, 1 QA специалист и менеджер проекта.В общей сложности проект занял около 2,5 лет.

Планы на будущее

Важным для меня итогом стало то, что Биомолекула сильно поднялась в рейтинге SimilarWeb. Если сравнить последние 3 года с 3 годами до запуска нового софта, можно увидеть двукратный прирост пользователей и сессий.

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

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