ААнна Шильгаас Написать ↗
Мобильные интерфейсы, дашборды, web и упаковка
Архив проектов · 7

Кейсы

Каждая папка раскрывается в подробный разбор: контекст, исследование, решения и итоговые экраны.

Главное
Ещё проекты
← Все кейсы
Мобильное приложение · Исследование · Дизайн · Тесты

AI English с Алисой

Мобильное приложение для изучения английского с ИИ-помощником в экосистеме Яндекс Алисы.

РольПродуктовый дизайнер
ФорматМикро-уроки 5–15 минут: текст или голос
ЗапускMLP (Minimum Lovable Product)
Исследование8 интервью, опрос (22 ответа), ~12 конкурентов
Обложка кейса AI English с Алисой
01 · Продукт

Мобильный ИИ-репетитор английского внутри экосистемы Алисы. Микро-уроки на 5–15 минут текстом на телефоне.

Учись без стресса

Метро, очередь, кофе: попроси Алису сгенерировать урок.

Спрашивай что угодно

Урок можно пересматривать, а ассистент доступен 24/7.

Реальная практика

Разговор, аудирование и слова с SmartFeedback.

Тип запуска — MLP. Приложений для языков много, поэтому продукт должен удивлять с первого касания: «Вау, это потрясающе!»
02 · Функциональное ядро

Четыре опоры: микрообучение, ИИ-ассистент, практика и любой формат.

Микрообучение

  • Уроки на 10–15 минут по запросу
  • Настройка языка интерфейса и курса

ИИ-ассистент

  • «Алиса, объясни» на каждом экране
  • Подача под уровень языка

Практика

  • Упражнения с настройкой сложности
  • Персональный словарь

Мультиформат

  • Голос с переключением на колонку
  • Текст и синхронизация устройств
03 · Исследование

8 интервью в две волны, опрос и разговор с методистом: что мешает учиться регулярно.

8интервью в две волны
22ответа в опросе (из 30 на скрининге)
1интервью с методистом курсов

Что мы услышали: учатся урывками, уходят за ответами и быстро забывают.

Телефон — для лёгкого

Сложное оставляют ноутбуку. Мобильный формат должен быть коротким.

Уход за ответом

Непонятно — идут в поиск. Помощник нужен внутри урока, с контекстом.

Формат по ситуации

В людном месте нужен звук с текстом, дома удобнее читать.

ИИ — с оговорками

Нужен фактчекинг, а объяснение и практика важнее готового ответа.

Мотивация

Держат серия, шкала прогресса и короткие занятия.

Уровень и интересы

Стартовый тест занижает уровень. Хочется выбирать темы.

Знакомьтесь, Ann: всё время в движении и хочет, чтобы английский успевал за ней.

Ann · активная горожанка

25 лет · Москва · SMM в fashion-бренде

«Я всегда в движении — и хочу, чтобы мой английский соответствовал моему образу жизни!»

Цели

  • Свободно общаться в поездках
  • Понимать речь на слух
  • Учиться регулярно

Боли

  • Нет времени на занятия
  • Быстро забывает слова
  • Боится ошибиться

Устройства

  • iPhone 80% · короткие уроки
  • Планшет 5% · видео
  • Macbook 15% · сложные задачи
04 · Конкуренты

Изучено около 12 продуктов. Главный ориентир: NotebookLM.

18–34основная аудитория, около 64%
43%студенты, главный сегмент
3+ разав неделю заходят в сервис
≈18 минсредняя сессия

Ключевая идея

ИИ работает только с вашими источниками: загрузил материал, получил ответы, заметки, аудио, тесты и карточки.

Модель

Freemium от Google: больше источников и мощные модели в подписке Google One AI Premium.

Восемь сценариев на телефоне: что заметили в каждом.

01Создание блокнота

Создание блокнота, экран 1Создание блокнота, экран 2Создание блокнота, экран 3+2

Главная кнопка «Создать», вместо пустого экрана — готовые блокноты. Поиск и загрузка файлов на одном экране.

02Результаты и возможности

Результаты и возможности, экран 1Результаты и возможности, экран 2Результаты и возможности, экран 3+1

Функции — плашки с иконкой редактирования, снизу лог результатов. Гибкость настройки ограничена.

03Карточки для повторения

Карточки для повторения, экран 1Карточки для повторения, экран 2Карточки для повторения, экран 3+1

Кнопка «Объяснить» прямо на карточке открывает чат уже с контекстом.

04Генератор тестов

Генератор тестов, экран 1Генератор тестов, экран 2Генератор тестов, экран 3+9

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

главное для нас

05Инфографика

Инфографика, экран 1Инфографика, экран 2

Настройки: язык, ориентация, визуальный стиль и детализация.

06Видеообзоры

Видеообзоры, экран 1Видеообзоры, экран 2Видеообзоры, экран 3+1

Формат, язык, стиль и промпт. Плеер со скоростью, перемоткой и водяным знаком.

07Аудиопересказ

Аудиопересказ, экран 1Аудиопересказ, экран 2Аудиопересказ, экран 3

Подкаст, рецензия, дебаты. Плеер закреплён внизу экрана.

08Презентация

Презентация, экран 1

Тот же паттерн: формат, язык, длина и «Сгенерировать».

Что взяли в наш продукт.

Настройка теста

Сложность и тип заданий заранее, промпт для тонкой настройки.

Объяснение в контексте

Кнопка внутри задания открывает чат с контекстом: «Алиса, объясни».

Итоги теста

Слабые темы и сразу новый тест по ним.

05 · CJM

От «хочу в поездку» до «я справилась!»: семь шагов и что чувствует пользователь.

«Я как путешественница, не знающая английский, хочу быстро создать базовый курс с разговорными фразами, чтобы подготовиться к поездке».
01Узнать уровень
ХочетПонять свой реальный уровень
ДелаетПроходит короткий встроенный тест
БарьерыСтрах выглядеть нелепо
UX-решенияИгровой тест, результат — A1
ЭмоцииОблегчение: понятно, с чего начать
02Получить план
ХочетБыстро получить план под цель
ДелаетВводит цель, жмёт «Сгенерировать»
БарьерыНет времени планировать
UX-решенияМини-курс из 5–7 уроков за секунды
ЭмоцииВосторг: «Как быстро!»
03Учиться на ходу
ХочетУчиться в метро и в перерывах
ДелаетСлушает аудио, повторяет фразы
БарьерыПлотный график, быстрая речь
UX-решенияМикроблоки по 3–5 минут, транскрипция
ЭмоцииУдовлетворение, концентрация
04Разобраться в нюансе
ХочетПонять то, что не ясно в уроке
ДелаетСпрашивает «Алису» простым языком
БарьерыСтрах ошибиться
UX-решенияМгновенный ответ, контекст закреплён
ЭмоцииУверенность
05Сохранить слово
ХочетНе потерять новое слово
ДелаетВыделяет слово — оно в словаре
БарьерыБыстро забывает без визуалов
UX-решенияСлово, аудио, пример, перевод
ЭмоцииКонтроль и спокойствие
06Закрепить
ХочетПотренировать речь и слух
ДелаетЗапускает диалог или игру
БарьерыСтрах ошибиться вживую
UX-решенияМягкая подсветка ошибок и чат
ЭмоцииРадость от прогресса
07Проверить готовность
ХочетУбедиться, что готова к поездке
ДелаетПроходит короткий тест
БарьерыСтрах не справиться
UX-решенияАдаптивный тест, сводка ошибок
ЭмоцииГордость: «Я справилась!»
ХочетДелаетБарьерыUX-решенияЭмоции
06 · User flow

