Связаться со мной
Вы можете связаться со мной любым способом ниже
Вы можете связаться со мной любым способом ниже
Редизайн Ed-tech приложения
Провела UX-аудит приложения и редизайн текущей версии в экспресс режиме.
Key poins
Обзор проекта
ilmi — это образовательное приложение, предлагающее пользователям более 300 курсов для профессионального и личностного роста. Этот проект представляет собой полный редизайн приложения, которое столкнулось с критической бизнес-проблемой: катастрофически низкой конверсией в продажи из-за серьёзных UX-проблем.
Редизайн привёл к созданию интуитивно понятной и визуально целостной системы, которая устранила ключевые барьеры на пути пользователя к покупке и заложила прочную основу для дальнейшего развития продукта через новую дизайн-систему.
Аудитория
1000+
активных пользователей
Время на редизайн
36 часа
срок, затраченный на работу
Моя роль
«Антикризисный» дизайнер: от исправления ошибок к построению системы
В этом проекте я была единственным дизайнером, что означало полную ответственность за результат. Я присоединилась к команде, чтобы исправить ошибки предыдущего дизайна и заложить основу для масштабируемого продукта в очень сжатые сроки — до 40 часов.
В этом проекте я сделала следующее:
- Полный редизайн приложения: создание всех макетов с нуля на основе результатов UX-аудита.
- Разработка дизайн-системы: спроектировала и построила новую дизайн-систему (за исключением исходной цветовой палитры), чтобы обеспечить консистентность и ускорить дальнейшую разработку.
- Работа с разработкой: не ограничилась передачей макетов в разработку — внедрила процесс дизайн-ревью, готовила списки правок для разработчиков и контролировала качество реализации интерфейса.
Этапы работы
- Аудитория
Определение аудитории
2. Путь пользователя
Анализ пути пользователя
3. Ключевые цели
Определение целей, которые должен достичь пользователь
4. Редизайн
Сбор дизайн-макетов в Figma
5. Дизайн-система
Финальный сбор дизайн-системы на основе компонентов
Проблема
При аудитории в несколько тысяч пользователей приложение приносило всего несколько продаж в неделю. Стало понятно, что проблема в самом продукте, а не в маркетинге.
Мой первичный UX-аудит показал, что предыдущая версия приложения не просто выглядела устаревшей — она активно мешала пользователям совершить покупку. Приложение не справлялось со своей главной функцией — продавать курсы. Моя задача заключалась не в том, чтобы «обновить визуал», а в том, чтобы переосмыслить пользовательский опыт и устранить барьеры.
Цели редизайна
Визуал приложения
Сделать приложение визуально привлекательным для пользователя, сохранив фирменный стиль и снизив визуальный шум.
User experience (UX)
Улучшить опыт взаимодействия, сделав приложение интуитивно понятным, единообразным и консистентным. Сократить путь пользователя к цели.
Конверсия и лояльность
Повысить лояльность пользователей за‑счёт дружелюбного и отзывчивого интерфейса. Сократить путь до цели для пользователей.
Аудитория
The key target audience is a user who is striving for self-development but is limited in time and may not have extensive experience with educational platforms.
Главная
- Галерея с баннерами — рассказываем о преимуществах, показываем акции и спец. предложения.
- Меню навигации в нижней части экрана — популярные разделы для перемещения, добавлена корзина.
- Первый экран — рассказываем о приложении через баннер, показываем ключевые категории через блок «Направления» и показываем популярные курсы.
- В верхней части экрана оставляем менее значимые разделы для премещения — уведомления.
- Переход в профиль через верхнюю часть экрана и через меню в нижней части экрана — уменьшаем вероятность недопониманий, так как часть пользователь привыкла перемещаться в профиль по клику на аватар, а другая часть — по клику через нижнее меню.
Страница Направления
- Строка поиска — уменьшаем путь пользователя при поиске курса
- Сортировка — есть возможность сортировки по цене, рейтингу и популярности
- Карточки курсов — возможность добавления в избранное, чтоб позже детально можно было ознакомится.
- Структура в виде плитки — повторяется на разных страницах за счёт чего карточки курсов имеют одинаковый вид. Пользователь привыкает к такому виду и легко распознаёт карточки.
Страница курса, первый экран
- Социальное доказательство — блок с количеством студентов на курсе является триггером для пользователей, что кто-то уже учится на данном курсе. Зелёный цвет усиливает действие положительного эффекта и одобрения.
- Кнопка добавления в избранное — всегда доступна.
- Кнопка «Начать обучение» вместо «Купить» подталкивает к тому, что пользователь может начать обучение и чуть меньше психологически давит на то, что нужно купить. По клику переход на страницу выбора способа оплаты.
- Процент скидки — доказательство выгоды.
- Кнопки покупки зафиксированы в нижней части экрана на протяжении всего пролистывания страницы.
Корзина
- Меню навигации — сохраняется, для удобного перемещения по приложению.
- Очистка корзины — менее заметная, чтобы пользователю не акцентировать на этом внимание.
- Удаление курса из корзины через три точки в правой части карточки курса или по свайпу слево.
- Отображение доступа к курсу с подписью — чтобы пользователям было очевидно, что такое 1 месяц.
- Цена в карточке курса — акцентным цветом, для того чтобы было заметно.
Страница оплаты
- Баланс ilmi — преимущественный способ оплаты. Отображение кэшбека показывает выгоду данного способа оплаты.
- В случае если у пользователя недостаточно средств на балансе, ему будет отображаться кнопка «Пополнить», которая сразу направит на страницу пополнения баланса.
- Возможность списания кэшбека через переключатель. Также отображаем сумму, которая будет списана из кэшбека.
UI-kit
Одной из главных проблем старого дизайна был хаос в стилях и компонентах. Чтобы решить эту проблему в корне и упростить жизнь разработчикам в будущем, я создала и задокументировала новую дизайн-систему с нуля.
В неё вошли все основные компоненты, состояния, текстовые стили и отступы. Это не только обеспечило визуальную консистентность нового дизайна, но и стало ценным активом для компании.
Результаты
- Создана масштабируемая дизайн-система: главный результат проекта — не просто набор макетов, а готовая к использованию система компонентов. Она значительно упрощает и ускоряет разработку новых экранов, экономя ресурсы компании в долгосрочной перспективе.
- Устранены критические UX-ошибки: новый дизайн решил очевидные проблемы, которые напрямую влияли на катастрофически низкую конверсию, и выстроил понятный и логичный путь пользователя от первого знакомства с приложением до покупки.
- Сформирован план развития (MVP2): в процессе приоритизации был составлен чёткий бэклог для следующей версии продукта (редизайн профиля, прогресс-бары на карточках, расширение платёжной функциональности), что демонстрирует моё продуктовое мышление.
