В мае 2022 года ко мне обратился операционный директор Animation School. Они хотели изменить текущий сайт, так как было ощущение, что сайт уже устарел и не такой удобный, как у конкурентов.
Мы долго обсуждали задачу и пришли к нескольким этапам работы:
- Исследование, чтобы понимать, что нужно менять и как улучшить пользовательский опыт
- Дизайн сайта
- Верстка сайта
- Программирование сайта в CMS
Текущий сайт у клиента на Wordpress. Мы планировали делать редизайн сайта на Тильду, потому что это дешевле, быстрее и проще в работе. Но у клиента сильная привязка к SEO, а переезд на другую платформу требовал привелечения сторонних специалистов и примерно 100 тысяч бюджета на перенос seo и докупку ссылок для поднятия в выдаче. Поэтому решили остаться пока на Wordpress.
Исследование
Чтобы понять, в какую сторону делать редизайн, нужно разобраться, как сейчас пользователи пользуются сайтом, что сильного они видят в школе, что им нужно на страницах и что хотят от сайта владельцы.
Чтобы понять, что хотят владельцы, я составил список требований бизнеса, целей и ЦА продукта на основании информации брифинга и утвердил это с клиентом.
Помимо конверсионных целей, есть цель развивать блог и удерживать там пользователей.
Анализ конкурентов
Чтобы понять, что в нашем сайте хорошо и что плохо — надо проанализировать текущий сайт и сходить к конкурентам. Даже сторонний пользователь как я все равно понял, где и что удобнее.
Для дизайнера важно развить эмпатию и я представлял себя на месте ученика, который хочет обучиться анимации. Для меня это не сложно — я тоже прохожу курсы по дизайну, маркетингу и могу понять, где и что меня цепляет.
После анализа каждого сайта я бережно собрал все удачные и неудачные по моему мнению решения в отдельные страницы.
Интервью с учениками и командой
Для понимания пользователей нужно с ними пообщаться. Я попросил команду предоставить мне контакты пользователей, которые готовы обсудить сайт и обучение.
Я составил список вопросов и связывался с каждым, как ему удобнее: созванивался, общался в чате, обменивался голосовыми сообщениями.
Вот такой список вопросов был для учеников
Общение с учениками
После интервью создал отдельную страницу и собрал все ответы учеников
Кроме учеников мне были интересна и команда школы. Ведь после сайта ученики оказываются в контакте с ними. Я предположил, что после попадания на курс люди могут задавать одни и те же вопросы, ответы которые они не нашли на сайте.
Ответив на них мы сможем снять нагрузку с преподавателей, а может быть и снизить количество возвратов.
Я не ошибся, я нашел эти вопросы и обязательно уделю им внимание на этапе дизайна сайта.
Ответы команды
После всех интервью важно было собрать информацию в единое пространство, откуда в дальнейших шагах исследования можно брать информацию
CJM
Чтобы понять как можно улучшить сайт, мы должны проанализировать шаги пользователя от появления идео об обучении до попадания на сайт и до конверсионного действия.
У нас получилось 6 шагов:
- Мотивация
- Поиск в интернете
- Поисковик
- Соц.сети
- Сравнение с другими школами
- Проверка школы
- Переход на сайт
- Оценка курса
- Оплата
Как это выглядит
На каждом шаге мы расписываем цель, ожидания, действия и проблемы пользователя. В самом низу написал идеи по исправлению проблем.
User Flow
Юзерфлоу позволяет нам понять путь пользователя. Я, директор или владелец могут понимать, как пользователь передвигается по сайту, что смотрит. Но пока эти данные не выписаны, они так и остаются догадками в головах людей.
Когда мы выписываем каждый шаг, тогда начинается аналитическая работа по проработке удобства каждого шага.
Сначала нужно понять цели пользователей, их может быть несколько. Первая — записаться на курс. Вторая — получить бесплатный контент.
По этим двум целям мы должны выстроить шаги и понять, как пользователь идет к этим целям. Потом мы сможем построить воронку исходя из целей пользователя и целей бизнеса.
Userflow по записи на курс
Описание пути пользователя нужно для того, чтобы понять как пользователь проходит свой путь от посещения сайта до записи на курс.
Путь был записан и систематизирован исходя из интервью с респондентами.
Это важно, потому что на каждом шаге нам нужно сделать сайт более удобным и функциональным, чтобы он помог пользователю в понимании страниц и достижения целей.
Userflow по контенту
Второй путь пользователя был составлен для блога. Нужно было разобрать каждый шаг и придумать как мы будем вести пользователю по блогу и статьям.
Анализ проблем и генерация идей
На основании интервью проанализировал все проблемы и придумал решения, которые можно отразить в структуре и дизайне.
Выводы
После всех этапов ux-исследования собрал все сведения в одном месте и написал итоговый результат исследования.
Прототип и текст
Чтобы было понимание как и где должны располагаться разные элементы сайта, нужно было создать прототип и прописать весь текст
Я разработал прототип для каждой страницы и написал текст, исходя из посылов блоков и страниц.
Дизайн
По прототипу и имеющемуся фирменному стилю был разработан дизайн 14 страниц сайта
Мобильная версия
Для каждой из страниц был разработан мобильный вид страницы
UI-кит, дополнительные элементы
Чтобы разработчикам проще было работать и время не тратилось на объяснение что и как работает, мы разработали UI-кит, в котором отображены все элементы и их поведение.
