Как мы сделали дизайн образовательной платформы для Академии ПСБ

Привет! Мы студия pinkman, создаем дизайн интерфейсов для корпораций. Сегодня расскажем про проект АНО ДПО «Академия ПСБ». Нужно было создать новый дизайн образовательной платформы, учитывая все требования к сайтам таких учреждений, и максимально упростить пользовательский путь для людей с различными возможностями и опытом работы с цифровыми продуктами.

Кейс сразу показался интересным: у нас уже был большой опыт в образовательной сфере, но эта задача отличалась от привычных. Нужно было буквально вдохнуть новую жизнь в проект, собрать воедино две отдельные платформы, Академию ПСБ и «Ясно понятно», упростить пользовательский путь и увеличить общее количество слушателей курсов.

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

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

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

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

Помимо прочего, помог выиграть этот тендер наш прошлый опыт дизайна интерфейсов образовательных продуктов. Мы работали со Средой обучения, Британской школой дизайна, Нетологией и другими.

Заказчик сразу грамотно и четко сформулировал требования, нужно было просто взять и сделать, что нужно, учитывая нашу экспертизу. На старте выделили три основные задачи:

• Улучшить пользовательский опыт;
• Создать интуитивно понятный интерфейс для нашей ЦА;
• Сформировать новый визуальный стиль.

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

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

Первый подход отвечал задачам бизнеса, но ему не хватало чего-то «вау». Во второй же итерации этого «вау» стало даже слишком много. Еще раз проговорили, что проект не про классический edutech с рекламой и воронками продаж.

Во-первых, это еще и полноценный корпоративный сайт университета. А во-вторых — дизайн должен отражать знание об аудитории и ее потребностях.

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

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

Регистрацию тоже заметно упростили, поставив себя на место пользователей. Убрали все преграды, блоки и дополнительные вопросы, сделав один простой интерфейс. Нужно просто ввести e-mail и код подтверждения, ничего лишнего для решения пользовательской задачи — начать учиться.

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

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

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

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