Один основной путь и два способа практики: диалог с Алисой и тест.

Вход и создание курса

01
Онбординг
Подобрать курсы
  • Темы и цель
  • Тест уровня или «Пропустить»
02
Мои курсы
Сгенерировать курс
  • Карточки с прогрессом
  • Стрик и выученные слова
03
Генерация курса
Сгенерировать
  • Запрос свободным текстом
  • Длительность и фокус
  • Можно голосом на колонке
04
Экран загрузки
  • Подписи о ходе генерации
05
Страница курса
Начать обучение
  • Обложка от ИИ и саммари
  • Таймлайн уроков
06
Адаптивный урок
  • Теория и практика
  • Текст, аудио, видео
  • «Алиса, объясни»

Практика и помощник

07
Практика
Выбор формата
ТестКарточкиДиалог с АлисойИгрыСитуации
Чат с помощником
  • Быстрые кнопки: «Объясни проще», «Дай пример», «Разбери ошибку»
  • Свободный промпт и голос
Путь через диалог
Диалог с Алисой
  • Голос или текст
  • Smart Feedback и «Перефразируй красиво»
Итоги беседы
Завершить практику
  • Новые слова в живой речи
Завершение урока
  • Прогресс, XP и стрик
Путь через тест
Генерация теста
Сгенерировать
  • Сложность, число вопросов, тип
Тест
  • Вопрос за вопросом
  • «Алиса, объясни» после ответа
Экран успеха
  • Счёт и темы для повтора
Завершение урока
  • Следующий урок
07 · Вайрфреймы

Логика экранов проверена до разработки.

Старт и генерация4 экр.
Вайрфрейм 1
Вайрфрейм 2
Вайрфрейм 3
Вайрфрейм 4
Урок2 экр.
Вайрфрейм 5
Вайрфрейм 6
Практика4 экр.
Вайрфрейм 7
Вайрфрейм 8
Вайрфрейм 9
Вайрфрейм 10
Тест5 экр.
Вайрфрейм 11
Вайрфрейм 12
Вайрфрейм 13
Вайрфрейм 14
Вайрфрейм 15
08 · Финальный дизайн

Финальный интерфейс: от первого запроса до итогов практики.

Старт и курсСоздание курса по запросу
Главная без курсов
Главная без курсов
Что хотите изучить
Что хотите изучить
Описание курса
Описание курса
Курс готов
Курс готов
Главная с курсом
Главная с курсом
Страница курса
Страница курса
Урок и АлисаАудио, слова и разговор с Алисой
Аудио-формат
Аудио-формат
Слово в контексте
Слово в контексте
Чат с Алисой
Чат с Алисой
Разбор ошибок в чате
Разбор ошибок в чате
Практика и тестПрактика, тест и итоги
Выбор практики
Выбор практики
Составляю тест
Составляю тест
Тест по теме
Тест по теме
Ответы в тесте
Ответы в тесте
Итоги теста
Итоги теста
КарточкиПовторение слов карточками
Онбординг
Онбординг
Режим ответа
Режим ответа
Карточка
Карточка
Варианты ответа
Варианты ответа
Подсказка
Подсказка
09 · Тестирование

Пять задач и разбор живых сессий: 25–35 минут, участники думают вслух.

Задача 1

Поиск или генерация курса

Найти курс по новой теме или создать его с помощью AI.

Задача 2

Урок и AI-помощник

Попросить у помощника пример или упрощение.

Задача 3

Практика

Пройти тест или карточки, создать практику через AI.

Задача 4

Тест уровня

Определить уровень и посмотреть рекомендации курсов.

Задача 5

Формат обучения

Переключить урок в аудио и вернуть текст.

Что показали сессии: интерфейс понятен, но есть места, где приходится гадать.

Заблокированные модули

Серые модули с замком выглядели неоткрываемыми.

«Алиса, объясни»

Находили не сразу: искали рядом с аудио.

«Уровень сложности»

Нужно пояснение, чем он отличается от уровня языка.

Карточки

Непонятны «показывать слово» и «⋯».

Итоги теста

Не хватало «добавить слова в словарь».

Выделение текста

Неочевидно, нужен ненавязчивый онбординг.

Список практик

Всё в одной куче: нужно разделить.

Что сработало

Панель ошибок, чат с контекстом, свайп карточек, смена формата.

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

ДоСерые модули с замкомПонятно, что откроются по порядку
До«Алиса, объясни» теряласьКнопка на каждом экране курса и практики
ДоУровень сложности без поясненияПодсказка рядом с настройкой
ДоНепонятные кнопки карточекОнбординг со свайпом и подписи действий
ДоИтоги теста без следующего шага«Добавить слова в словарь» в итогах
ДоВыделение слова не находилиКороткая подсказка про выделение
ДоПрактики одним списком«В процессе» и «пройденные» раздельно
Итог. После правок сценарии проходятся без остановок: курс создаётся, урок с Алисой и практика читаются с первого раза.
← Все кейсы
Android · Продуктовый дизайн · UX/UI

Лингвалео: тренировка грамматики

Редизайн тренировки грамматики в Android-приложении Lingualeo: из табличного экрана в живой флоу с подсказками, правилом под рукой и поддерживающим фидбеком.

РольПродуктовый дизайнер: аудит, исследование, UX/UI
ПлатформаAndroid-приложение Lingualeo
ФокусТренировка грамматики, практика
МетодАудит, конкуренты, CJM, интервью, 13 гипотез
Обложка кейса Лингвалео
01 · Задача

Тренировка Hello! грамматики работала, но не вела: нужно было сделать её понятной, живой и такой, чтобы к ней хотелось возвращаться.

13гипотез, большинство подтвердилось
19шагов в CJM по сценарию тренировки
5продуктов в анализе конкурентов
02 · Проблема

Устаревший визуал и табличный стиль A–Z: ценная теория терялась, а функции 🙈 не были видны.

Визуал и теория

Табличный стиль плохо отражает контент теории, хотя для пользователей он ценен.

Нет иерархии

Отсутствует чёткая иерархия и визуальный путь пользователя.

Скрытый функционал

Неочевидные элементы: пользователи «не видят» функционал.

