Привет! Меня зовут Никон.
Я продуктовый дизайнер
Я продуктовый дизайнер
Создаю data-driven продукты и визуал, который работает
Растим NPS мобильного приложения для внутреннего обучения сотрудников компании «Норникель»
Платформа: мобильное приложение (React Native)
Роль: Product Designer
Команда: продакт + разработка
Метрика фокуса: NPS (база 19; цель 30+; замер после релиза)
Роль: Product Designer
Команда: продакт + разработка
Метрика фокуса: NPS (база 19; цель 30+; замер после релиза)
Контекст
Мобильной LMS пользовались все сотрудники. Продукт работал, но в базовых сценариях не хватало ориентиров. Пользователи не видели статусы и прогресс, не понимали, где остановились, и переживали из-за тестов. Случайная ошибка могла привести к потере попытки.
Редизайн совпал с рефакторингом. Это позволило пересобрать ключевые сценарии во время обновления кода.
Каталог был единым: курсы, тесты, программы и мероприятия отображались одинаковыми карточками и фильтровались одной логикой. Поэтому изменения встраивали в существующую структуру. Правила фильтрации не меняли, карточки оставались одного размера.
Редизайн совпал с рефакторингом. Это позволило пересобрать ключевые сценарии во время обновления кода.
Каталог был единым: курсы, тесты, программы и мероприятия отображались одинаковыми карточками и фильтровались одной логикой. Поэтому изменения встраивали в существующую структуру. Правила фильтрации не меняли, карточки оставались одного размера.
Мой вклад
Я был единственным дизайнером мобильной версии. Работал с продактом и разработкой: собирал данные, формулировал гипотезы, проектировал решения и сопровождал реализацию.
Параллельно заложил основу дизайн-системы: токены (цвета, типографика, радиусы, отступы) и базовые компоненты. Это выровняло интерфейс и упростило сборку новых экранов.
Параллельно заложил основу дизайн-системы: токены (цвета, типографика, радиусы, отступы) и базовые компоненты. Это выровняло интерфейс и упростило сборку новых экранов.
Discovery
Собрал сигналы из четырёх источников и свёл их в общую картину.
UX-аудит
Я прошёл мобильную LMS целиком: вход, главную, каталог, возврат к начатому курсу и тестирование. В нескольких местах интерфейс вёл себя непоследовательно. На главной нельзя было понять, что уже начато и где остановился. В тестировании не было видно прогресса, а последствия некоторых действий были неочевидны.
Отзывы в сторах
В отзывах часто писали про стабильность, а среди UX-тем выделялось тестирование: сложная навигация, отсутствие прогресса, потеря попытки при случайном завершении.
Интервью
Сотрудники считали обучение полезным, но первый опыт часто был формальным — обязательные курсы и экзамены. Среди барьеров называли нехватку времени и неудобный формат. В такой ситуации интерфейс не должен добавлять неопределённость.
Фидбек продакта
Продакт подтвердил, что приоритет — улучшить базовый опыт без добавления новых функций. Речь шла не о геймификации или расширении возможностей, а о том, чтобы сделать текущие процессы понятнее
Анализ конкурентов
Я посмотрел, как устроены похожие продукты: iSpring Learn, Duolingo, Coursera и Яндекс.Практикум. В них прогресс всегда отображается явно, действия внутри тестов понятны, а завершение защищено от случайных нажатий. Обучение ощущается как последовательный процесс, а не набор экранов.
UX-аудит
Я прошёл мобильную LMS целиком: вход, главную, каталог, возврат к начатому курсу и тестирование. В нескольких местах интерфейс вёл себя непоследовательно. На главной нельзя было понять, что уже начато и где остановился. В тестировании не было видно прогресса, а последствия некоторых действий были неочевидны.
Отзывы в сторах
В отзывах часто писали про стабильность, а среди UX-тем выделялось тестирование: сложная навигация, отсутствие прогресса, потеря попытки при случайном завершении.
Интервью
Сотрудники считали обучение полезным, но первый опыт часто был формальным — обязательные курсы и экзамены. Среди барьеров называли нехватку времени и неудобный формат. В такой ситуации интерфейс не должен добавлять неопределённость.
Фидбек продакта
Продакт подтвердил, что приоритет — улучшить базовый опыт без добавления новых функций. Речь шла не о геймификации или расширении возможностей, а о том, чтобы сделать текущие процессы понятнее
Анализ конкурентов
Я посмотрел, как устроены похожие продукты: iSpring Learn, Duolingo, Coursera и Яндекс.Практикум. В них прогресс всегда отображается явно, действия внутри тестов понятны, а завершение защищено от случайных нажатий. Обучение ощущается как последовательный процесс, а не набор экранов.
Фокус
Во всех источниках повторялась одна тема: пользователю не хватает ориентиров и уверенности в действиях. Поэтому я сфокусировался на двух сценариях:
- вернуться к начатому и продолжить с места остановки
- пройти тест с понятным прогрессом и без случайных потерь
Проблема
В этих сценариях пользователю не хватало статуса, прогресса и понимания последствий действий. Из-за этого люди чаще сомневались, перепроверяли себя и меньше доверяли интерфейсу. NPS на старте был 19. Повторный замер запланирован после релиза.
Вернуться к обучению
На первом экране не было статуса и точки продолжения. Вместо полезной информации показывали крупные баннеры. В личный кабинет можно было попасть только через бургер-меню. Аватар не работал как быстрый вход.
Пройти тест
На старте было неясно, можно ли продолжить попытку или нужно начинать заново, и что считается основным действием. Во время прохождения не показывался прогресс, поэтому было сложно понять, сколько осталось. На экране вопроса кнопка «Завершить тест» стояла рядом с подтверждением ответа. Риск миссклика был высоким. Завершение было без подтверждения и могло привести к потере попытки. Если попытки заканчивались, пересдать тест без обращения к руководителю или в поддержку было нельзя.
Вернуться к обучению
На первом экране не было статуса и точки продолжения. Вместо полезной информации показывали крупные баннеры. В личный кабинет можно было попасть только через бургер-меню. Аватар не работал как быстрый вход.
Пройти тест
На старте было неясно, можно ли продолжить попытку или нужно начинать заново, и что считается основным действием. Во время прохождения не показывался прогресс, поэтому было сложно понять, сколько осталось. На экране вопроса кнопка «Завершить тест» стояла рядом с подтверждением ответа. Риск миссклика был высоким. Завершение было без подтверждения и могло привести к потере попытки. Если попытки заканчивались, пересдать тест без обращения к руководителю или в поддержку было нельзя.
Гипотезы и отбор
Гипотезы появлялись по ходу исследования. Дальше мы с продактом отобрали то, что чаще повторялось в данных, влияло на базовый сценарий обучения и укладывалось в рамки текущего релиза. В приоритете были изменения, которые не требуют разработки нового функционала и крупных переработок логики.
В работу вошли гипотезы про прозрачность и предсказуемость:
Гипотезы, которые требовали нового функционала или более широких изменений (поиск, поддержка, работа с контентом), зафиксировали в бэклог. К ним планируем вернуться в следующих итерациях.
В работу вошли гипотезы про прозрачность и предсказуемость:
- сделать статусы и прогресс видимыми на первом экране и в тесте;
- показать, где пользователь остановился, и дать быстрый переход к продолжению;
- сделать старт теста однозначным: понятный статус и следующий шаг;
- защитить завершение от случайных действий;
- упростить навигацию в тестировании.
Гипотезы, которые требовали нового функционала или более широких изменений (поиск, поддержка, работа с контентом), зафиксировали в бэклог. К ним планируем вернуться в следующих итерациях.
Решения
Вернуться к обучению
Я перестроил первый экран так, чтобы он сразу отвечал на два вопроса: где я остановился и что делать дальше. Добавил точку продолжения и статусы. Баннеры убрал из первого экрана и перевёл в сторисы. Аватар сделал кликабельным, вход в личный кабинет стал привычным и быстрым.
Для прогресса на главной сравнили два варианта: шкалу с процентами и мини-карточки курсов. В итоге оставили мини-карточки. Они лучше показывали место остановки и сразу давали переход к продолжению обучения.
Я перестроил первый экран так, чтобы он сразу отвечал на два вопроса: где я остановился и что делать дальше. Добавил точку продолжения и статусы. Баннеры убрал из первого экрана и перевёл в сторисы. Аватар сделал кликабельным, вход в личный кабинет стал привычным и быстрым.
Для прогресса на главной сравнили два варианта: шкалу с процентами и мини-карточки курсов. В итоге оставили мини-карточки. Они лучше показывали место остановки и сразу давали переход к продолжению обучения.
Пройти тест
В тесте я сфокусировался на понятном сценарии: статус попытки, прогресс по вопросам и предсказуемые действия. Сделал старт более однозначным, добавил прогресс во время прохождения и упростил навигацию.
Отдельно убрал риск миссклика. В старой версии «Завершить тест» стояло рядом с подтверждением ответа. В новом дизайне возможность завершить попытку в процессе сохранили, но действие убрали из зоны ответа и перенесли в содержание теста. Перед завершением добавили подтверждение, чтобы случайный тап не приводил к потере попытки.
В тесте я сфокусировался на понятном сценарии: статус попытки, прогресс по вопросам и предсказуемые действия. Сделал старт более однозначным, добавил прогресс во время прохождения и упростил навигацию.
Отдельно убрал риск миссклика. В старой версии «Завершить тест» стояло рядом с подтверждением ответа. В новом дизайне возможность завершить попытку в процессе сохранили, но действие убрали из зоны ответа и перенесли в содержание теста. Перед завершением добавили подтверждение, чтобы случайный тап не приводил к потере попытки.
Результат и дальнейшие шаги
После проверки пользователи быстрее находили точку продолжения, корректно считывали прогресс и увереннее проходили тесты. В ключевых сценариях стало меньше сомнений и уточняющих вопросов.
После релиза планируем измерять эффект на двух уровнях.
На уровне продукта — NPS (текущая база — 19, цель — 30+, замер после релиза). На уровне сценариев добавим метрику SEQ: вопрос «Насколько легко было выполнить задачу?» по шкале от 1 до 7 и поле для комментария.
За время проекта редизайн затронул и другие части приложения, но в кейсе я показываю два сценария, которые сильнее всего влияли на восприятие обучения.
После релиза планируем измерять эффект на двух уровнях.
На уровне продукта — NPS (текущая база — 19, цель — 30+, замер после релиза). На уровне сценариев добавим метрику SEQ: вопрос «Насколько легко было выполнить задачу?» по шкале от 1 до 7 и поле для комментария.
За время проекта редизайн затронул и другие части приложения, но в кейсе я показываю два сценария, которые сильнее всего влияли на восприятие обучения.
Итог
В редизайне мы убрали неопределённость в обучении: сделали прогресс видимым, следующий шаг — понятным, а критичные действия в тестировании — предсказуемыми. Проверка прототипов показала, что пользователи увереннее проходят сценарии и реже путаются в статусах.
Следующий шаг после релиза — замер NPS через in-app опрос и сбор обратной связи по тем же сценариям.
Следующий шаг после релиза — замер NPS через in-app опрос и сбор обратной связи по тем же сценариям.
