Привет!

Я Екатерина Батина

Продуктовый дизайнер с 3+ годами опыта. Проектирую B2C/B2E продукты и B2B/B2G-системы. Работаю от задачи до передачи в разработку.

Мои проекты

Цифровой марафон: интерфейсы на компьютере, планшете и телефоне
Загрузка изображения…

Цифровой марафон

Можно посмотреть

Редизайн лендинга платформы конкурса, личного кабинета и тестирования

2026

  • UX/UI
  • Research
  • A/B-тесты
  • Адаптивы
Контекст

«Цифровой марафон» — всероссийский конкурс по цифровым навыкам от Сбера, «Школы 21» и Нетологии. Участники выбирают один из трёх уровней, проходят бесплатные курсы, онлайн-тестирование и проектный этап, лучшие выходят в очный финал. Платформа состоит из лендинга с регистрацией, личного кабинета участника и модуля тестирования.

Срок
10 месяцев (2025–2026)
Результаты кратко

Конверсия из визита в регистрацию выросла с 10% до 20%.

Доля участников, проходящих этапы марафона до конца, выросла в 3 раза.

Моя роль

Продуктовый дизайнер, провела редизайн в соответствии с новой дизайн-системой Сбера.

  • UX/UI
  • Research
  • A/B-тесты
  • Адаптивы
Платформы
  • Desktop
  • Tablet
  • Mobile

Задача

Перевести платформу на новую дизайн-систему Сбера и сделать регистрацию главным сценарием сайта: перестроить лендинг, изменить личный кабинет и ввести асинхронное тестирование. Регистрация открыта ограниченное время, поэтому каждый процент конверсии напрямую влияет на число участников марафона.

Шаг 1. Анализ

Перед проектированием разобрала воронку старого сайта: из визита в регистрацию доходили 10% посетителей, основная потеря была на лендинге, до кнопки регистрации доходила лишь часть посетителей. Это определило приоритет: сначала лендинг и flow регистрации, потом кабинет.

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

  • Перегруженная главная. Лендинг был построен как страница о конкурсе, а не как путь к регистрации: описания этапов, призов и партнёров конкурировали друг с другом за внимание.
  • Незаметная кнопка регистрации. Главное действие терялось среди контента, участнику приходилось искать, где зарегистрироваться.
  • Разнобой в типографике. Лендинг, кабинет и тестирование выглядели как три разных продукта, стиль не соответствовал новой дизайн-системе Сбера и снижал доверие к платформе.

Шаг 2. Проектирование

Для каждого сценария сформулировала гипотезу и перевела её в макеты. Ниже — что хотела изменить в поведении участников и какие решения для этого спроектировала.

Гипотеза 01

Сделать регистрацию заметнее

Если показать кнопку регистрации на первом экране и оставить её доступной при прокрутке, больше посетителей перейдут к регистрации.

Решение. Вынесла кнопку на первый экран и закрепила её при прокрутке. Сократила описания уровней, этапов и призов: теперь они помогают выбрать категорию участия и решить, стоит ли регистрироваться.

До/после — лендинг
До/после — лендинг

Гипотеза 02

Показать прогресс и следующий шаг

Если участник видит свой прогресс и понимает, что делать дальше, ему проще пройти марафон до конца.

Решение. Объединила этапы в трек со сроками, статусами и ближайшим действием. Рядом вывела набранные баллы и место в рейтинге. В окне этапа показала, за какие задания начисляются баллы, а в профиле разделила поля на смысловые блоки.

До/после — этапы
До/после — этапы. Добавила Stories с партнёрами и обновила оформление этапов в соответствии с лендингом и новой дизайн-системой Сбера. Экран стал визуально привлекательнее и согласованнее с остальной платформой.
До/после — этапы: модальное окно
До/после — этапы: модальное окно. Обновила визуализацию баллов и их начисления, используя знакомые элементы системы. Повторное использование компонентов сделало информацию нагляднее, а интерфейс — последовательнее.
До/после — профиль
До/после — профиль. Переработала форму профиля: сгруппировала поля по смысловым блокам и улучшила считываемость информации.

Гипотеза 03

Дать повод вернуться в кабинет

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