Как было: экраны старой тренировки
Как было: список тем, теория, упражнение, ответ и итог
03 · Исследование

Четыре метода: аудит, конкуренты, CJM и интервью 🔎

Аудит тренировки

Анализ существующего решения, сравнение мобильной и десктопной версий.

Конкуренты

Сравнение прямых и косвенных конкурентов в изучении языков.

CJM

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

Интервью

Привычки и потребности аудитории, заинтересованной в изучении языков.

Конкуренты: что забрали в продукт ✂️

Разбор конкурентов: Skyeng, Duolingo, Cake, Praktika, Busuu
Скайэнг, Duolingo, Cake, Praktika, Busuu: экраны с пометками. Нажмите, чтобы увеличить

Цветная обратная связь

Верно и неверно считываются с первого взгляда и меняют настроение экрана.

Объяснение ошибки

Ответ сопровождает пояснение: почему так, а не просто «неправильно».

Награды и анимации

Короткие победы после ответа удерживают в сессии и подпитывают азарт.

04 · CJM

19 шагов 19 тренировки: от «стоит ли начинать» до «когда вернуться к теме».

Листайте вправо →
Что пользователь хочет?
Понять, стоит ли начинать тренировку
Найти тему, которую нужно повторить
Быстро начать практику
Освежить правило перед упражнениями
Понять правило на примерах
Пройти тренировку в своём темпе
Не испытывать стресс от озвучки
Проверить себя без подсказок
Получить помощь, если не понимает
Исправить ошибку самостоятельно
Понять причину ошибки
Не чувствовать себя глупо из-за ошибок
Видеть реальный прогресс
Понимать связь тренировки и батарейки
Быстро закончить короткую сессию
Не потерять мотивацию после ошибок
Закрепить слабые места
Понять итог тренировки
Понять, когда вернуться к теме
Что пользователь думает?
«Это сложно? А мне уже пора начинать или ещё рано?»
«Что у меня проседает?»
«Не хочу читать»
«Я забыл правило»
«Покажите, как говорят люди»
«Не торопите меня»
«Только не звук внезапно»
«Сейчас проверю себя»
«Я запутался»
«Дайте ещё попытку»
«Что именно не так?»
«Наверное, я туплю»
«Я реально стал лучше?»
«А это вообще влияет на батарейку?»
«У меня 2 минуты»
«Я ничего не понимаю»
«Хочу добить ошибки»
«И что теперь?»
«Я это забуду?»
Что делает в интерфейсе?
Смотрит список тем
Сканирует батарейки
Нажимает «Начать»
Открывает правило
Читает/слушает примеры
Медленно проходит практику
Ищет mute/audio toggle
Отвечает без hints
Нажимает hint
Пробует ещё раз
Тапает «Почему?»
Смотрит error state
Следит за прогрессом
Не замечает изменения батарейки
Проходит 3–5 заданий
Медленно отвечает / выходит
Нажимает «повторить ошибки»
Смотрит экран завершения
Возвращается позже
Проблемы / барьеры
Непонятно, сколько времени и сил нужно
Батарейка непонятна
Теория мешает старту
Слишком короткое объяснение, не вернуться к нему в процессе
Примеры абстрактные
10 заданий при медленном прохождении, нельзя пропустить для завершения
Автозапуск звука
Подсказок нет
Подсказка слишком простая (на десктопе сразу даёт ответ)
Ответ показывают сразу, сразу пишет ошибку и в чём она
Нет объяснения ошибки (даже в десктопе ссылка на всё правило, не на конкретное)
Холодное «неправильно»
Нет ощущения mastery
Нет связи действия и прогресса
Тренировка слишком длинная (нельзя скипать предложения)
Сложность не снижается, задания однотипные, ошибки из-за невнимательности
Нет повторения после прохождения, ошибки исправляются сразу
Финал сухой
Нет причин повторять
UX-решения
Время, уровень, «для новичков»
Decay + «нужно повторить»
Режим «быстрая практика», возможность скипнуть теорию
Короткие pattern-based объяснения + возможность открыть правило + виджет в тренировке
Бытовые примеры + понятная организация теории
Ручной темп прохождения / настройка размера практики
Озвучку под кнопку
Hints только по запросу
Многоуровневые hints
Retry before reveal
Inline explanation
Мягкий supportive feedback
Показывать рост mastery (влияние на батарейку)
«+5% к теме» после ответа
Возможность пропуска или уменьшение заданий
Адаптивная сложность
«Повторить сложные вопросы»
Было/стало по батарейке
«Тема забывается»: пушем или на экране грамматики
Ограничения интерфейса / системы
Мало места на карточке темы
Пользователь может не понять механику, механика батарейки уже заложена
Лишние шаги мешают speed-flow
Нельзя перегрузить текстом, нужно удобное переключение между теорией и тренировкой
Ограниченный размер экрана
Больше кликов = дольше флоу, универсально для всех
Нужно переделывать существующую механику
Новички могут не найти hints
Сложно балансировать помощь
Замедляет прохождение
Мало места под explanation
Риск «детского» tone of voice
Перегрузка метриками
Частые анимации утомляют, мало места на экране
Нужно балансировать длину
Адаптивность сложна для внедрения
Нужно хранить ошибки granularly
Финальный экран короткий
Важно не вызывать guilt
Эмоции пользователя
Любопытство + тревога
Контроль
Желание скорости
Облегчение
Уверенность
Спокойствие
Безопасность
Азарт
Поддержка
Надежда
Понимание
Стыд → облегчение
Гордость
Дофамин / мотивация
Лёгкость
Фрустрация
Целеустремлённость
Удовлетворение
Забота о прогрессе
05 · Гипотезы

13 гипотез 13 с метриками: большинство подтвердилось ✓

01

Батарейка и геймификация внутри тренировки

Ценность тренировки растёт, к грамматике возвращаются чаще.

Retention Rate
02

Виджет правила прямо из тренировки

Теория под рукой, не нужно выходить из практики.

Task Success Rate
03

Озвучка по кнопке, без автозапуска

Меньше стресса вне дома, выше удобство.

Session Length
04

Новый визуал объяснения правила

Правило легче считывается и запоминается.

Восприятие
05

Виджет правила под конкретную ошибку

Пользователь видит правило, в котором ошибся.

Error Rate ↓ · Task Success ↑
06

Исправление ошибок в конце тренировки

Не сразу после ошибки, а отдельным заходом.

Долгосрочное усвоение
07

Микро-награды и дашборд прогресса

Прогресс по грамматике виден на странице темы.

Retention Rate
08

Обмен зарядов батарейки на «фрикадельки» для львёнка

Накопленное можно потратить на игровое.

Engagement Rate
09

Явное поощрение и мгновенный позитивный фидбек

Дофаминовый триггер укрепляет позитивный опыт.

Retention
10

Вторая попытка с подсказкой вместо мгновенного ответа

