Конкурс редизайна сайта ночных квестов

Недавно наша команда приняла участие в конкурсе редизайна 4 страниц навигационного сайта международной сети ночных квестов Encounter. В статье расскажу и покажу, как мы причесали UX и сделали дизайн сайта удобным для пользователей, освещу итоги конкурса!

Encounter — международная сеть ночных квестов с миллионом игроков по всему миру. Сайту 22 года, поэтому владелец объявил конкурс на его редизайн. У нас были ограничения по дизайну и изменениям структуры сайта из-за особенностей движка и огромного количества доменов. Тем не менее, я смогла договориться с организаторами конкурса, что мы уберём правую колонку сайта, т.к. она просто съедает пространство.

В работе нам нужно было сделать упор на мобильный адаптив, т.к. игроки пользуются сайтом во время игр, которые проходят в ночное время. Поэтому было необходимо использовать не очень яркие цвета и сохранить зелёную цветовую гамму — она узнаваема и не «режет» глаза в темноте. Также было необходимо разместить баннер о принципах честной игры Fair play на видном месте.

• Сложная запутанная навигация

• Сложное многоуровневое меню с не всегда понятными ссылками

• Поиск спрятан в недрах меню

• В первом экране отсутствует информация о сути сайта

• Очень много важной информации, но она не оформлена

• Таблицы перегружены информацией и сложны для восприятия

• С некоторых страниц сайта нельзя никуда перейти, нет хлебных крошек

• Интуитивно не понятно, как пользоваться календарём игр

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

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

Как правило, сайты игровой тематики делают в стиле киберпанк, что также подтвердили десятки собранных нами референсов. Мы были очень рады поработать над дизайном сайта в стиле киберпанк, потому что давно мечтали о ярком и запоминающемся проекте!

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

Поскольку сайт навигационный, примерно 80% внимания мы уделили проработке структуры сайта. Хотя мы и оформили первый экран, раскрывающий суть происходящего на сайте, карточки с играми мы поместили не под первым экраном, а только после информации, которую чаще всего смотрят игроки в первую очередь. То есть анонс предстоящих игр и календарь для поиска игр оказались в приоритете для подавляющего большинства игроков.

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

Также мы облегчили и упростили меню, отказавшись от ссылок, потерявших свою актуальность, и вынесли его в пустующий левый сайдбар, который нельзя было убирать. Мы нашли референсы с таким решением, и тут оно сработало наилучшим образом: заполнили пустое пространство сайдбара + важные пункты меню теперь всегда под рукой. И, само собой, весьма актуальный здесь, но почему-то спрятанный поиск мы вынесли в хедэр.

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

И звездой нашего шоу стал обновлённый календарь игр, которому мы добавили простую и интуитивно понятную фильтрацию! Нужно лишь выбрать параметры: тип игры (офлайн/онлайн), страну, регион, город, количество игроков и период проведения и нажать на кнопку «Применить». Тогда в календаре отобразятся игры по запросу, а во вкладках календаря с названиями игр можно посмотреть информацию по каждой игре (по умолчанию показывается самая популярная игра «Схватка»).

Для проекта мы нарисовали 9 иконок для игр, 9 - для меню в сайдбаре, иконку поиска, личного кабинета, иконки, отображающие пол игрока, 12 иконок, символизирующие погоны, для отображения ранга игрока.

На старте проекта мы с командой сразу определились, что все картинки будем генерировать в нейросети Midjourney, что с успехом и реализовали, дополнительно прокачав наши скиллы и добившись именно того эффекта, который мы хотели. Изначально я была не вполне удовлетворена подобранной палитрой в дизайне сайта, т.к. мне настойчиво казалось, что не хватает голубого цвета, и сгенерированная графика, как раз, восполнила этот пробел, и дизайн заиграл новыми красками, подарив мне ощущения мира и спокойствия! : )

В качестве бонуса мы разработали новый лого. За время общения с Encounter мы уловили, что они не готовы менять логотип, поэтому за основу мы взяли старый дизайн и внесли в него небольшие изменения так, чтобы лого не изменился кардинально и имел шансы быть принятым оунерами. Оставили прежний образ и гарнитуру и сделали лого более сбалансированным.

Внезапно мы победили! : ) Наша команда была счастлива узнать, что Encounter оценили наши старания! Отдельную благодарность они выразили по отношению к детально проработанному нами Ui-Kit. Сейчас они постепенно начинают внедрять наш дизайн.

Победа настигла меня врасплох: откровенно говоря, я ни на секунду не предполагала, что мы одержим победу в таком сложном конкурсе! Моя задача была замотивировать и поддержать команду, чтобы мы выложились на 100%, прокачали и углубили наши скиллы и положили в портфолио по-настоящему крутой проект.

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

Я очень благодарна за такой необычный и позитивный опыт, и теперь наша команда стала ещё сильнее. Благодарю всех своих дизайнеров за серьёзный и оперативный подход к решению задач, за креативные идеи и неоднократно проявленную смекалку, за бешеную трудоспособность и упорство, а также за весело проведённое время, которые привели нас к победе!

Смотреть проект на биханс:

#вебдизайн #навигация #конкурс #encounter #челлендж #ux #ui #квест #encounter #победа #победа_в_конкурсе