Создание многостраничного сайта для коуча

Задача

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

Исходные данные

У клиентки был самодельный сайт на платформе Taplink, в котором отсутствовала структура и становилось все сложнее размещать информацию в связи с появлением новых направлений деятельности. Также сайт не был оптимизирован для поисковых систем, а ей было важен трафик из них.
Скриншот сайта Инны Минюк на Таплинке

Работа

Исследование

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

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

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

Проектирование

Составила ассоциативное поле, чтобы убедиться, что мы с клиенткой одинаково понимаем посыл, который должен нести сайт. Вместе сформулировали метафору, на которой будет строиться визуал: маяк светит кораблям, указывая безопасный путь к суше, а коуч, подсвечивает клиенту путь к его цели.
маяк
Исходя из этой метафоры позже родились и вспомогательные визуальные элементы: фоновые изображения моря и неба для важных мыслей.
Разработала вайрфреймы (черно-белые прототипы всех страниц сайта) и примерные тексты.
вайрфреймы
Можно заметить, что финальная структура сайта немного отличается от прототипа — это нормально. Дизайн — это итерационный процесс. В ходе работы над сайтом иногда появляется новое более удачное решение.

Дизайн

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

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

Затем протестировала полученный прототип на потенциальных клиентках.

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

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

Адаптация

После согласования финального дизайна клиенткой я адаптировала в Фигме все страницы под разные устройства (планшет, смартфон).
адаптация сайта в Фигме под разные устройства

Верстка

Сверстала все на Tilda, сделала базовые SEO-настройки и создала технические страницы (Политика в отношении обработки персональных данных, договор-оферта, страница ошибки 404, на которую попадает пользователь в случае ошибки в адресе страницы сайта).
страница ошибки 404

Трудности

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

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

Отзыв клиента

отзыв клиента о работе над сайтом

Итог работы

Понравился проект?

Напишите мне, чтобы обсудить ваш будущий сайт