Многоуровневые hints превращают фрустрацию в азарт.

Самостоятельное исправление
11

Поддерживающий inline-комментарий вместо сухого «Неправильно»

Нет «детского» или обвиняющего тона.

Churn on Error ↓
12

«+5% к теме» и «Было/Стало» на финале

Прямая связь между действием и ростом метрики.

Ощущение mastery
13

Кнопка «Закрепить сложные вопросы» и мягкий таймер

Не нужно перепроходить всё заново, а возврат подталкивает забота.

Retention
06 · Решение

Шесть ключевых экранов 6: было и стало

Было: Тренировка
Стало: Тренировка
БылоСтало
Рабочий экран

Тренировка

Прогресс-бар с опытом +5 XP

После каждого предложения начисляется опыт.

Виджет правила Rule

На каждом экране можно вернуться к теории.

Подсказка 💡 hint

Уменьшает количество вариантов, подсвечивает ошибку, пишет следующее слово.

Кнопка проверки Check

Перед отправкой на проверку можно подумать и изменить ответ.

Было: Онбординг
Стало: Онбординг
БылоСтало
Первый вход

Онбординг

Герой-проводник Roar!

Лев встречает пользователя и задаёт тон всей тренировки.

Три правила тренировки 1·2·3

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

Правило перед стартом 📖

Предлагаем изучить правило до первого упражнения.

Было: Правило
Стало: Правило
ЭкранПравило
Теория под рукой

Правило

Правило делится на блоки Form · Use

Форма, написание и употребление: так устроено большинство правил.

Выделение цветом 🎨

Важные грамматические аспекты выделены цветом и направляют внимание.

Доступно на каждом экране ∞

К правилу можно вернуться в любой момент.

Было: Экран успеха
Стало: Экран успеха
БылоСтало
Верный ответ

Экран успеха

Прослушивание по кнопке 🔊

Убрали автоматическое воспроизведение предложения.

Анимации 🎉 5 подряд

После верного ответа или сета из 5 подряд показываем прирост опыта.

Поддерживающий фидбек Так держать!

Мотивационные фразы помогают пройти все 10 предложений.

Было: Экран ошибки
Стало: Экран ошибки
БылоСтало
Неверный ответ

Экран ошибки

Цветовая индикация ✓ / ✕

Слово с ошибкой выделяется красным и направляет внимание.

Исправление 🔁 retry

Флоу исправления ошибок вынесли в отдельную ветку.

Развёрнутый фидбек почему так?

Подсвечиваем ошибку и помогаем понять, как не допустить похожую.

Было: Завершение
Стало: Завершение
БылоСтало
Итог тренировки

Завершение

Эмоциональный дизайн 💚

Завершение даёт ощущение маленькой победы.

Информативность 🔋 15 дн.

Подсвечиваем связь тренировки, опыта и батарейки.

07 · Другие языки

Один паттерн Aa для любых языков: арабский справа налево مرحبا и корейский 안녕 с собственной логикой глагола.

Арабскийписьмо справа налево, правило с формой, написанием и употреблением
Арабский, экран 1
Арабский, экран 2
Арабский, экран 3
Арабский, экран 4
Корейскийокончания глагола и отдельная подсказка про формы
Корейский, экран 1
Корейский, экран 2
Корейский, экран 3
Корейский, экран 4
08 · Финальный дизайн

Финальный флоу: от списка тем до итогов тренировки.

Список темТемы по уровням и прогресс по батарейкам
Список тем
Список тем
Закрытые темы
Закрытые темы
ОнбордингГерой, правила и вход в правило
Анимация онбординга
Анимация онбординга
Правило перед тренировкой
Правило перед тренировкой
Три правила
Три правила
ТренировкаСборка предложения и правило под рукой
Пустое упражнение
Пустое упражнение
Выбор слов
Выбор слов
Правило Present Simple
Правило Present Simple
ФидбекУспех и ошибка
Анимация успеха
Анимация успеха
5 подряд
5 подряд
Почти получилось
Почти получилось
ЗавершениеИтог тренировки и разбор предложений
Отлично!
Отлично!
Предложения из тренировки
Предложения из тренировки
09 · Итоги

Тренировка стала понятной, живой и поддерживающей 💚

Понятный путь

Онбординг, прогресс-бар с опытом и правило на каждом экране ведут пользователя шаг за шагом.

Помощь без спойлеров

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

Эмоции и повод вернуться

Анимации успеха, «5 подряд» и связь опыта с батарейкой делают завершение маленькой победой.

Масштабируется на языки

Единый паттерн работает для английского, арабского и корейского.

Результат проверки

Большинство из 13 гипотез подтвердилось

Новый флоу решает проблемы, найденные в аудите, CJM и интервью: тренировка стала понятной и живой.

13 гипотез5 конкурентов19 шагов CJM
← Все кейсы
Платформа · Game UX · Дизайн-система

Vitruvium

Цифровая платформа для настольной RPG: модульный лист персонажа, редактор приключений и виртуальные игровые столы.

РольПродуктовый дизайнер: от логики систем до UI
СтатусBeta v3.0, закрытое тестирование
Период2026 — сейчас
ИнструментыFigma
Обложка кейса Vitruvium
01 · Контекст

Одна платформа вместо таблиц, чатов и бумажных листов: персонаж, приключение и игровой стол в одном продукте.

Проектирую продукт целиком: от логики игровой системы и пользовательских сценариев до интерфейсов, дизайн-системы и состояний. Платформа проходит закрытое тестирование на играх канала «Грядут Приключения» (БСМ и Архипелаг), готовность к релизу около 95%. Экраны под паролем.

02 · Что сделано

Ключевые задачи и решения.

Модульный лист персонажа

Лист собран как конструктор: портрет и описание, характеристики, атрибуты, статусы, домены и способности, отношения, компаньоны, инвентарь, трекер вдохновений и бросок кубов.

Авторские настройки отображения

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

Прогрессия от 1 до 3

Пересобрала прогрессию персонажа: три уровня вместо шести и система кубов. Входить в игру проще, а баланс сохраняется.

Домены и способности

Домены собираются в тематические сборки навыков: персонаж собирается из понятных блоков вместо длинных списков.

Лист приключения

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

Редактор приключений

Интерактивный сценарий, интерактивные игровые пространства с картами и этажами, редактор карточек предметов.

Виртуальные игровые столы

Игровые комнаты, совместная игра и дневник приключения: партия проходит онлайн, как за настоящим столом.

Кастомное пространство комнаты

Комнату можно настроить под сцену и атмосферу приключения.

Авторские темы и скины

Темы оформления и скины интерфейса: платформа и игровой стол подстраиваются под настроение игры и кампанию «Эндемия».

Единая дизайн-система

Общий UI-паттерн для редакторов, листов, кампании и профиля: новый раздел собирается из готовых компонентов.

