Категория: UI

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

Мы долго обсуждали задачу и пришли к нескольким этапам работы:

1. Исследование, чтобы понимать, что нужно менять и как улучшить пользовательский опыт
2. Дизайн сайта
3. Верстка сайта
4. Программирование сайта в CMS

Текущий сайт у клиента на Wordpress. Мы планировали делать редизайн сайта на Тильду, потому что это дешевле, быстрее и проще в работе. Но у клиента сильная привязка к SEO, а переезд на другую платформу требовал привелечения сторонних специалистов и примерно 100 тысяч бюджета на перенос seo и докупку ссылок для поднятия в выдаче. Поэтому решили остаться пока на Wordpress.

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

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

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

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

Анализ конкурентов

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

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

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

Интервью с учениками и командой

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

Я составил список вопросов и связывался с каждым, как ему удобнее: созванивался, общался в чате, обменивался голосовыми сообщениями.

Вот такой список вопросов был для учеников

Общение с учениками

После интервью создал отдельную страницу и собрал все ответы учеников

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

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

Я не ошибся, я нашел эти вопросы и обязательно уделю им внимание на этапе дизайна сайта.

Ответы команды

После всех интервью важно было собрать информацию в единое пространство, откуда в дальнейших шагах исследования можно брать информацию

CJM

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

У нас получилось 6 шагов:

1. Мотивация
2. Поиск в интернете
   • Поисковик
   • Соц.сети
   • Сравнение с другими школами
3. Проверка школы
4. Переход на сайт
5. Оценка курса
6. Оплата

Как это выглядит

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

User Flow

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

Когда мы выписываем каждый шаг, тогда начинается аналитическая работа по проработке удобства каждого шага.

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

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

Userflow по записи на курс

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

Путь был записан и систематизирован исходя из интервью с респондентами.

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

Userflow по контенту

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

Анализ проблем и генерация идей

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

Выводы

После всех этапов ux-исследования собрал все сведения в одном месте и написал итоговый результат исследования.

Прототип и текст

Чтобы было понимание как и где должны располагаться разные элементы сайта, нужно было создать прототип и прописать весь текст

Я разработал прототип для каждой страницы и написал текст, исходя из посылов блоков и страниц.

Дизайн

По прототипу и имеющемуся фирменному стилю был разработан дизайн 14 страниц сайта

Мобильная версия

Для каждой из страниц был разработан мобильный вид страницы

UI-кит, дополнительные элементы

Чтобы разработчикам проще было работать и время не тратилось на объяснение что и как работает, мы разработали UI-кит, в котором отображены все элементы и их поведение.

Задача

Разработать сайт-блог из 3 страниц: главная, категория, страница статьи. Петр будет собирать авторов, а они будут писать статьи на тему Геткурса.

Сайт должен разделяться на статьи для предпринимателей и технических специалистов.

Стиль должен быть нейтральный, светлый, с небольшими акцентными цветами из логотипа.

Прототип

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

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

Дизайн

Разработали дизайн исходя из пожеланий клиента, с цветами из логотипа.

Баннеры

Разработал два вида баннеров.

Одна группа баннеров для рекламы услуг, сервисов от компании GetTech.

Другая группа баннеров для рекламы продуктов от авторов статей. Когда авторы будут приглашать на свой курс или вебинар.

Различие было создано, чтобы пользователи могли отличить предложения от GetTech и от авторов статьи.

Мобильная версия

UI-кит

Разработал UI-кит для дизайнеров и верстальщиков. Чтобы дизайнеры и верстальщики имели все состояния элементов и согласовывали внешний вид элементов.

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

Поведение

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

Для типографики расписал размер шрифта, межстрочные интервалы, вид подписей и списков.

О проекте

Студия Солнышко123 упаковывала эксперта. Для курса им нужно было создать админ-панель, в которой можно было бы:

• видеть базу клиентов,
• создавать кнопки для чат-бота
• создавать чаты в телеграме

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

Задача

Разработать дизайн админ-панели.

Результат

Дизайн

UI-кит

Разработал для верстальщика UI-кит, где лежат все состояния компонентов. Так верстальщик будет знать, какие состояния прописать в коде.

ТЗ для верстальщика

Кроме UI-кита написал ТЗ для верстальщика, где описал подход к верстк, стэк технологий и поведение элементов.