Автор кейса
WB—TechЛоготип компании

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

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

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

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

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

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

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

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

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

Так сайт выглядел в 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 годами до запуска нового софта, можно увидеть двукратный прирост пользователей и сессий.

Показатели после редизайна

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

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

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


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

В карточку агентства
Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов

Читайте также

Кейсы по теме#СМИ, издательства