Передайте Московскому зоопарку, что мы бесплатно переделали им дизайн сайта (на старый больно смотреть)

На сайт Московского зоопарка заходит 1,5 млн человек в год. А выглядит он — без слез не глянуть. Мы в Редакции Рыба предложили, как можно улучшить сайт этого клевого места. Подумали над логикой, над UX и красивостями.

Чтобы сильно не затягивать и не расхваливать, сразу к результату.

Дальше в статье покажу, почему так сделали и какой интерактив придумали.

Мы не старались родить что-то конкурсное, эмоциональное, как прошлый раз с Мантрой, или вызывающее. Зоопарку в первую очередь нужна понятность, простота и чистота.

Кстати, вчера сайт или обновили, или он совсем сломался. Он и раньше был устаревшим, а теперь превратился в огромную ленту новостей.

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

Эти запросы стали опорной точкой, чтобы выстроить логику на главной.

В Московском зоопарке 1267 видов животных, есть музей истории зоопарка, проводятся экскурсии и огромное количество активностей. Так что мы сразу заменили невнятный слайдер с новостями на привлекательный и информативный первый экран, куда поместили:

В хедере дублировали кнопку «Купить билет», график и телефон, чтобы при прокрутке важное оставалось на экране. Сравните →

Заменили в меню кашу из нелогичных выпадающих столбцов на понятный единый список.

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

Выстроилась такая логика страницы:

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

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

Поэтому мы сделали свою.

Карта интерактивная: если кликнуть на иконку, откроется список животных в составе конкретной экспозиции, а дальше — страница самого животного, которую мы тоже переработали.

Есть кнопки для масштабирования, чтобы рассмотреть территорию поближе. Есть чекбоксы: можно посмотреть только животных и экспозиции, а можно — только удобства или кафе.

На нашей карте нет многослойного фона, и яркими цветами выделены основные группы обитателей зоопарка:

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

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

Есть два варианта купить билет в зоопарк: онлайн и в кассах. Оба способа мы объединили в одной форме. А еще добавили описания всех льготных категорий гостей, которые могут пройти в зоопарк бесплатно.

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

Согласен, делать дизайн без техзадания от заказчика сложно, но иногда все достаточно очевидно. Оставляйте впечатления в комментах.

Если понравилась работа и подход, приходите в «Рыбу», пишите нам на сайте или сразу Юле Сон.