Челябинский зоопарк

2025

Редизайн муниципального сайта — chelzoo.ru

UX/UI-дизайн, Frontend, DevOps, CMS, большая любовь к животным и своей работе. Благотворительный проект.

О проекте

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

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

Задача №2

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

Мы сделали один раз так

Чтобы потом делать так

Проект «Pelican»

В подкасте обсудили, как строится разработка через TDD, в чём особенности работы с лицензиями во время создания open-source сайта и многое другое.

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

  • Impact Mapping

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

  • Customer Journey Mapping

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

  • User Story Mapping

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

  • Визуальная концепция

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

Стек технологий

Мы объединили все наши подходы, попробовали новые инструменты в реальной работе. Держали фокус на качестве, а не на скорости.

Инфраструктура

  • Docker
  • Kubernetes
  • kind
  • helm
  • DevContainers

Frontend

  • React
  • Next.js
  • TypeScript

Backend

  • Strapi
  • PostgreSQL
  • S3
  • Swagger

Тестирование

  • Playwright
  • axe-core
  • JMeter
  • Step CI

Подходы

  • Test-Driven Development

Доступность сайта

Мы поняли, что версия для слабовидящих не является обязательным условием доступности муниципального сайта и не решает реальных проблем пользователей. Поэтому мы работали по принципам инклюзивного дизайна и использовали специальные подходы вёрстки.
Семантическая верстка
Колористика по WCAG
Иерархия типографики
  • Дизайн

    Мы отразили атмосферу зоопарка через дизайн, теперь у пользователя формируется корректное ожидание от посещения.
  • Концепция

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

    Рисунки были вдохновлены реальными животными зоопарка. У каждого есть имя и своя история. Они стали героями, которые помогают ориентироваться на сайте.
  • Фотографии

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

    В интерфейсе используется Inter Medium — современный шрифт с высокой читаемостью, мягкой геометрией и минималистичным характером.

Адаптировали сайт под планшет и мобильную версию

  • 1920px
  • 1366px
  • 1024px
  • 768px
  • 375px

Разработка + дизайн =

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

Тестовая стратегия

Мы разрабатываем через тестирование (Test-Driven Development), чтобы проект был устойчивым, поэтому заранее продумали тестовую стратегию проекта.

  • e2e

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

    Компоненты сайта ведут себя ожидаемо

  • a11y

    Тесты доступности интерфейса

    Сайт доступен по критериям WCAG

  • API CMS

    Интеграционные тесты

    CMS сохраняет и отдает на фронт нужные данные

  • Load testing

    Нагрузочные тесты

    Сайт прогружается быстро

  • Visual

    Pixel-perfect тесты

    Верстка выглядит точь-в-точь как дизайн

Полноценная система управления

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

Перенос контента и SEO-оптимизация

Мы сохранили и перенесли 10-летнюю историю новостей, чтобы новый сайт унаследовал поисковую ценность старого. Обновили структуру страниц, SEO-настройки и аналитику, настроили динамическую карту сайта. В результате страницы корректно индексируются, а позиции в поиске остаются стабильными.
Сайт лучше индексируется и попадает в топ поисковой выдачи
Метрики показывают, какие страницы просматриваются чаще

Масштабируемая и гибкая инфраструктура

  • Развернули сайт в k8s-кластере

    Это позволило изначально заложить масштабируемую и устойчивую архитектуру проекта.
  • Универсальный сетап

    Сделали сетап проекта для переиспользования в проектах разного масштаба.
  • Оптимизировали стоимость хостинга

    Дополнительно поставили цель — сделать содержание кластера экономичным без потери стабильности.

Автотесты и контроль стабильности

  • 1

    GitHub Actions

    Запускаем автотесты прямо в пайплайне

  • 2

    Перед мерджем в master

    Проверяем изменения на окружении, собранном в пайплайне

  • 3

    Тесты по расписанию

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

Быстро находим проблемы
«Получили сайт, который не только стал работать без перебоев, но и которым можем хвастаться!»
Челябинский зоопарк

от 3 месяцев на реализацию аналогичного проекта