Кейс «Не напрасно»: новый сайт как первый шаг к единой цифровой экосистеме фонда
1 октября, во Всемирный день борьбы с раком молочной железы, мы вместе с фондом «Не напрасно» запустили их новый сайт. Упростили навигацию между проектами, обновили визуал и мобильную версию, а также продолжили обновление их цифровой экосистемы. Рассказываем, что еще изменилось.
Проблема: развитие фонда обогнало возможности сайта
Фонд «Не напрасно» занимается профилактикой рака, поддержкой людей с онкологическими заболеваниями и развитием онкологического образования. Вокруг этих направлений постепенно выросла экосистема из нескольких самостоятельных проектов: «Онко Вики», «Профилактика.Медиа», «Просто спросить», скрин-тест и Высшая школа онкологии.
По мере развития фонда сайт перестал отвечать его задачам. Навигация между проектами и разделами не соответствовала пользовательским сценариям, а мобильная версия имела критические UX-дефекты.
Главная проблема была даже не в отдельных недостатках, а в том, что сайт не выполнял роль единой точки входа в экосистему проектов.
Поэтому задача редизайна формулировалась так: новый сайт должен был стать хабом, из которого пользователь в зависимости от своей жизненной ситуации попадает в нужный проект.
Стек и технологическая стратегия
Новый сайт фонда создан на React, админ-панель – на «Битриксе». Ровно тот же набор технологий, что и у «Онко Вики», над которым также работали мы.
Вера CEO Студии КЛБРИ это не случайность. Когда все проекты используют один и тот же стек, их проще поддерживать, дешевле развивать и удобнее переносить готовые решения с одного сайта на другой, поэтому унификация была осознанным выбором.
Логичным продолжением этой стратегии стала общая админка для «Не напрасно», «Онко Вики» и раздела «Эксперты». Теперь весь контент хранится в одном месте, а из одной админки можно редактировать наполнение всех проектов.
Это продолжение большой работы по объединению цифровых проектов фонда в единую экосистему, которую мы начали еще с разработки «Онко Вики».
Главная страница: компромисс как архитектурное решение
Изначально фонд хотел представить каждый из шести своих проектов отдельным крупным блоком на главной. Однако блоки конкурировали бы между собой за внимание пользователя и отвечали на разные потребности. Возникал вопрос: какой проект показывать первым?
Мы решили не расставлять приоритеты за человека, а представить все направления уже на первом экране.
Вера CEO Студии КЛБРПричем благодаря дофинансированию проекта мы смогли выделить необходимые ресурсы (часы тестировщика), а менеджерские часы предоставили бесплатно, чтобы уложиться в график без потери качества.
Развили интерфейс на основе существующей экосистемы фонда
При работе над сайтом мы опирались на опыт разработки «Онко Вики» – другого проекта фонда, над которым также работали мы. Некоторые решения уже хорошо показали себя в работе, поэтому мы адаптировали их под новые задачи.
Например:
- Форма подписки на рассылку взята с аналогичной формы на «Онко Вики» почти без изменений – потребовалась лишь минимальная доработка.
- Страница новости собрана на базе страницы статьи в «Онко Вики», где уже имелись готовые сниппеты, кросс-блоки и другие элементы, пригодные для вставки и переиспользования.
- Тот же шаблон новости применен и для раздела «Миссия и цели».
Сделали один UX-паттерн для контента разной сложности
Эту же логику продолжили в дизайне внутренних страниц. Вместо отдельных решений для каждого раздела собрали один понятный паттерн, способный работать с разным объемом и типом контента.
А контент на сайте очень разный: в одном месте – несколько строк о миссии, в другом – отчетность с архивом с 2010 года, в третьем – способы пожертвования, в четвертом – перечисление партнеров.
Если проектировать каждый раздел отдельно, пользователь каждый раз вынужден заново разбираться в интерфейсе.
Поэтому внутренние страницы унифицировали: локальная навигация слева, контент справа. Плюс задали общие паттерны для списков и раскрывающихся блоков.
Вера CEO Студии КЛБРОсобенно хорошо это видно в разделе с отчетами и способами помощи: объем информации растет, но сам интерфейс не усложняется. Новый год отчетности, еще один документ или способ пожертвования – новая единица контента внутри существующего паттерна, а не повод проектировать новый экран.
Сохранили контент и поисковый вес при переезде
За годы на сайте фонда накопились сотни материалов: новости, отчеты, страницы амбассадоров и попечителей. Многие из них уже индексировались поисковиками и приводили органический трафик.
Поэтому вместо ручной пересборки контент мигрировали вместе с существующей структурой. Это помогло сохранить проиндексированные страницы и накопленный поисковый вес, а значит – снизить риск просадки SEO после переезда.
Заодно сохранили весь контентный архив фонда и избавили команду от необходимости вручную переносить и проверять сотни публикаций.
Подготовили временное решение для переноса контента из другого проекта
На главной мы выводим истории героев из проекта «Профилактика.Медиа». Но сайт фонда и медиа пока работают в разных окружениях: чтобы автоматически получать публикации из одной системы в другую, пришлось бы разрабатывать отдельный API, настраивать обмен данными и поддерживать эту интеграцию.
Вера CEO Студии КЛБРДля одного блока это было неоправданно долго – особенно учитывая, что позже «Профилактику.Медиа» мы все равно планируем перенести в общую инфраструктуру фонда.
Поэтому вместо полноценной интеграции сделали тонкий слой между двумя проектами. Он забирает из «Медиа» только четыре сущности, которые нужны интерфейсу: обложку, заголовок, краткое описание и URL публикации, и отдает их сайту фонда в простой структуре. Сам контент не копируется и две CMS не синхронизируются.
Заодно предусмотрели кеширование: сайт фонда не обращается к «Медиа» при каждом открытии страницы, а работает с уже полученными данными. Если источник временно недоступен, блок не должен ронять главную целиком.
В результате вместо полноценной интеграции двух систем получили маленький изолированный адаптер. Это проще в разработке сейчас, меньше связывает проекты между собой и почти не потребует переделок, когда мы приступим к объединению инфраструктуры.
Одна навигация на всю экосистему
Главная сложность сайта – количество продуктов внутри «Не напрасно». Фонд, «Онко Вики», «Профилактика.Медиа», «Просто спросить», скрин-тест и Высшая школа онкологии – самостоятельные сервисы, между которыми пользователь должен свободно перемещаться.
Поэтому хедер и футер мы сделали сквозными и одинаковыми на всех страницах.
В хедере развели два уровня: глобальную навигацию между продуктами «Не напрасно» и локальную – внутри сайта фонда. Так пользователь в любой точке понимает, где находится и куда может перейти дальше.
Цветом разделили действия, контент и продукты
Палитра на сайте работает не как набор декоративных брендовых цветов, а как дополнительный уровень иерархии.
Синий держит интерфейс: ссылки, навигацию и активные состояния. Розовый закреплен за пожертвованиями и формой помощи, а оранжевый становится акцентом на CTA. Более мягкие оттенки работают на карточках отдельных проектов.
Из-за этого насыщенные цвета можно использовать довольно смело: вокруг них много белого пространства, поэтому они не превращаются в визуальный шум.
А разные проекты получают собственные цветовые акценты, не разрушая общий бренд. Пользователь видит разнообразие сервисов, но считывает их как части одной системы.
Айдентику сделали функциональной
Фирменные геометрические формы появляются практически на всем сайте, но работают по-разному: становятся подложкой фотографии, собирают композицию баннера, создают переход между секциями, поддерживают карточки.
То есть айдентика существует не поверх интерфейса, а внутри его конструкции.
Вера CEO Студии КЛБРПоэтому даже обычный функциональный блок вроде новости, формы подписки или CTA можно сделать узнаваемым без логотипа и отдельной декоративной иллюстрации. Это важный признак работающей дизайн-системы: бренд воспроизводится через правила композиции, а не через набор украшений.
Единая экосистема – стратегическая цель
Конечная цель проекта – заменить набор разрозненных сайтов фонда единым цифровым продуктом. Для пользователя границы между сервисами должны постепенно стираться.
Ему не нужно разбираться, какой проект отвечает за профилактику, где искать проверенную информацию об онкологии, а где – задать вопрос специалисту. Человек приходит в «Не напрасно» со своей задачей, а система сама подсказывает следующий маршрут.
Вера CEO Студии КЛБРПри этом объединение не означает визуальной унификации. У каждого проекта сохраняется собственный характер и цветовой код – общими становятся правила, по которым вся система работает и воспринимается.
Поэтому новый сайт фонда проектировали не только под текущую структуру. В него заранее заложили возможность постепенно подключать остальные продукты и расширять экосистему без очередной пересборки с нуля.
Поможем вашему продукту расти без капитальной пересборки
Любой цифровой продукт со временем обрастает новым: появляются сервисы, сценарии, интеграции, накапливаются решения. И далеко не всегда ради следующего шага нужно все переписывать с нуля.
Поэтому мы сначала смотрим, что уже работает, сохраняем то, что ценно, и на этой основе собираем систему, которую можно развивать дальше без гигантских затрат и переделок.