Beta v3.0Редактор персонажа · 95%Редактор приключения · 75%Режим приключений · 65%Game UXДизайн-системаСкины интерфейса
03 · Материалы
Материалы под паролем

Экраны и детали проекта закрыты: работа под NDA.

← Все кейсы
B2B · Платформа · Бизнес-логика

SoftboxSolution

B2B-платформа коллективных закупок: комнаты, заявки, согласования и поставка в одном процессе.

РольВедущий дизайнер: продукт, UX, UI
ДоменB2B, коллективные закупки
Период2025
КомандаРабота с продуктовым менеджером
Обложка кейса SoftboxSolution
01 · Контекст

Закупка превращается в управляемый процесс: от создания комнаты до поставки.

Ведущий дизайнер проекта. Отвечала за продуктовую логику ключевых процессов и за все интерфейсы: как закупочная комната создаётся, набирает заявки, проходит согласования и доходит до поставки. Экраны под паролем (NDA).

02 · Что сделано

Ключевые задачи и решения.

Создание комнаты

Мастер из трёх шагов: товар, настройки комнаты, предпросмотр. Продумала правила: количество на продажу, минимум для досрочного запуска, шаг поставки, минимальный заказ, срок жизни комнаты, адрес и дата доставки, ответственный сотрудник.

Заявки участников

Оформление заявок внутри комнаты с учётом шага поставки и минимального заказа, лимитов остатка и статусов. Участник сразу видит, как его заявка влияет на запуск комнаты.

Согласования

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

Этапы поставки

Жизненный цикл комнаты в понятных статусах: набор заявок, запуск (досрочный или по сроку), согласование, поставка, закрытие. Для каждого этапа свои действия и уведомления.

Интерфейсы под роли

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

Каталог румов и личный кабинет

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

Состояния и сценарии ошибок

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

Работа с PM и разработкой

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

Ведущий дизайнерРабота с PMB2BБизнес-логикаРоли и праваАдаптивДизайн-система
03 · Материалы
Материалы под паролем

Экраны и детали проекта закрыты: работа под NDA.

← Все кейсы
Fintech · Продуктовая задача · UX/UI

Райффайзен Бизнес: страница платежей

Оптимизация страницы платежей в десктопной версии приложения для бизнеса от Райффайзен банка: поиск и фильтры, шаблоны, аналитика расходов и настраиваемая таблица.

РольLead команды, дизайн шаблонов и аналитики
Команда6 дизайнеров
СфераБанк для бизнеса, Fintech
Год2023
Обложка кейса Райффайзен
01 · Задача
Оптимизация страницы платежей в десктоп версии приложения для бизнеса от Райффайзен банка

Пользователи тратят слишком много времени на оплату поставщикам, закупки и выставление счетов.

Проблема

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

Распределение задачИсследованияФормирование гипотезКонцептОтрисовка гипотезПрототипТестированиеПравки

Что вошло в новую страницу.

Расширенный поискТабы сортировкиСообщение из банкаАналитикаШаблоныОптимизация таблицыКастомизация
02 · Моя роль

Я была лидом команды и отвечала за две ключевые концепции.

Lead команды

Планирование митингов, распределение задач, приёмка работ, обеспечение целостности концепции.

Концепция страницы «Шаблоны»

Исследование, проектирование и отрисовка интерфейса для платежей по шаблонам.

Концепция «Аналитика»

Исследование, проектирование и отрисовка функции «Аналитика» в рамках страницы платежей.

03 · Аудит

Аудит текущей страницы: семь системных проблем.

Аудит страницы платежных поручений Райффайзен Бизнес с отмеченными проблемами
Текущая страница «Платёжные поручения» с отмеченными проблемами. Нажмите, чтобы увеличить
1

Нет визуальной иерархии

Не соблюдается визуальная иерархия на странице.

2

Нет поиска по сумме

Нет ни поиска, ни сортировки по сумме.

3

Нет экспорта

Нельзя выгрузить данные в популярных форматах.

4

Нет групп платежей

Платежи нельзя разделить по группам.

5

Не работают UX-паттерны

В таблице важные данные расположены в конце.

6

Нет шаблонов

Нельзя создать шаблон и оплатить по нему.

7

Таблица плохо читается

Табличные данные единообразны, за счёт чего трудно считываются.

04 · Исследование

Конкуренты, интервью и портрет пользователя.

Сравнили Сбер, Тинькофф Бизнес, Альфа-Банк и Точку по 10 критериям.

Сравнение банков для бизнеса по критериям страницы платежей
Конкурентный анализ: Сбербанк, Тинькофф Бизнес, Альфа-Банк, Точка. Нажмите, чтобы увеличить

Что говорят пользователи.

“

Часто использую функцию повтор платежа. Не получается создать копию платежа в новой вкладке. Только в этой же, получается если нужно повторить несколько счетов (ежемесячных например), то для каждой оплаты нужно заново искать предыдущий платеж через главную страницу.

“

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

“

Мне удобно сортировать по виду (входящий, исходящий, бюджетный), по дате, по слову (название или слово из назначения платежа). Хотелось бы более удобный поиск по платежам, который можно было бы настраивать под себя.

“

При выгрузке из 1С платежных поручений на уплату НДФЛ, в интернет-банке слетает КПП подразделений. Платежные поручения сохраняются в раздел «На подпись», какие-то в «Черновики» можно забыть о тех что в черновиках.

Для кого мы проектируем.

Т

Татьяна

от 25 до 60 летБухгалтер в крупной компании

Высшее образование
Доход от 720 тыс. руб. в год

О

Олег

от 35 до 44 летИндивидуальный предприниматель

Высшее образование
Доход от 120 до 800 млн руб. в год

05 · User story

Три сценария, которые закрывает новая страница.

Сортировка

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

Импорт и экспорт

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

Фильтры

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

06 · Платежи и аналитика

Страница платежей: вкладки, поиск, фильтры и настройка таблицы.

Новая страница платежей: вкладки статусов, поиск и таблица
Вкладки статусов, поиск и расширенный фильтр над таблицей
Выделение платежа и панель действий внизу страницы
Выбор платежа открывает панель действий: выписка, печать, шаблон, копия, сообщение из банка
Настройка колонок таблицы и количества строк
Кастомизация таблицы: выбор колонок и количества строк, аналитика и импорт справа

Гипотеза про аналитику расходов.

Гипотеза

Мы предположили, что добавление визуального графического отображения данных по расходам (платежам) в пользовательский интерфейс улучшит визуальное представление о финансовых расходах и повысит уровень осведомлённости пользователей.

Ожидается
  • Увеличение использования новой функциональности диаграммы сравнения платежей с бюджетом.
  • Улучшение понимания и осведомлённости пользователей о соответствии фактических платежей запланированному бюджету.
  • Обратная связь пользователей о полезности и удобстве новой функциональности.
  • Улучшение способности пользователей контролировать свои финансовые расходы и принимать осознанные финансовые решения.
  • Снижение количества финансовых ошибок и превышения бюджета пользователей.
