Редизайн сайта
Челябинского зоопарка
Челябинского зоопарка
История
Старый сайт зоопарка был сделан 10 лет назад. С тех пор информационный ландшафт успел измениться, а зоопарк сильно вырос.
Задача
Обновить визуальный образ зоопарка и донести его ценности так, чтобы выстроить сильную эмоциональную связь с посетителями и сформировать у них искреннее желание прийти.
Impact Mapping
Погрузились в проект, лучше поняли заказчика и ожидания, связали цели проекта, пользователей сайта, их действия и задачи, чтобы делать только то, что имеет ценность.
Customer Journey Mapping
Изучили, как пользователи взаимодействуют со старым сайтом. Нам удалось сохранить удачные паттерны и сделать новый опыт лучше. Например, пользователи не могли найти новости зоопарка на сайте, поэтому я вынесла новости в главное меню.
User Story Mapping
Визуализировали сценарии пользователей на сайте и разделили их на релизы, чтобы стартовать с самого нужного. Теперь мы четко следуем плану, на который всегда может опереться команда и заказчик.
Customer Journey Mapping
Изучили, как пользователи взаимодействуют со старым сайтом. Нам удалось сохранить удачные паттерны и сделать новый опыт лучше. Например, пользователи не могли найти новости зоопарка на сайте, поэтому я вынесла новости в главное меню.
User Story Mapping
Визуализировали сценарии пользователей на сайте и разделили их на релизы, чтобы стартовать с самого нужного. Теперь мы четко следуем плану, на который всегда может опереться команда и заказчик.
Глубинное интервью
Провели сессии с сотрудниками зоопарка, где открыто обсуждали проблемы использования старого сайта и выясняли их ожидания от нового.
Инклюзивный дизайн
Изучив законодательство, стало ясно, что версия для слабовидящих является не обязательным условием. Важно, чтобы люди с ограничениями по зрению и моторике могли полноценно пользоваться сайтом. Интервью со слабовидящими пользователями подтвердили это. Поэтому мы отказались от версии для слабовидящих в пользу инклюзивного дизайна и специальных подходов вёрстки.
Типографика
Продумали иерархию типографики и заголовков, соотношение интерлиньяжа и кегеля для простоты навигации пользователей и скринридера.
Цвет
Опиралась на принципы WCAG: соблюдала требуемую контрастность, подбирала хорошо различимые оттенки.
Визуальная концепция
Разработали три концепции и специально включила спорные решения, чтобы согласовать не только желаемый стиль, но и зафиксировать те идеи, которые точно не подходят для проекта.
Дизайн
Минималистичный интерфейс с понятной структурой и простой навигацией, где яркие фотографии животных и лаконичные иллюстрации выступают акцентами, создавая эмоциональную связь с пользователем, не перегружая при этом страницу.
Основная цветовая палитра
Иллюстрации
Рисунки были вдохновлены реальными животными зоопарка и отрисованы мной вручную. У каждого из них есть имя и своя история. Они стали героями, которые помогают ориентироваться на сайте.
Подготовка к вёрстке
Обсудили с разработчиками, что нужно, чтобы сверстать макеты пискель-в-пиксель. Получилось сделать так, чтобы ревью макетов проходило быстро и спокойно: почти все недочеты находили автотесты. Для этого я внедрила новые подходы к подготовке макетов к вёрстке.
Результат
Зимой количество покупок билетов с сайта выросло почти в 2 раза, а в соцсетях зоопарка пользователи делятся своим положительным опытом от взаимодействия с новым сайтом. В итоге сайт Челябинского зоопарка удалось сделать простым, тёплым и понятным — таким, чтобы им было удобно пользоваться всем: семьям, слабовидящим пользователям, пожилым людям и сотрудникам.
Ещё больше деталей и процесс — на Dprofile.
Ещё больше деталей и процесс — на Dprofile.
