Как за 6 часов провести UX-аудит и создать редизайн для крупного сайта

Привет, это Никита UX-дизайнер из KOTELOV. Сегодня расскажем, как за один день отправить заявку на тендер, выстроить свою работу над ним и провести аналитику с коридорными исследованиями.

Тендер в Исторический Мультимедийный Парк. Крупный проект, времени на подготовку всего день. Нужно было посмотреть сайт, выявить проблемы и предложить решения.

Пришли, посмотрели сайт, определили проблему и разработали концепт. А ниже расскажем о том, как это было: какие проблемы нашли, как искали решения и к какому результату пришли.

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

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

Исторический Мультимедийный Парк — это крупный государственный проект, в рамках которого в разных городах создаются интерактивные музеи. Экспозиции там реально прикольные, у нас несколько ребят ходили туда — им понравилось.

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

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

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

Заходим на главную страничку и видим такое.

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

1. Запутанная навигация: меню вверху — меню справа В верхнем меню вынесены второстепенные страницы, а важные страницы такие как выставки, цены, афиша спрятаны в боковом меню, которое не сразу заметно

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

Мешанина из гиперссылок

Если все-таки найти и открыть меню справа — откроется вкладка с кучей гиперссылок.

Неочевидно, что это кликабельные ссылки — непонятно, на что можно кликать, а что поясняющий текст. Трудновато понять, что означают те или иные ссылки: например, чем афиша отличается от выставок? А пресс-центр от новостей?

2. В заголовках и форматировании отсутствует иерархия

Громоздкое описание, текст выравнен по центру — тяжело читать. Блоки не взаимосвязаны — непонятная логика. Кроме того, нет четко сформулированного УТП.

3. Ошибки с определением расположения

Мы зашли на сайт, будучи в Санкт-Петербурге, но он почему-то определил нас, как жителей Москвы.

4. Важное в середине — неважное в начале

После первого экрана идут разделы Новости и Интересное в парке. Это не очень важная информация, с которой музей связан, но второстепенно. Если посетитель узнает о ней позже — ничего не случится.

Давайте смоделируем ситуацию:

Наконец, мы добрались до выставок

5. Неудачная визуализация продукта

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

Даже, если кликнуть на выставку — выйдет вот такая информация.

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

Можно листнуть на 2 экрана вниз и только тогда мы увидим что-то похожее на реальную выставку.

В итоге, чтобы увидеть первую удачную визуализацию парка — нужно упорно рыскать по сайту больше 5 минут.

6. СТА Шредингера: то есть, то нет

Кнопка «Купить билет» есть только на центральной выставке — на остальных почему-то нет. Можно подумать, что это части одной выставки, потому что кнопка только одна. Описание тоже почему-то есть только у центральной выставки.

7. Временные выставки

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

Как видно из картинок — временные выставки можно найти на первой странице справа. Проблема в том, что на этом баннере мешанина из информации: Пушкинская карта, выставки, график работы и СТА на телеграм-канал.

Самое страшное в том, что переходы сделаны в стиле «сториз» из запрещенной сети. Только тут нельзя пропустить или остановить «сториз».

8. Нет систематизации

Создается, ощущение, что он создается на конструкторе из разных блоков.

Например, вот

Получился внушительный список проблем:

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

1. Выстроили навигацию для широкой и узкой аудитории

|Главное, чтобы пользователь не напрягался

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

В правой части, добавили второстепенную информацию для более узкой аудитории (для экскурсоводов, арендаторов и т.д)

Разделили хэдер на 2 составляющие

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

2. Поменяли акценты — выставки в начало, а второстепенная информация в конце

| Сначала первое, потом второе

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

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

Структурировали заголовки и описание у выставок — вынесли ключевую информацию. Для временных выставок делаем акцент на датах.

3. Добавили воздуха и мультимедийности

| Изображения тоже хотят дышать

Систематизировали блоки, отделили их фоном и зеркальной версткой — сайт стал живым и лаконичным.

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

4. Сделали акцент на доступности музея

| Доступный музей — это тот, который может прийти каждый

5. Добавили живые фотографии

| Нужно больше жизни, больше

Интересное в парке формируется из фотографий людей. До этого было много баннеров и картинок. Мы постарались использовать только фотографии с реальными людьми или объекты с выставок — это создает в парке атмосферу.

6. Привлекаем посетителей отзывами от именитых личностей

| Вот теперь хороший парк

Подписывайтесь на наш телеграмм-канал, если хотите видеть изнанку диджитал студии. У нас эйчары созваниваются с котами, а команда делает стикеры под каждый пост — t.me/kotelov_love