реклама
разместить

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

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

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

Всем привет, на связи дизайн-студия UXART, где мы ежедневно делаем интернет удобнее.

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

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

За клавиатурой — постоянный редактор UXART. Если захотите прочитать инфу про редактуру и прочее, велком ин май ченнел, ну а мы начинаем :)

Зачем этот сайт?

Именно этот этап чаще всего скипают джуны. Хотя именно с этого стоит начинать прежде, чем приступать к каким-либо макетам.

Первое, что нужно понять — зачем? Зачем сюда зашел пользователь? Если разбирать на проекте Frank, то мы можем выделить 4 ключевые цели:

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

При этом, какие есть дополнительные цели? Чтобы выяснить их, нужно:

  • Погрузиться в текущий сайт и посмотреть, что на нем вообще есть
  • Открыть похожие сайты, проанализировать, как они построены
  • И самое главное, что должно быть у каждого дизайнера — эмпатия

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

Мы вывели следующие дополнительные цели:

  • Заказать мерч — у Frank симпатичная одежда + они часто выпускают коллаборации
  • Найти контакты
  • Посмотреть калории — для тех, кто следит за питанием. Так пользователи смогут заранее посмотреть калории на блюдах
  • Устроиться работать
  • Узнать про акции
  • Узнать условия посещения для собак — Frank позиционирует себя как dog-friendly, но нужно уточнять условия
  • Скачать приложение — чтобы не было случаев, при которых пользователи в экстренном режиме должны скачивать приложение в ресторане ради бонусов
  • Узнать что за заведение

Выше мы разобрались с пользователями и ответили на вопрос — зачем они вообще зашли на сайт. А теперь про самое важное — цели бизнеса:

  • Чтобы к нам захотели прийти — ключевой пункт. Сайт нужен для того, чтобы пользователи после просмотра страниц и поглощения инфы, захотели прийти в рестораны
  • Чтобы нас нашли — нашли контакты и адреса на сайте
  • Чтобы нас запомнили — история про бренд и ценности, про то, чтобы транслировать, что мы — Frank, а не «какой-то» ресторан.
  • Чтобы у нас купили
  • Чтобы пользователь захотел есть мясо — дополнительная цель, пробудить аппетит

Изучаем старый сайт

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

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

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

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

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

Составляем архитектуру сайта

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

В нашем случае архитектура будет выглядеть так:

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

Смотрим на «спрятанные» разделы

Во время изучения сайта и составления архитектуры вы можете наткнуться на важные разделы, которые по тем или иным причинам «спрятаны» внутри сайта. Чтобы избежать таких моментов, мы детально изучаем все страницы и добавляем их в наш майнд-мап.

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

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

В нашем случае мы выделяем вопрос — почему на этот раздел не акцентируется внимание?

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

Ищем отличия сайтов в разных городах (опциональный шаг)

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

(сверху московский, снизу питерский)
(сверху московский, снизу питерский)

Как смотреть метрики без доступа?

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

Мы можем воспользоваться сайтом https://pr-cy.ru/ и получим базовую информацию, которая есть в открытом доступе.

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

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

Составляем вопросы по сайту

На основе аналитике выше составляем вопросы, которые в будущем будем обсуждать с заказчиком. В идеале вам нужно не просто спросить банальное «Кто ЦА?» (хотя и это уточнение нужно), а расписать вопросы так, чтобы заказчик видел вашу вовлеченность в проект.

Например, часть из наших вопросов:

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

Составляем гипотезы

Во время анализа мы также выделяли гипотезы, которые также стоит расписывать. Например, часть из наших гипотез:

Аналитика сайта FRANK by Баста. Как провести редизайн не просто рисуя картинки, а улучшая удобство, метрики и визуал?

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

Если вы хотите узнать больше про вопросы, гипотезы, поиск нужных страниц и так далее — предлагаем ознакомиться с видео)

Подписывайтесь на наш телеграм-канал, чтобы не потерять нас на просторах интернета)

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

1414
22
реклама
разместить
12 комментариев

снова спасибо вам за рабочий инструмент — про SEO-анализ говорю по ссылочке, что вы разместили.

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

1

Спасибо большое за комментарий!

В последние годы появилось много крутых сервисов (не только по аналитике), главное знать, где их искать)

1

Годный материал, спасибо

1

Вам спасибо за комментарий)

Мне в целом нравится сейчас дизайн Frank. Хотя многим сейчас и правда нужен редизайн. Понравилось кстати, что сделал в этом плане Звук с сайтом

1

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

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

1
Раскрывать всегда
Как аналитика сайта помогает бизнесу расти: основные показатели и значения

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

Как аналитика сайта помогает бизнесу расти: основные показатели и значения
1111
реклама
разместить
Как мы делаем дизайн быстро, стильно и в 99% случаев без правок
Как мы делаем дизайн быстро, стильно и в 99% случаев без правок
88
Фестиваль искусств на Луне

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

Правила, чтобы нарушать. Когда UX-стандарты мешают юзабилити сайта
Правила, чтобы нарушать. Когда UX-стандарты мешают юзабилити сайта

У вас новый сайт (или приложение, или какой-то другой диджитал-продукт). Вы хотите убедиться, что клиентам он понравится, и вообще, что пользоваться им удобно. Вы заказываете UX-тестирование у сторонней компании, они предлагают правки, вы идете с этими правками в агентство, которое разработало сайт, оно вносит правки и… сайт становится хуже. Как та…

33
11
Возможно, ваш сайт не работает ― 3 критерия, чтобы это понять

Всего за 0,05 секунды пользователю составляет мнение о сайте, пишет Forbes. А мы разбираем грубые ошибки, которые делают это мнение плохим.

Возможно, ваш сайт не работает ― 3 критерия, чтобы это понять
1212
88
11
История о том, как мы чуть не открыли агрохолдинг ONE PAGE...
История о том, как мы чуть не открыли агрохолдинг ONE PAGE...

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

55
Зубная паста: секреты полезных ингредиентов для здоровых зубов.

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

Кейс по созданию Landing Page праздников для подростков

Если вкратце, то зимой 2019 года ко мне обратилась Ирина Вальтфогель за продвижением ее Фешн-вечеринки (праздников для подростков).

22
[]