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

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

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

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

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

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

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

Что мы сделали и почему так лучше

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

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

Выстроили пошаговое знакомство, показали сразу главное

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

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

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

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

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

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

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

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

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

Добавили интерактивную карту

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

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

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

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

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

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

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

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

Добавили форму покупки билетов на сайт

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

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

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

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

424424
492 комментария

Кажется, Автор сильно не прав - предложенный концепт имхо из 90-х, причем даже не стилёво. Не могу сказать что сейчас хорошо и быстро - но пару быстрых решений и могло бы стать лучше

114
Ответить

Какая разница из 90х концепт или из 2023?)) Мне вот, как обычному пользователю нравится, удобно и приятный дизайн. Я на сайт захожу, чтобы билет купить или карту парка посмотреть, а не оценить стилевость)

92
Ответить

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

Получилось неплохо, с точки зрения юзабилити всё удобно — это главное.

61
Ответить

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

45
Ответить

Ты не видел сайты из 90-х, поэтому такую хуй@ню и несёшь.
В 90-х были сайты на голом HTML без JS, но с blinking-текстом, с 3D-вращающимися картинками и прочей хуйнёй.
Не говори глупостей если не видел сайты из 90-х

27
Ответить

Покажете ваши работы?

10
Ответить

А мне очень понравилось. Зачем мне крутость и стилёвость на сайте? Мне, как приезжему в МСК на несколько дней, нужно плнять идти в этот зоопарк или сходить в другое место, расставляя приоритеты.

Сайт отлично выполняет свою работу.

14
Ответить