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


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

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

Проект «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
Доступность сайта



Дизайн
Мы отразили атмосферу зоопарка через дизайн, теперь у пользователя формируется корректное ожидание от посещения.
Концепция
Минималистичный интерфейс, где яркие фотографии животных и лаконичные иллюстрации выступают акцентами, создавая эмоциональную связь с пользователем.
Иллюстрации
Рисунки были вдохновлены реальными животными зоопарка. У каждого есть имя и своя история. Они стали героями, которые помогают ориентироваться на сайте.
Фотографии
Мы использовали милые, а где-то смешные снимки животных на фоне природы без вольеров, моменты взаимодействия человека и животных, чтобы подчеркнуть бережное отношение к ним.
Типографика
В интерфейсе используется Inter Medium — современный шрифт с высокой читаемостью, мягкой геометрией и минималистичным характером.

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

- 1920px

- 1366px

- 1024px

- 768px

- 375px

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

Тестовая стратегия
Мы разрабатываем через тестирование (Test-Driven Development), чтобы проект был устойчивым, поэтому заранее продумали тестовую стратегию проекта.
- e2e
Функциональные тесты
Компоненты сайта ведут себя ожидаемо
- a11y
Тесты доступности интерфейса
Сайт доступен по критериям WCAG
- API CMS
Интеграционные тесты
CMS сохраняет и отдает на фронт нужные данные
- Load testing
Нагрузочные тесты
Сайт прогружается быстро
- Visual
Pixel-perfect тесты
Верстка выглядит точь-в-точь как дизайн
Полноценная система управления
Мы внедрили CMS и адаптировали её под команду зоопарка: продумали логику работы с контентом и подготовили инструкции, позволяющие сотрудникам самостоятельно управлять сайтом без нашего участия.
Перенос контента и SEO-оптимизация
Масштабируемая и гибкая инфраструктура
Развернули сайт в k8s-кластере
Это позволило изначально заложить масштабируемую и устойчивую архитектуру проекта.Универсальный сетап
Сделали сетап проекта для переиспользования в проектах разного масштаба.Оптимизировали стоимость хостинга
Дополнительно поставили цель — сделать содержание кластера экономичным без потери стабильности.
Автотесты и контроль стабильности
- 1
GitHub Actions
Запускаем автотесты прямо в пайплайне
- 2
Перед мерджем в master
Проверяем изменения на окружении, собранном в пайплайне
- 3
Тесты по расписанию
Каждый день запускаем проверки, чтобы вовремя заметить проблемы

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

Рассказываем о проекте своими словами
- Презентация по DevOps разработке

- Доклад на YouTube: Деплоим open-source сайт Челябинского зоопарка в Kubernetes

- Презентация по frontend разработке

- Как мы разрабатывали open-source сайт для Челябинского зоопарка через TDD и скриншотное тестирование

- Презентация по тестовой стратегии

- Визуальный язык сайта Челябинского зоопарка: коммуникация через интерфейс









