Как создать дизайн на базе аналитики на примере кейса контент-студии Руки Роботы

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

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

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

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

1.Аналитика

2.Прототипирование

3.Дизайн интерфейса

4.Тестирование

В зависимости от размеров проекта, ЦА и прочих факторов этапов может быть как меньше, так и в 3 раза больше.

Методов - много, особенно когда у заказчика есть старый сайт, Метрика, а лучше - Roistat. Когда сайта нет, стоит сделать следующее:

Анализ конкурентов - сбор критериев для сравнения, согласование критериев, создание таблицы на основе открытых данных конкурентов. Если прямых конкурентов нет - оцениваем косвенных, схожие продукты и так далее, просто система оценки и критерии будут другими.

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

CJM - отражает путь клиента от поиска решения проблемы (продукта) до ухода. Показывает эмоции, выявляет проблемные области и подсказывает, как увеличить продажи и повысить лояльность клиентов. CJM часто незаслуженно забывают делать даже в среднем/крупном бизнесе, тем самым упуская дополнительную прибыль. Например, компания может даже не знать о проблеме с отзывами, концентрируясь на улучшении продукта, а CJM это покажет.

Tree test - составляем карту сайта и предлагаем тестировщикам найти информацию. Если находят медленно или не находят ее - переделываем. Tree test очень помогает в тех случаях, когда у заказчика большая номенклатура, много услуг и свое, устоявшееся мнение насчет структуры сайта.

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

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

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

Тестирование интерактивного прототипа. Если заранее собрать представителей ЦА или клиент предложит своих тестовых пользователей - им можно показать прототип и попросить найти ту или иную информацию. Часто на протяжении этого этапа поступает интересная обратная связь, которую можно уточнить, пройдя еще один этап теста или использовать в работе, для A/B тестирования в будущем.

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

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

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

Дизайн система - своеобразный учебник по проекту для дизайнеров, продуктов, проджектов и программистов. Очень полезен при верстке, росте проекта, упорядочении процесса работы. В дизайн-систему входит UI Kit, гайдлайны, для объемных проектов - фреймворк.

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

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

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

Отзыв заказчика