Решение. Добавила партнёрские Stories в раздел «Этапы»: участник открывает карточку, выполняет задание и получает баллы. Для мобильной версии отдельно проработала сценарии «Виртуальный мир» и «Самокат».

Stories партнёров
Stories партнёров

Гипотеза 04

Помочь участнику закончить тест

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

Решение. Спроектировала асинхронное тестирование: участник сам выбирает время в пределах этапа. На экране оставила один вопрос, прогресс и таймер; ответы сохраняются по ходу теста.

Прохождение тестирования
Прохождение тестирования

Единый интерфейс на трёх устройствах

Собрала лендинг, кабинет и тестирование на едином UI-kit Сбера. Для телефона проработала регистрацию и тестирование как сценарии для одной руки. Макеты для компьютера, планшета и телефона согласовала с бренд-командой.

Адаптивные версии лендинга
Адаптивные версии лендинга

Шаг 3. Исследования

Методы
Анализ воронки и пользовательских сценариев, коридорное тестирование, A/B-тесты.
Выборка
Для A/B-тестов — посетители сайта во время регистрационной кампании. Старая и новая версии показывались в равных долях — 50/50.

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

Результат

Провела редизайн платформы всероссийского конкурса в новой дизайн-системе Сбера: лендинг, личный кабинет с треком этапов, статистикой и Stories партнёров, асинхронное тестирование и адаптивы для трёх типов устройств на едином UI-kit.

  • Конверсия из визита в регистрацию выросла с 10% до 20%: исправленный flow и лендинг, построенный вокруг регистрации, удвоили число участников с того же трафика.
  • Доля участников, проходящих этапы марафона до конца, выросла в 3 раза: трек этапов, статистика с баллами и местом в категории и Stories партнёров дали причину возвращаться в кабинет.
  • Макеты приняты бренд-командой Сбера без правок, запуск состоялся в срок к старту марафона.

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

ReflecTime: дашборд статистики, профиль и оценка встречи
Загрузка изображения…

ReflecTime

Можно посмотреть

Планировщик задач в календаре для профилактики выгорания

2025

  • UX/UI
  • Дашборд
  • Интеграция с Я.Календарь
  • Плагин
  • Research
Контекст

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

Срок
6 месяцев
Моя роль

Спроектировала весь интерфейс продукта. Работала с фронтенд- и бэкенд-разработчиками и менеджером проекта.

  • UX/UI
  • Research
  • Плагин
Результат
ReflecTime вышел в продакшен. Команда стартапа ищет инвестора.

Задача

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

Шаг 1. Роли и сценарии

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

Роли и задачи пользователей ReflecTime
Роли и задачи пользователей ReflecTime
Структура приложения и функциональные блоки
Структура приложения и функциональные блоки
Путь пользователя от входа до оценки события
Путь пользователя от входа до оценки события

Шаг 2. Оценка встречи в календаре

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

Вход в ReflecTime через Яндекс ID
Вход в ReflecTime через Яндекс ID
Плагин после входа показывает встречи без оценки
Плагин после входа показывает встречи без оценки
Первый шаг опроса после встречи
Первый шаг опроса после встречи
Оценка сохранена. Можно перейти к следующей встрече
Оценка сохранена. Можно перейти к следующей встрече
Напоминание в календаре после оценки одной встречи
Напоминание в календаре после оценки одной встречи
Уведомление после оценки событий
Уведомление после оценки событий

От отдельной встречи к общей картине

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

События календаря и их оценки
События календаря и их оценки
Прогноз для предстоящей встречи в календаре
Прогноз для предстоящей встречи в календаре
Статистика по событиям за выбранный период
Статистика по событиям за выбранный период

Профиль сотрудника

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

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

Профиль ReflecTime: коллеги с самыми частыми встречами, одно оценённое событие из 30 и персональные данные
Профиль сотрудника в ReflecTime

Работа со структурой команды

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

Структура организации — участники
Структура организации — участники
Структура организации — подразделения
Структура организации — подразделения
Конструктор графа социальных связей
Конструктор графа социальных связей
Граф связей в полноэкранном режиме
Граф связей в полноэкранном режиме

Шаг 3. Проверка гипотез