Анимация: раскрытие блока аналитики на странице платежей
Прототип: блок «Аналитика» раскрывается над таблицей, расходы по контрагентам и сравнение с бюджетом
07 · Шаблоны

Платёж один раз — и дальше по шаблону.

Оптимизация

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

Первая версия страницы шаблонов в виде карточек
Первая версия: шаблоны в виде карточек
Карточка шаблона с реквизитами платежа
Просмотр шаблона: кому, от кого, сколько и за что
Тестирование

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

08 · Результаты

По итогам тестирования добавили табличный вид шаблонов.

Расширенный фильтр
Расширенный фильтр с названием, периодом, суммой и реквизитами
Табличный вид страницы шаблонов
Табличный вид шаблонов: для банковского клиента он привычнее и нативнее
70%

респондентов отметили, что счётчик и сортировка по статусам помогут быстрее находить документы, выгруженные с ошибкой, в черновиках

75%

респондентов отметили, что функция «Расширенный поиск» является удобной

60%

респондентов отмечает значительное упрощение работы с табличными данными и страницей «Платежи» в целом

← Все кейсы
Mobile · Fintech · Design Challenge

Альфа-Банк: «Лапа помощи»

Благотворительная программа в мобильном приложении банка: округление трат, регулярные пожертвования и прозрачные отчёты о том, куда ушла помощь. Конкурсная работа BBE × Alfa Design Challenge, бриф «Питомцы».

ФорматBBE × Alfa Design Challenge
БрифПитомцы
ПлатформаМобильное приложение
РольДизайнер продукта
Обложка кейса Альфа-Банк
01 · Задача

Помогать животным хочется многим, но порог входа в благотворительность остаётся высоким.

Проблема

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

Задача

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

02 · Исследование

Люди сталкиваются с проблемой каждый день, но хотят видеть конкретный результат своей помощи.

90%

Сталкивались с животными, которым нужна помощь

47%

Хотят видеть конкретный результат помощи

50%

Готовы предоставлять приютам финансовую помощь

80%

Пользуются функциями округления платежей

30%

Предпочитают адресную помощь

15%

Заинтересованы в предоставлении товаров

Опросили 20 респондентов: что они думают о помощи животным через банк.

90% опрошенных сталкивались с животными, которым нужна помощь, 50% готовы помогать животным или уже делают это

50% считают, что лучше предоставлять приютам финансовую помощь, 30% больше заинтересованы в предоставлении товаров

80% поддерживают присутствие в банковском приложении функций для помощи животным, 20% считают, что приложение не создано для этого

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

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

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

80% опрошенных пользовались функцией округления платежей или хотели бы ей воспользоваться. Почти все из них рассказали бы об этой функции друзьям.

Что мотивирует участвовать, как показывать результаты и что думают об округлении.

Что мотивирует участвовать

  • использование накопленных баллов или кешбэка
  • конкретные результаты: куда уходят деньги
  • программа лояльности

Как показывать результаты

  • фото и видео животных, которым помогли
  • рилсы и репортажи из приютов
  • статьи с фотографиями
  • возможность затребовать отчёт
  • новости о деятельности приютов

Округление платежей

  • плюс: копить незаметно, не обращая внимания
  • плюс: удобно подключать и отключать
  • минус: маленькие суммы
  • минус: можно забыть о подключённой функции
  • минус: возможен тёмный паттерн
  • минус: неудобно, если все траты спланированы
Анкета: 29 вопросов
  1. Имя, профессия, возраст, род деятельности
  2. Клиентом каких банков вы являетесь? Как часто вы пользуетесь банковским приложением?
  3. Какую роль животные играют в вашей жизни?
  4. Часто ли вы сталкиваетесь с животными, нуждающимися в помощи или приюте?
  5. Как бы вы отнеслись к идее, что ваш банк предлагает функцию пожертвования для поддержки приютов или организаций, заботящихся о животных?
  6. Какие типы помощи вы бы хотели видеть в банковском приложении в поддержку животных (например, пожертвования, программы добровольчества, акции по сбору средств)?
  7. Если банковское приложение предлагает функцию пожертвования для животных, вы предпочли бы пожертвовать средства или предоставить товары (корм, медикаменты и т.д.)?
  8. Как бы вы предпочли получать информацию о текущих потребностях приютов и организаций, заботящихся о животных?
  9. Какие возможности улучшения благотворительных акций и пожертвований в приложении вам кажутся важными?
  10. Как бы вы относились к идее банковской карты, при использовании которой часть комиссии с каждой транзакции автоматически перечисляется на благотворительные нужды для животных?
  11. Какие функции в приложении помогли бы вам более эффективно и удобно поддерживать благотворительные инициативы, связанные с животными?
  12. Что мотивировало бы вас больше всего принимать участие в благотворительных акциях для животных через банковское приложение?
  13. Как бы вы предпочли получать информацию о том, какие организации и приюты поддерживаются с помощью вашего участия в благотворительных инициативах?
  14. Каким образом вы видите возможность участия в добровольческих программах, связанных с животными, через банковское приложение?
  15. Если бы банковское приложение предоставляло информацию о затрате средств на лечение и уход за животными в приютах, вы были бы заинтересованы в участии в такой программе?
  16. Какие дополнительные функции в банковском приложении могли бы мотивировать вас активнее участвовать в помощи животным?
  17. Как бы вы оценили уровень доверия к банку, который активно поддерживает благотворительные программы для животных?
  18. Какие из следующих благотворительных акций для животных вас бы заинтересовали: сбор средств на медицинскую помощь животным, строительство приютов, программы стерилизации, пропаганда ответственного владения?
  19. Какую информацию вы бы хотели видеть в приложении о влиянии ваших пожертвований на жизнь животных?
  20. Какие ваши предложения по улучшению функций помощи животным в банковском приложении?
  21. Пользуетесь ли вы функцией «копилка» в вашем банковском приложении?
  22. Как вы относитесь к идее округления платежей в приложении? Пожалуйста, объясните свой ответ.
  23. Если бы функция округления платежей была реализована, вы бы активно ею пользовались?
  24. Если бы функция округления платежей и пожертвований была доступна, вы бы рассказали о ней своим друзьям и знакомым?
  25. Что мотивировало бы вас использовать функцию округления платежей?
  26. Выберите из списка, куда бы вы хотели отправлять скопленные деньги: на помощь незащищённым группам населения / в инвестиции / выводить на счёт / на помощь приютам для животных
  27. Какие нюансы или проблемы вы видите в возможности округления платежей?
  28. Как бы вы предпочли настраивать округление платежей: автоматически или вручную?
  29. Укажите свои контактные данные, если вы готовы принять участие в дополнительных исследованиях или тестировании новых функций.
03 · Гипотеза

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

Гипотеза

