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

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

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

• Так выглядит сайт Московского зоопарка сейчас
  
• Так мы предлагаем его переделать

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

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

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

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

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

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

• Название зоопарка (ага, попал, куда надо)
• Фотки самых популярных животных
• Яркая кнопка «Купить билет»
• Лаконичные кнопки: как добраться, карта зоопарка и онлайн-трансляция (основные запросы)

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

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

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

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

• Сформировать ожидания. Показываем количество экспозиций и животных, предлагаем спланировать маршрут по территории.
• Помочь с выбором. Показываем интерактивную карту (о ней дальше, она крутая), чтобы человек мог заранее посмотреть, как добраться до конкретного животного, и спланировать маршрут по территории.
• Показать, что еще есть интересного и необычного. Приглашаем на кормление и объясняем, что именно в это время можно посмотреть на животных поближе.
• Учесть интересы детей. Делаем блок с преимуществами: бесплатный вход, контактная площадка, экскурсии.
• Показать стоимость билетов и льготы так, чтобы не нужно было переходить на другие страницы.
• Ответить на вопросы.

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

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

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

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

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

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

• оранжевым — животные
• синим — птицы
• зеленым — рептилии, амфибии и паукообразные

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

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

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

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

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

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