Шуруповёрт из Cyberpunk 2077
Роботы Figure на кухне
Nothing Phone 3a
Робот-человек
Nikola всё
Uber для охраны
iPhone 16e
Смартфон Huawei с 3 экранами
Аниме: Улицы разбитых фонарей
Рикша Hyundai

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

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

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

О проекте

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

Старый первый экран главной страницы
Старый первый экран главной страницы

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

Проблемы сайта

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

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

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

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

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

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

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

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

Старый дизайн календаря игр
Старый дизайн календаря игр

Особенности навигационного сайта

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

Начало работы

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

Наконец, всё стало просто и понятно : )
Наконец, всё стало просто и понятно : )

Концепция

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

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

Как мы модернизировали UX

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

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

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

Редизайн главной страницы
Редизайн главной страницы

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

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

Обязательно посмотрите в нашем кейсе, как работает календарь!
Обязательно посмотрите в нашем кейсе, как работает календарь!

Работа с графикой

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

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

Нам сказали, что мы создали целый новый мир! : )
Нам сказали, что мы создали целый новый мир! : )

Новый лого

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

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

Итоги конкурса

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

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

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

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

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

1616
реклама
разместить
13 комментариев

Колоссальная работа!!!!

2

и тебе спасибо! пишешь, будто не участвовала))

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

1

очень чёткий комментарий, спасибо за него и за супер-продуктивную работу=))

1

Поздравляю с законченным проектом! Отличная работа

1

Большое спасибо =)) мы тоже очень рады!

Было очень классно поработать над таким больши проектом, учитывая большое количество процессов и мелочей, которые нужно было учитывать, а особенно выбранную тематику 🔥👍

1
Раскрывать всегда
реклама
разместить
Apple отключит сквозное шифрование в iCloud для пользователей в Великобритании

После новостей о требовании местных властей предоставить доступ к зашифрованным данным пользователей iCloud по всему миру.

Источник: Apple / The Verge
1212
99
22
11
11
Кровавое Mi-6 или это другое?
Футбол дома как на стадионе: вышла лимитированная серия умных устройств Sber совместно с Okko

Рассказываем про обновлённые ТВ-приставку SberBox 2 и телевизор Sber, дизайн которых вдохновлён духом грандиозного футбольного события.

Футбол дома как на стадионе: вышла лимитированная серия умных устройств Sber совместно с Okko
11
Крупнейший взлом Bybit. Вся правда, как хакеры вывели $1,4 млрд в Ethereum.
Крупнейший взлом Bybit. Вся правда, как хакеры вывели $1,4 млрд в Ethereum.

21 февраля 2025 года криптовалютная биржа Bybit подверглась масштабной хакерской атаке, в результате которой злоумышленники похитили около 401 346 ETH (Ethereum) на сумму примерно $1,4-1,5 миллиарда. Это событие уже называют крупнейшим взломом криптобиржи за последние годы и одним из самых значительных инцидентов в истории криптовалютного рынка. Но…

44
Ozon начнёт удерживать с продавцов расходы на услуги курьеров, если покупатель не принял заказ или отменил его, когда курьер был в пути

Раньше продавец оплачивал «последнюю милю» — доставку до ПВЗ, постамата или в руки — только при успешной покупке или возврате.

Источник фото: РБК
88
33
11
Продавцы в свою очередь заявили, что они и не продавцы вовсе, а лица, предоставляющие услуги по передаче товаров на бартерной основе покупателям, тем самым уверяют, что к ним данная комиссия не относится. Ozon они рекомендовали заняться поиском тех самых продавцом, к которым они собрались применять комиссию.
«Аэрофлот» запустит прямые рейсы на китайский Хайнань из Санкт-Петербурга, Казани и Уфы

На фоне роста турпотока из России.

88
Selectel вошел в рейтинг самых дорогих компаний Рунета по версии Forbes

Selectel занял 19-е место в рейтинге самых дорогих компаний Рунета по версии Forbes. Аналитики оценили компанию в $680 миллионов.

Selectel вошел в рейтинг самых дорогих компаний Рунета по версии Forbes
33
11
«У нас электричество заканчивается»: директор по развитию ИИ «Яндекса» предупредил о нехватке энергии для обучения моделей

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

Фото ТАСС
6060
88
11
Если Абхазии даром энергию не отдавать, то и Яндексу хватит. Хотя чего это я? Лучше Абхазии даром, а россиянам тариф повысить.
[]