Как метод персон, CJM и другие методы аналитики позволяют создать удобный сайт, который понравится клиенту и выделится на фоне конкурентов.
Меня зовут Александра и я работаю с Тильдой уже 6 лет. За это время я прошла большой путь: от создания сайтов на готовых блоках Тильды до индивидуального дизайна с анимацией, видео, 3D и так далее. Начинала c создания сайтов для блогеров за 5-10 тысяч. Сейчас работаю с несколькими маркетинговыми компаниями как часть команды, делаю промо-лендинги для крупных компаний и работаю не только с конструкторами.
Запрос заказчика: сделать кислотный, необычный сайт, который подробно и интересно рассказывает о контент-маркетинге, запоминается. Естественно, на базе аналитики. Интересной особенностью является то, что заказчик часто и успешно использует ИИ для работы.
Поскольку я хотела сделать хорошо с первого раза, а бюджет заказчика это позволял, мы решили действовать по уму: с изучением клиентов, конкурентов, их сильных и слабых сторон.
В идеале, каждый сайт нужно делать так, однако часто заказчики скупятся на часть этапов, считая их неважными. Вследствие чего получается некий сайт, конверсию которого приходится улучшать в несколько этапов A/B тестирования и который, в итоге, оказывается дороже.
1.Аналитика
2.Прототипирование
3.Дизайн интерфейса
4.Тестирование
В зависимости от размеров проекта, ЦА и прочих факторов этапов может быть как меньше, так и в 3 раза больше.
Методов - много, особенно когда у заказчика есть старый сайт, Метрика, а лучше - Roistat. Когда сайта нет, стоит сделать следующее:
Анализ конкурентов - сбор критериев для сравнения, согласование критериев, создание таблицы на основе открытых данных конкурентов. Если прямых конкурентов нет - оцениваем косвенных, схожие продукты и так далее, просто система оценки и критерии будут другими.
Метод персон - анализ клиентов по пунктам: описание, соцдем, бэкграунд, чего хочет, что для него важно, боли, как их решить и тому подобное. На базе метода персон можно составить портреты, которые потом можно будет использовать в CJM.
CJM - отражает путь клиента от поиска решения проблемы (продукта) до ухода. Показывает эмоции, выявляет проблемные области и подсказывает, как увеличить продажи и повысить лояльность клиентов. CJM часто незаслуженно забывают делать даже в среднем/крупном бизнесе, тем самым упуская дополнительную прибыль. Например, компания может даже не знать о проблеме с отзывами, концентрируясь на улучшении продукта, а CJM это покажет.
Tree test - составляем карту сайта и предлагаем тестировщикам найти информацию. Если находят медленно или не находят ее - переделываем. Tree test очень помогает в тех случаях, когда у заказчика большая номенклатура, много услуг и свое, устоявшееся мнение насчет структуры сайта.
User Flow - блок-схема действий, которые должен совершить пользователь с открытия сайта до достижения цели. Можно сделать это для одной цели, можно - для многих, если пути будут отличаться.
Каркасы, варфреймы, они же - простые наброски помогают увидеть планируемую структуру сайта в целом. Их можно обсудить с заказчиком, маркетологом, менеджерами, которые работают с клиентами. На основании обратной связи можно приступать к проработке прототипов.
Функциональный прототип - ч/б набросок сайта, с точным расположением блоков, актуальными текстами. Если сделать прототип сразу, пропустив этап набросков, прототип приходится много и часто переделывать. Согласовываем прототип, тексты, переходим к тестированию.
Тестирование интерактивного прототипа. Если заранее собрать представителей ЦА или клиент предложит своих тестовых пользователей - им можно показать прототип и попросить найти ту или иную информацию. Часто на протяжении этого этапа поступает интересная обратная связь, которую можно уточнить, пройдя еще один этап теста или использовать в работе, для A/B тестирования в будущем.
Мудборд, доски настроения и прочее подобное - собираем то, к чему хотим приблизиться и показываем заказчику. В мудборде могут быть сайты, физические продукты, картинки. Все, что может передать впечатление. Мудбордов может быть несколько, если хотим попробовать сделать концепции в разных стилях.
Визуальная концепция - дизайн как минимум 3 экранов главной страницы, близкий к финальному. Хороший дизайнер делает несколько концептов в разных стилях, если сильно не ограничен фирстилем. У меня было желание сделать что-то яркое и свежее и я приметила стили:
В итоге мы остановилась на микро-анимации текста в соединении с акцентами на текст, выбранных ярких цветах и контрастных, по большей части, ч/б картинках.
Дизайн система - своеобразный учебник по проекту для дизайнеров, продуктов, проджектов и программистов. Очень полезен при верстке, росте проекта, упорядочении процесса работы. В дизайн-систему входит UI Kit, гайдлайны, для объемных проектов - фреймворк.
Пользовательское тестирование дизайна - очень и очень важный этап. Проводится тогда, когда весь дизайн уже сделан и нам нужно оценить результат вместе с целевой аудиторией. Делаем дизайн интерактивным в фигме, составляем список задач, предлагаем пользователям, на основе результатов - корректируем дизайн и передаем в верстку.
Руки Роботы - это про контент, главной ценностью которого являются тексты, а не яркие изображения. Поэтому основной акцент сделан именно на текстовой составляющей, цветные картинки заменены на ч/б, а сам сайт - сделан ярким и вызывающим. Также для сайта были изготовлены иллюстрации, максимально передающие суть услуг.
Контент-маркетинг может действительно раскрасить компанию в сети, показать с разных сторон просто за счет текста, что и передает сайт заказчика.
Отзыв заказчика
Александра, спасибо за твое трудолюбие и упорство, которое ты проявила, пытаясь понять наш основной запрос. Мы сразу сказали что хотим необычного, непростого, интересного и запоминающегося. Спустя месяц совместной работы - мы это получили. Спасибо что слышала нас, не останавливалась, не предлагала пустые варианты.
Алексей Штейн
С вами была Александра Ошвин, UX/UI/Web дизайнер, подписывайтесь если хотите узнавать больше о дизайне, Тильде и продажах.