«Лапа помощи» — это интеграция Альфа-банка с ассоциацией «Благополучие животных», а также сетью продуктовых магазинов X5 Group. Пользователь сам выбирает способ помощи: регулярный перевод в организацию (проверенные приюты и реальные цели) или округление трат с зачислением их в организацию. Кроме того, за покупки товаров для домашних животных в X5 Group он копит pet-баллы. Банк удваивает стоимость каждого такого балла при отправке в фонд. Баллы можно отправить в ассоциацию или в любой другой проверенный приют, но нельзя вывести на карту.

1

Банк и пользователи в выигрыше

Функция в приложении с интеграцией ассоциации и X5 Group позволит пользователям активнее и проще поддерживать благотворительные инициативы, а банку — повысить лояльность клиентов и поддержать положительный образ бренда.

2

Выбор из трёх способов

Регулярный перевод, округление трат и pet-баллы усилят ощущение собственной вовлечённости и контроля над пожертвованиями, что может стимулировать большее участие.

3

Pet-баллы за покупки

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

4

Удвоение баллов банком

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

Как проверим гипотезу.

Анализ данных

Уровень участия клиентов в функции до и после внедрения: изменение числа участников и средняя сумма пожертвований.

Опросы пользователей

Оценим удовлетворённость и интерес к программе, влияние функции на восприятие банка и лояльность.

Анализ активности

Поведение после внедрения: частота использования округления трат и количество pet-баллов, отправленных в фонд.

Сравнение с ожиданиями

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

Мы окажемся правы, если увидим.

около 5 тыс.

клиентов подключат программу за первые 3 месяца — около 0,1% активных пользователей приложения

10%

участников выбирают регулярный перевод (не менее); у Т-Банка таких пожертвований около 8%

50%

участников предпочитают округление трат (не менее) — как самый лёгкий вход

1 млн ₽

соберут в фонд за первые 3 месяца: ≈5 тыс. доноров × ~100 ₽ в месяц, с учётом разгона

около 150 тыс.

pet-баллов отправят в фонд за первые 3 месяца — около 15% от суммы пожертвований

+10%

к общей сумме пожертвований за первый год благодаря удвоению баллов

80%

удовлетворённость клиентов по опросам и обратной связи (не менее)

+20%

частота использования округления трат в первые 6 месяцев

04 · Персона

Анна хочет помогать, но боится, что помощь будет недостаточной или уйдёт не туда.

Удовлетворение от помощи другим

Чувство выполненного долга, удовлетворённости от благого дела

Помощь и забота

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

Прозрачность, доверие

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

Отсутствие возможности выбора

Анна боится, что её лишат возможности выбирать, куда именно направлять средства

Сложность отмены или изменения пожертвований

Анна боится, что не сможет быстро и безопасно отменить свои пожертвования

Ощущение недостаточности помощи

Анне важно понимать, что её средства расходуются эффективно. Она боится, что помощь будет недостаточной

Минимизирование усилий

Нужны простые и быстрые способы помогать

Характеристики

ИнтровертЭкстраверт
АналитикТворец
ЗанятойСвободный
НеорганизованныйОрганизованный
НезависимыйКомандный игрок
ПассивныйАктивный
СтабильныйРискующий
05 · User stories

Потребности Анны превратились в пять историй, на которых построена программа.

1.

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

User story
2.

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

User story
3.

Как пользователь, хочу, чтобы функция «Лапа помощи» была легко доступна и интуитивно понятна. Чтобы я мог легко настроить способ помощи и отслеживать свой вклад. Простота использования сделает участие в благотворительных инициативах удобным и приятным опытом.

User story
4.

Как пользователь, я хочу выбрать «округление трат», чтобы каждая моя покупка превращалась в небольшое пожертвование, которое незаметно для меня, но оказывает существенную помощь.

User story
5.

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

User story
06 · User flow

От главного экрана до отправки заявки: весь путь пользователя в одной схеме.

User flow и вайрфреймы программы «Лапа помощи»
Схема переходов и вайрфреймы. Нажмите, чтобы увеличить
07 · Решение

Благотворительная программа «Лапа помощи». Помогай животным каждый день в три клика.

Экран «Благотворительная программа»

Округляй

Пользователь подключает округление трат, накопленные средства уходят в ассоциацию «Благополучие животных»

Копи баллы

Пользователь копит pet-баллы, которые можно отправить в фонд, приют или адресно

Мы удвоим!

За покупки товаров для животных в Пятерочке, Перекрестке или Карусели Альфа-банк удваивает кешбек pet-баллами

В приложении есть две точки входа в программу.

Главный экран приложения с двумя точками входа в «Лапу помощи»12
1

Баннер в ленте главного экрана

Заметный блок «Благотворительная программа „Лапа помощи“» с обещанием «Помогай животным каждый день в три клика». Первое знакомство с программой для всех клиентов.

2

Карточка pet-баллов в «Кэшбэк и привилегиях»

Баланс pet-баллов, доступных для пожертвований, рядом с остальными бонусами. Вход для тех, кто уже копит баллы и хочет их отправить.

Две точки входа закрывают два состояния клиента: «узнаю о программе» и «уже участвую».

08 · Удобство и простота

Один из доступных способов участия в зависимости от вовлечённости и готовности жертвовать.

Экран pet-баллов
Благополучие животных
09 · Округление трат

Настроить округление можно в два клика: выбрать шаг, остальное банк сделает сам.

Экран «Округление трат»
Выбор шага округления
Умный шаг округления
10 · Регулярные пожертвования

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

Экран «Регулярные пожертвования»
Настройка суммы и периодичности
11 · Интеграция с приютами

Закрывает потребность в безопасности и уверенности, а также в адресной помощи.

Заявка на помощь: кошка Маруся
Куда отправим pet-баллы

Нужного фонда нет в списке? Можно оставить заявку на перевод баллов в любой известный фонд.

Форма заявки на отправку pet-баллов
Как проверяется заявка
1 балл = 1 рубль

Баллы уходят на счёт фонда после проверки.

Проверка модератором

Ассоциация «Благополучие животных» проверяет надёжность фонда, связывается с руководителями и смотрит отчёты.

12 · Регулярные отчёты

Легко увидеть, куда конкретно отправлены средства и какая помощь оказана.

Отчёт: 1 200 000 рублей
Отчёт: 180 000 рублей на лечение
Отчёт: 80 животных нашли дом
Отчёт: 39 надёжных фондов
Помогать легко!
MobileUX/UIResearchDesign Challenge
← Все кейсы
B2B · WMS · Pre-sale · Prototype

Logistic: расписание складских доков

Интерактивный прототип модуля планирования доков для WMS-системы: таймлайн рейсов, подсветка конфликтов и аналитика загрузки склада.

ЗаказчикКОРУС Консалтинг
ЭтапPre-sale, интерактивный прототип
РольДизайнер продукта
ПлатформаWeb, ноутбук 13″ и планшет
Обложка кейса Logistic
О кейсе