Дизайн-решения формулировали как гипотезы и проверяли их на юзабилити-тестах.

Результат

За шесть месяцев я спроектировала путь сотрудника от встречи в календаре до просмотра статистики и рабочее пространство администратора. Команда выпустила ReflecTime в продакшен.

Таск-трекер HSE App X: список задач, расписание, создание задания и уведомления в мобильном приложении
Загрузка изображения…

Таск-трекер HSE App X

Можно посмотреть

Планировщик учебных задач и дедлайнов в приложении студента ВШЭ

2024

  • учебный
  • UX/UI
  • iOS
  • Research
  • Прототип
  • Дизайн-система
Контекст

HSE App X — мобильное приложение студента Высшей школы экономики. В нём есть расписание занятий и раздел «Дедлайны», где можно добавить напоминание о дедлайне в формате to-do листа и привязать его к предмету. «Таск-трекер» — новый раздел, который должен стать развитием «Дедлайнов» и собрать в одном месте информацию по каждому предмету, текущие задания и сроки.

Период
2024
Моя роль
UX/UI-дизайнер, дипломный проект Яндекс Практикума
Направления
  • учебный
  • UX/UI
  • iOS
  • Research
  • Прототип
  • Дизайн-система
Платформа
Мобильное приложение iOS
Цифры проекта
36 экранов · 25 компонентов · 1 месяц · 62+ часа

Задача

На основе раздела «Дедлайны» и приложения в целом спроектировать новый раздел «Таск-трекер»: собрать в нём всю информацию по предметам, текущим заданиям и дедлайнам и встроить его в существующее приложение HSE App X. Раздел должен быть собран на дизайн-системе ВШЭ, чтобы его можно было отдать в разработку без кастомных элементов.

О проекте HSE App X
О проекте HSE App X
Этапы работы
Этапы работы

Проблематика

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

Основными проблемами текущего сценария были:

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

Основные пользователи — студенты, которые хотят видеть, какие задания даны по предмету, не пропускать дедлайны и планировать своё время. Вторая аудитория — преподаватели: им проще загружать задания и проверять их со смартфона в дороге.

Целевая аудитория и её задачи
Целевая аудитория и её задачи
AS IS: создание и завершение дедлайна в старой версии HSE App X
AS IS: раздел «Дедлайны»

Гипотезы и решения

Из интервью: пользователям нужно быстро вносить новые задачи, потому что делать это приходится, когда времени мало. Поэтому создание задачи вынесла в модальное окно с минимальным набором полей: предмет, описание, файлы, срок, напоминание. Кнопка добавления активна на каждом экране раздела.

Создание задачи, календарь и уведомления
Создание задачи, календарь и уведомления

Из интервью: без уведомлений о дедлайнах есть риск пересдачи, а это дополнительные затраты времени. Напоминание о дедлайне настраивается прямо при создании задачи. Отдельный экран уведомлений собирает напоминания, изменения статусов и приглашения в общие задачи, чтобы они не терялись среди пушей.

Управление задачами и экран уведомлений
Управление задачами и экран уведомлений

Для проблемы поиска сделала поиск сразу по нескольким предметам: выбранные предметы отображаются тегами и снимаются в одно касание. В списке у каждой задачи видны приоритет, срок и предмет, а сами задачи разделены на «Входящие», «Мои задачи» и «Завершённые».

Список задач и поиск по предметам
Список задач и поиск по предметам

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

Из Job Stories: студенту нужны чёткие критерии оценки и возможность отчитаться о работе. Карточка задания состоит из двух частей: краткое содержание и вводные от преподавателя и заметки, которые студент ведёт во время работы. Работа отправляется из карточки: после отправки статус меняется на «На рассмотрении», в списке появляется отправленная ссылка. Если ссылка оказалась неверной, можно отправить другой файл.

Просмотр и отправка домашнего задания
Просмотр и отправка домашнего задания

Из анализа конкурентов: главная причина отказа от трекеров — перегруженный функционал. Поэтому в раздел вошли только функции из Job Stories, а всё остальное осознанно не добавляла.

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

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

Интервью и инсайты
Интервью и инсайты

Краткие результаты интервью:

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

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

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

