Разработка нового сайта для научно-популярного журнала Биомолекула

Заказчик

Антон Чугунов, сооснователь и главный редактор, старший научный сотрудник в Лаборатории моделирования биомолекулярных систем Института биоорганической химии РАН

Задача

Обновить сайт: сделать дизайн, разработать новую информационную структуру, увеличить скорость отдачи страниц

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

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

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

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

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

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

Так сайт выглядел в 2016 году.

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

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

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

1. Разработать новую информационную структуру, которая предусмотрит навигацию по двум тысячам материалов на сайте, оставив в том или ином виде все существующие на сайте рубрики.
2. Разработать современный дизайн, который повысит удобство чтения материалов на разных устройствах.
3. Разработать надежную техническую платформу: высокий uptime, доступность для устройств и поисковых роботов. Сайт должен стабильно работать при нагрузке 60 тысяч просмотров страниц в сутки. При этом скорость отдачи страниц должна быть в пределах 300-500 мс.
4. Созданная платформа не должна иметь ограничений, которые затруднят её развитие в будущем.
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 годами до запуска нового софта, можно увидеть двукратный прирост пользователей и сессий.

Сравнение основных показателей сайта после редизайна

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

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

Перейти на сайт