Проект выполнен для КОРУС Консалтинг на этапе пресейла WMS-системы. Оригинальный кейс закрыт для публикации, поэтому для портфолио я переделала его: другое название продукта (Logistic PRO), заново собранные интерфейсы и обезличенные данные. Задача, логика работы диспетчера и ключевые решения сохранены.

01 · Задача

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

Обзор

На этапе пресейла для WMS-системы нужно было разработать визуальный язык и функциональную структуру для управления расписанием доков. Диспетчер должен видеть график рейсов в интуитивно понятном виде и мгновенно оценивать реальную нагрузку на складские мощности.

ЛогистикаУправление складомКонтроль загруженностиОперативное управлениеДиспетчер
Необходимо

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

01

Чистый интерфейс

Плотные данные без визуального шума.

02

Визуализация данных

Нагрузка читается с первого взгляда.

03

Управление загруженностью

Решения принимаются до появления конфликта.

Как шла работа над пресейлом.

  1. 01

    Разбор процесса

    Как диспетчер сегодня распределяет рейсы по докам и где в этом рождаются конфликты.

  2. 02

    Персона и цели

    Роль, контекст использования, устройство, сценарии и критичные ошибки.

  3. 03

    Гипотеза

    Что именно должен увидеть диспетчер, чтобы решать быстрее и раньше.

  4. 04

    Дизайн таймлайна

    Сетка, состояния, цвет и правила работы на готовых компонентах системы.

  5. 05

    Интерактивный прототип

    Перенос рейсов, панель назначения, режим аналитики склада.

02 · Ограничения

Работать пришлось в строгих рамках: готовый набор компонентов и неизменная логика системы.

Ограничения

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

Технические рамкиЭргономикаКонфиденциальность
1

Только готовые компоненты

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

2

Логика системы неизменна

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

3

Ноутбук 13″ и планшет

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

03 · Персона

Алексей каждый день собирает расписание из десятков рейсов и не может позволить себе ошибиться.

Алексей, 34Dock Scheduler / Warehouse Dispatcher

Цели

  • Быстро распределять рейсы по докам без конфликтов
  • Видеть загрузку склада на часы вперёд
  • Предотвращать простои и перегрузки
  • Реагировать на изменения расписания в реальном времени
7 лет в складской логистикеУверенный пользовательНоутбук 13″ + иногда планшет

Типичные боли роли

  • Два рейса претендуют на один док в одно и то же время
  • Тип транспорта не подходит доку, это видно слишком поздно
  • Перегрузка склада в пиковый час, простой в остальные
  • Данные по рейсам размазаны по разным разделам

Сценарий дня

  1. Открыть день и увидеть все доки на одной сетке
  2. Назначить рейс на свободное окно
  3. Заметить конфликт и разобраться в причине
  4. Перенести рейс, не теряя контекста
  5. Проверить загрузку склада по часам
04 · Гипотеза

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

Гипотеза

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

30%быстрее принимает решения диспетчер
*

Рассматривается работа с очередью первого порядка, планирование тайм-слотов

Очередь на въездТайм-слотыБронирование окон

Как проверим гипотезу на следующих этапах.

Время на решение

Сколько времени диспетчер тратит на распределение рейсов по докам до и после.

Количество конфликтов

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

Простои доков

Как меняется загрузка по часам и сколько окон остаётся пустыми.

05 · Принципы

Вся информация считывается цветом и положением, без чтения таблиц.

Назначение

Рейс закреплён за доком и временем. Бирюзовая карточка с номером и типом операции.

Конфликт по типу ТС

Красная зона: тип транспорта не подходит доку или окно уже занято.

Недоступность

Серая зона: док закрыт на обслуживание, назначать нельзя.

Текущее время

Тонкая линия через всю сетку показывает, где мы сейчас.

1

Вся смена на одном экране

Доки по горизонтали, часы по вертикали. Диспетчер видит и день целиком, и конкретное окно.

2

Правка на месте

Рейс переносится прямо в сетке, а конфликтные ячейки подсвечиваются в момент перетаскивания.

3

Детали без перехода

Назначение открывается на боковой панели. Контекст сетки не теряется.

4

Нагрузка до проблемы

Режим склада показывает процент утилизации каждого часа и заранее подсвечивает узкие места.

06 · UI экраны

Управление загрузкой: центральный элемент системы — динамический таймлайн.

Управление загрузкой

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

Экран таймлайна расписания доков12345
  1. 1Назначение: номер рейса и тип операции
  2. 2Конфликт: тип ТС не подходит доку
  3. 3Техническая недоступность дока
  4. 4Линия текущего времени
  5. 5Док как колонка, час как строка
Перенос назначения в таймлайне
Перенос рейсаКарточка «поднимается» над сеткой, а красные окна показывают, куда её ставить нельзя.
Таймлайн с панелью назначения
Панель назначенияТри блока: планирование, идентификация и статус. Редактирование, отмена и сохранение в одном ряду действий.
ПланированиеПрибытиеУбытиеСклад
ИдентификацияНазначениеТип назначенияРейс
СтатусСтатусТекущее состояние
07 · Аналитика

Режим склада показывает загрузку по часам и узкие места до того, как они случились.

Аналитика загрузки

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

Режим аналитики загрузки склада WH_01

Процент в конце строки

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

Док остаётся в контексте

В строке часа видны конкретные доки, поэтому от цифры можно сразу перейти к причине.

Конфликт виден дважды

Красные ячейки подсвечены в сетке, а час с проблемой отражается в итоговом проценте.

08 · Статус этапа

Прототип не вошёл в релиз, но стал ориентиром для развития продукта.

Внедрение

Фичи не вошли в итоговый продуктИз-за приоритизации других базовых модулей. Но интерактивный прототип стал ориентиром для будущих обновлений платформы.

Ценность прототипа

Заказчик заранее оценил UXКлючевые инновации были понятны ему до начала разработки, а вектор развития продукта он утвердил ещё на этапе пресейла.

Оценить заранее

UX ключевых инноваций был понятен заказчику до начала разработки.

Утвердить вектор

Направление развития продукта согласовано на этапе пресейла.

Ориентир на будущее

Прототип остался референсом для следующих обновлений платформы.

Logisticby Anna Shalgaas
WMSB2BDashboardPrototypePre-sale
Product design
А.
UX researchFigma

Анна
Шильгаас.

Продуктовый UI/UX дизайнер. Превращаю сложную логику в понятные интерфейсы.

Раньше писала сказки и играла в театре, теперь проектирую продукты. Учусь в магистратуре ИТМО по продуктовому дизайну.

СейчасVitruvium
УчусьИТМО · продуктовый дизайн
РаньшеSoftboxSolution, КОРУС, Фриланс, Сказка+
FigmaIllustratorAfter EffectsCJMJTBDПрототипированиеMidjourneyUX-копирайтинг

Контакты