На основе интервью и анализа сформулировала 5 Job Stories, например: «Учусь в университете, я хочу видеть все свои задания в одном месте, чтобы оценить нагрузку и спланировать время». По ним собрала User Flow и вайрфреймы, вайрфреймы протестировала до отрисовки макетов.

Job Stories
Job Stories
User Flow
User Flow

После сборки макетов провела модерируемое тестирование кликабельного прототипа с 5 студентами по четырём сценариям. Все четыре пройдены:

  • Расписание. Пользователь видит, выполнено ли задание к ближайшей лекции, что нужно сделать к следующим, понимает статус, оценку и дедлайн.
  • Главная. Пользователь находит календарь, удаляет и заполняет задачу, фильтрует список, смотрит историю уведомлений. Понимает логику разделения на «Входящие» и «Выполненные».
  • Создание задачи. Пользователь понимает, как посмотреть задачу во входящих, что будет, если добавить её к себе, и как вернуть обратно. Создаёт задачу самостоятельно.
  • Выполнение задачи. Пользователь находит критерии оценки и вводные, завершает задачу и отправляет работу на проверку.

По итогам теста доработала два места. В календаре участники раскрывали каждый день, чтобы понять, есть ли там что-то срочное, поэтому вынесла цвет приоритета на сами даты: загрузка недели видна без нажатий. В сценарии отправки работы участники не понимали, что делать, если прикрепили не ту ссылку, поэтому добавила возможность отправить другой файл, пока задание в статусе «На рассмотрении».

Тестирование пользовательских сценариев
Тестирование пользовательских сценариев

Дизайн-система

Раздел собран на Design System HSE: типографика HSE Sans, кнопки во всех состояниях, сегментированный контрол, таб-бар. Недостающие компоненты спроектировала в логике системы: календарь в свёрнутом и развёрнутом виде, выпадающий список, карточку задачи со статусами. Всего в UI-кит вошло 25 компонентов.

Типографика и состояния кнопок
Типографика и состояния кнопок
UI-kit: табы, навигация, календарь и напоминания
UI-kit: табы, навигация, календарь и напоминания
Конкурс Минэкономразвития РФ: форма подачи заявки
Загрузка изображения…

Конкурс Минэкономразвития РФ

Пока оформляю

Перепроектирование подачи заявок и экспертной оценки

2025

  • UX/UI
  • Подача заявок
  • Web
  • Research
Страница курса с Екатериной Батиной в разделе преподавателей
Загрузка изображения…

Курс «Веб-дизайн для детей» от компании «Ростелеком»

Можно посмотреть

Разработала модуль «Основы UX-дизайна» для подростков 12–16 лет.

  • Онлайн-курс
  • Запись курса
  • Онлайн-продукт
О курсе

Курс знакомит подростков 12–16 лет с веб-дизайном. Ученики осваивают Figma, создают макеты и интерактивные прототипы. Чтобы понять, для кого они проектируют сайт, разбирают задачи аудитории и пользовательские сценарии.

Моя роль
Разработала самый сложный модуль курса — «Основы UX-дизайна».
Карточка Екатерины Батиной на сайте Лицея
Екатерина Батина в разделе преподавателей курса

Модуль «Основы UX-дизайна»

Начинаем с понятного вопроса: как узнать, удобно ли человеку пользоваться сайтом? На этом примере разбираем, что такое UX-дизайн и юзабилити. Затем переходим к исследованиям и анализу целевой аудитории.

Учимся составлять карту пользовательского пути (CJM) и описывать шаги внутри конкретного сценария (User Flow). Разбираем UX-паттерны и то, как знакомые элементы интерфейса помогают человеку понять, что делать дальше.

Слайд урока с заголовком «Пользовательские сценарии, User Story»
Кадр из урока «Пользовательские сценарии, User Story»

Итоговая работа

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

Security Tech: сканирование документов и интерфейсы системы безопасности КПП
Загрузка изображения…

Security Tech

NDA

Система безопасности КПП (под NDA)

2024–2026

  • UX/UI
  • B2B/B2G
  • 5 типов устройств
  • Web&app
  • Прототип
  • Research

Обсудим
работу вместе?

Котёнок с подписью Katerina