Провела UX/UI-аудит и участвовала в редизайне сайта онлайн-школы для продолжающих обучение психологов. Вместе с командой проанализировала конкурентов, переработала структуру страницы курса и программы, подготовила вайрфреймы и дизайн ключевых блоков. Собрала UI-kit с компонентами, стилями и переменными, а решения адаптировала под разные состояния и сценарии пользователей. Итоговые решения собрали в кликабельный прототип и представили заказчику. Часть решений сейчас находится на стадии реализации.
Информация на главной странице стала более структурированной, поэтому пользователю проще ориентироваться в содержании сайта. Тарифы и программа курса стали понятнее и последовательнее, что помогает быстрее сравнить варианты и принять решение о покупке. Также переработали хэдер и футер, добавили фильтры и поиск с рекомендованными запросами, чтобы пользователю было проще находить нужную информацию.
Заказчику было важно оценить удобство действующего сайта и обновить ключевые страницы. Перед командой стояла задача выявить основные проблемы в навигации и структуре контента, предложить решения по их улучшению и обновить визуальную концепцию. При этом все изменения необходимо было выполнить в рамках существующего брендбука, сохранив визуальную консистентность сайта.
Заказчик предоставил тепловые карты сайта, которые наша команда проанализировала в рамках UX-аудита. Анализ показал, что пользователи чаще всего взаимодействуют с зоной закрытия всплывающих окон и бесплатных материалов. Это указывает на то, что такие предложения скорее воспринимаются как помеха основному сценарию, чем как полезный контент.
Понятная навигация и возможность быстро просканировать информацию помогают быстрее сориентироваться, а спокойная подача без «кричащих» формулировок поддерживает доверие к школе.
Каждый участник команды провёл анализ конкурентов, в том числе изучил их навигацию и структуру страниц. На командном созвоне сравнили результаты и увидели, что навигация на сайте заказчика менее понятная и удобная по сравнению с конкурентами. Поэтому одним из ключевых направлений редизайна стало её упрощение.
Посмотреть исследование в FigmaОсновной сценарий должен вести от выбора программы к заявке или оплате. Если пользователь не нашёл подходящий курс, важно дать возможность оставить заявку на подбор и получить помощь менеджера.
Заказчик обозначил несколько точек входа на сайт: открытые вебинары, поиск, реклама, соцсети и рекомендации. Мы предположили, что пользователи могут приходить с разной мотивацией: одни уже готовы выбрать курс, другие ориентируются на конкретного эксперта, а третьи только знакомятся с институтом через бесплатные материалы. Для каждого сценария продумали последовательность действий и отразили её в user flow.
Из-за большого объёма информации пользователю приходится тратить больше времени на поиск ключевых различий между вариантами.
При анализе конкурентов изучили, как разные школы оформляют блоки с тарифами, и собрали референсы. Сравнили структуру карточек и объём информации в них. Обратили внимание, что в более удачных решениях ключевые условия тарифа выделены и считываются быстрее, а сами карточки не перегружены текстом.
Помочь пользователю быстрее перейти от знакомства с институтом к выбору подходящей программы. При этом важно было показать, что Life Practic предлагает обучение не только практикующим психологам, но и начинающим специалистам.
Пересобрали хэдер и футер: добавили поиск в хэдер и переработали группировку разделов в футере.
Добавили раздел «Курсы для вас» с переходом к программам для начинающих и продолжающих специалистов.
Убрали всплывающие баннеры и рекламные блоки о подарках. Бесплатные материалы вынесли в отдельный раздел в хэдере.
Пользователь может искать информацию по названию курса, спикеру или популярным темам. Раздел «Курсы для вас» помогает быстрее найти программы для начинающих специалистов, а перенос бесплатных материалов освобождает первый экран от помех основному сценарию.
Упростить восприятие большого объёма информации и выстроить страницу в логике, соответствующей процессу выбора обучения.
Работу над страницей разделили между участниками команды. Я занималась разработкой вайрфреймов страницы курса. На командном ревью сравнили решения, выбрали наиболее сильные и сформировали общую структуру страницы.
Убрали дублирующие блоки, переформулировали отдельные тексты и изменили последовательность некоторых блоков. Для тарифов выделили ключевые параметры, а подробное сравнение вынесли в отдельную таблицу.
Параллельно другие участники команды проработали структуру и подачу информации на главной странице курса.
Страница последовательно отвечает на ключевые вопросы пользователя. Благодаря проработке композиции появился более чёткий визуальный ритм. Тарифы стало удобнее сравнивать: ключевая информация считывается из карточек, подробные различия доступны в таблице.
Сделать подробную программу курса удобной для изучения и сократить количество вложенного контента на странице курса.
Подробную программу оставили на отдельной странице, а переход к ней разместили в блоке «Что входит в курс».
Открытую программу предложила представить в виде карточек с поп-апом о занятии. Для закрытой программы — список модулей с раскрывающимся перечнем лекций. Также переработала блок с календарём и убрала лишние уровни вложенности.
Пользователь может быстро просмотреть расписание, выбрать интересующее мероприятие и открыть подробности без перехода через несколько уровней вложенности. Формат можно адаптировать под курсы с разным количеством и типом занятий.
Сформировать единый визуальный подход к интерфейсу и подготовить компоненты для дальнейшего развития сайта в соответствии с брендбуком компании. Готового UI-kit от заказчика не было.
В рамках работы над своими блоками страницы курса создала необходимые компоненты и их состояния, а также подобрала иконки и другие элементы интерфейса. При разработке ориентировалась на брендбук и общий визуальный подход проекта.
Несмотря на распределённую работу над отдельными блоками, интерфейс выглядит целостным и последовательным. Компоненты можно повторно использовать при дальнейшем развитии сайта, сохраняя единый визуальный подход.
В рамках проекта наша команда сформировала и проработала большое количество гипотез и решений. Если бы была возможность продолжить работу над проектом, перед внедрением части решений я бы провела качественное исследование с пользователями, чтобы проверить гипотезы и оценить потенциальную эффективность решений.
Для решений, которые уже были готовы к внедрению, следующим шагом я бы предложила провести A/B-тестирование и на основе реальных данных оценить, какие изменения действительно улучшают пользовательский опыт.
Отзыв заказчика
По итогам проекта команда Life Practic отметила мой вклад в исследование, самостоятельность и качество подготовленных макетов и прототипов.
Открыть письмо в PDF