S

HI I'M KATE!

PRODUCT DESIGNER / UX LEAD. Проектирую сложные цифровые продукты и превращаю бизнес-логику в понятные пользовательские сценарии.
10+ лет в UX, 3+ года управляю дизайн-командой.

Продуктовый дизайн
Сложные системы
Управление командой
Екатерина Столярова
Проектирую сложные системы и делаю их понятными для пользователя.
МОЯ РОЛЬ

ОТ ЗАДАЧИ ДО СИСТЕМЫ

01

ПРОДУКТ

  • Исследования и аналитика
  • Пользовательские сценарии
  • Информационная архитектура
  • UX/UI-проектирование
  • Развитие продукта
02

КОМАНДА

  • Управление командой
  • Распределение задач
  • Design Review
  • Развитие дизайнеров
  • Качество дизайн-решений
03

ПРОЦЕСС

  • Работа с PO и бизнесом
  • Работа с аналитиками и разработкой
  • Приоритизация
  • Согласование решений
  • Сопровождение разработки

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

ПРОЕКТЫ

ИЗБРАННЫЕ ПРОЕКТЫ

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

I.Catalog Interface

I.CATALOG

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

B2B ENTERPRISE СЛОЖНАЯ ЛОГИКА

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

Eldorado App Interface

ELDORADO

Редизайн клиентского приложения

B2C E-COMMERCE MOBILE

Клиентский опыт и ключевые e-commerce сценарии

Contact Center Interface

CONTACT CENTER

Внутренняя платформа для работы с клиентскими обращениями

B2E FROM SCRATCH СЛОЖНЫЕ ПРОЦЕССЫ

Исследование процессов и проектирование продукта с нуля

КЕЙС 01 / I.CATALOG

УПРАВЛЕНИЕ СЛОЖНЫМ КАТАЛОГОМ

I.Catalog — внутренняя система М.Видео–Эльдорадо для работы с каталогом. В ней управляют структурой каталога, категориями, инфомоделями и товарами 1P и 3 P.

ДО 5 УРОВНЕЙ
иерархии классификации
1P + 3P
работа с собственным ассортиментом и маркетплейсом
НЕСКОЛЬКО РОЛЕЙ
разные сценарии и зоны ответственности
Скриншот I.Catalog
МОЯ РОЛЬ
UX LEAD / PRODUCT DESIGNER

Вела проект со стороны UX: от исследования бизнеса и пользовательских процессов до формирования продуктовой модели и ключевых UX-решений.

ПРОДУКТ
Исследование → продуктовая и UX-модель → ключевые решения
КОМАНДА
Декомпозиция → постановка задач → дизайн-ревью → контроль целостности
СТАРТОВАЯ ТОЧКА

НА ВХОДЕ — ТОЛЬКО АРХИТЕКТУРА

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

Исходная схема архитектора
МОЯ ЗАДАЧА

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

ПОДХОД

КАК Я РАЗОБРАЛАСЬ В СИСТЕМЕ ПЕРЕД ПРОЕКТИРОВАНИЕМ

01 / БИЗНЕС
Интервью со стейкхолдерами
  • Зачем меняем систему?
  • Какие проблемы должна решить новая система?
  • Почему предложена именно такая архитектура?
  • Какие существуют бизнес- и технические ограничения?
02 / ПОЛЬЗОВАТЕЛИ
Интервью с ключевыми группами пользователей
  • Как они работают сейчас?
  • Где теряют время и контекст?
  • Какие операции вызывают сложности?
  • Какие ошибки для них критичны?
03 / ФОРМАЛИЗАЦИЯ
Формулирование продуктовых и UX-проблем
  • Боли
  • Потребности
  • Сценарии
  • Ограничения
  • Приоритеты
04 / ПРОЕКТИРОВАНИЕ
Перешла к проектированию
  • Информационная архитектура
  • User flows
  • UX-концепции
  • Прототипирование
  • Проверка решений

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

РЕЗУЛЬТАТ ИССЛЕДОВАНИЯ

СЛОЖНОСТЬ БЫЛА НЕ В ИНТЕРФЕЙСЕ

01 / СЛОЖНАЯ ИЕРАРХИЯ
Каталог существовал сразу в нескольких связанных системах: структура сайта, внутренняя классификация и SAP не совпадали один в один.
02 / ПОТЕРЯ КОНТЕКСТА
При работе с категориями и товарами пользователю было сложно понимать, где он сейчас находится, с чем работает и что именно меняет.
03 / ЦЕНА ОШИБКИ
Изменения в структуре или перенос товаров могли затронуть сразу несколько частей каталога и повлиять на дальнейшие процессы.
РЕШЕНИЕ 01

ИНФОРМАЦИОННАЯ МОДЕЛЬ

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

Информационная модель
ПРОБЛЕМА
Структура сайта, внутренняя классификация и SAP были связаны между собой, но не совпадали.
РЕШЕНИЕ
Собрали единую логику работы с категориями и сохранили контекст при переходе между разными уровнянями каталога.
ЭФФЕКТ
Пользователь понимает, где находится, с какой сущностью работает и что изменится после его действий.
РЕШЕНИЕ 02

БЕЗОПАСНО МЕНЯТЬ СТРУКТУРУ

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

Drag & Drop
Массовые переносы
Подтверждение операций
Планирование миграций
Состояния операций
Переносы и миграции
РЕШЕНИЕ 03

РАБОТА С ТОВАРАМИ В МАСШТАБЕ

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

Поиск
Фильтрация
Выбор товаров
Массовые операции
Привязка и перемещение
Управление товарами
РЕЗУЛЬТАТ

ОТ АРХИТЕКТУРЫ К ПРОДУКТУ

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

ПОНЯТНАЯ СТРУКТУРА
единая логика работы с каталогом
КОНТЕКСТ
пользователь понимает, где находится и с чем работает
МАСШТАБИРУЕМОСТЬ
система рассчитана на большой и постоянно меняющийся каталог
КЕЙС 02 / ELDORADO

РЕДИЗАЙН КЛИЕНТСКОГО ПРИЛОЖЕНИЯ

Мобильное приложение Эльдорадо для iOS и Android. Я работала над редизайном основных сценариев приложения: от главной, каталога и поиска до карточки товара, корзины и личного кабинета.

Главная Eldorado Каталог Eldorado Промо / Stories Eldorado Карточка товара Eldorado
МОЯ РОЛЬ
UX LEAD / PRODUCT DESIGNER

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

ПРОДУКТ
Анализ → сценарии → проектирование → сопровождение
КОМАНДА
Постановка задач → синхронизация → дизайн-ревью → контроль целостности решений
ЗАДАЧА

РЕДИЗАЙН КЛЮЧЕВЫХ СЦЕНАРИЕВ

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

КЛИЕНТСКИЙ ПУТЬ
ГЛАВНАЯ КАТАЛОГ ПОИСК КАРТОЧКА ТОВАРА КОРЗИНА ЛИЧНЫЙ КАБИНЕТ

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

РЕШЕНИЕ 01

КАТАЛОГ И НАВИГАЦИЯ

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

Каталог Eldorado Каталог 1 Каталог 2 Каталог 3
РЕШЕНИЕ 02

КАРТОЧКА ТОВАРА

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

Карточка товара 1 Карточка товара 2 Карточка товара 3 Карточка товара 4
РЕШЕНИЕ 03

КОРЗИНА И ОФОРМЛЕНИЕ ЗАКАЗА

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

Корзина 1 Корзина 2 Корзина 3 История заказов
ДРУГИЕ СЦЕНАРИИ

РАБОТАЛИ И С ДРУГИМИ ЧАСТЯМИ ПРИЛОЖЕНИЯ

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

Поиск по штрих-коду Фильтры Личный кабинет Чат с продавцом
РЕЗУЛЬТАТ

РЕДИЗАЙН ОСНОВНЫХ СЦЕНАРИЕВ ПРИЛОЖЕНИЯ

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

КЕЙС 03 / CONTACT CENTER

CONTACT CENTER

Внутренняя платформа М.Видео–Эльдорадо для обработки клиентских обращений из разных каналов: чатов, социальных сетей и телефонной линии.

B2E
внутренний продукт
OMNICHANNEL
разные каналы обращений
FROM SCRATCH
продукт с нуля
Голосовой чат Contact Center
МОЯ РОЛЬ
UX LEAD / PRODUCT DESIGNER

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

ПРОДУКТ
Исследование → архитектура → сценарии → проектирование
КОМАНДА
Декомпозиция → постановка задач → дизайн-ревью → контроль целостности
КОНТЕКСТ

НОВЫЙ ПРОДУКТ С НУЛЯ

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

ИССЛЕДОВАНИЕ

СНАЧАЛА РАЗОБРАЛИСЬ, КАК УСТРОЕНА РАБОТА

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

ИНТЕРВЬЮ ПРОЦЕССЫ СЦЕНАРИИ БИЗНЕС-ПРАВИЛА UX-РЕШЕНИЯ
РЕШЕНИЕ 01

РАБОТА С ОБРАЩЕНИЯМИ

В одном рабочем пространстве оператор получает обращение, видит диалог и контекст клиента и работает с инструментами, которые нужны ему во время обработки обращения.

Чат Contact Center
РЕШЕНИЕ 02

РАБОТА СО ЗВОНКАМИ

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

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

Голосовой чат Contact Center
РЕШЕНИЕ 03

МАРШРУТИЗАЦИЯ ОБРАЩЕНИЙ

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

Маршрутизация Contact Center
РЕШЕНИЕ 04

НАСТРОЙКА IVR

В административной части системы проектировали настройку IVR: управление ветками, расписаниями и аудиороликами для разных сценариев работы контакт-центра.

IVR Contact Center
РЕШЕНИЕ 05

ОТЧЁТНОСТЬ ДЛЯ SUPERVISOR

Для супервайзеров проектировали отчётность по работе контакт-центра: звонкам, работе операторов и другим показателям.

Отчёт по звонкам Contact Center
РЕЗУЛЬТАТ

ЕДИНАЯ СИСТЕМА КОНТАКТ-ЦЕНТРА

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

ОПЕРАТОРЫ
Работа с обращениями и звонками
УПРАВЛЕНИЕ
Маршрутизация и настройки IVR
SUPERVISOR
Контроль работы и отчётность
РУКОВОДСТВО ДИЗАЙНОМ

UX DESIGN CENTER

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

ДИЗАЙН
Сама проектирую интерфейсы и веду продуктовые задачи
КОМАНДА
Распределяю задачи и загрузку
КАЧЕСТВО
Провожу ревью решений и проверяю реализацию
РАЗВИТИЕ
1:1, обратная связь и планы развития
РАБОТА КОМАНДЫ

КАК ОРГАНИЗОВАНА РАБОТА

Матрица ответственности

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

Я КАК ДИЗАЙНЕР
Проектирую интерфейсы и веду свои продуктовые задачи.
Я КАК РУКОВОДИТЕЛЬ
Распределяю работу команды, провожу ревью и подключаюсь к сложным задачам.
РАБОТА КОМАНДЫ

РИТМ РАБОТЫ КОМАНДЫ

DAILY
Текущие задачи, статус и блокеры
ЕЖЕНЕДЕЛЬНО
Планирование и распределение задач
РАЗ В МЕСЯЦ
Ретроспектива команды
1:1
Примерно раз в три месяца с каждым дизайнером
ПО НЕОБХОДИМОСТИ
Обратная связь, помощь со сложными задачами и обсуждение решений
DESIGN REVIEW
Проверка дизайна и реализации

Также я участвую во встречах руководителей продуктового кластера, где представляю работу UX-направления, текущие задачи и риски.

РАЗВИТИЕ КОМАНДЫ

РАЗВИТИЕ ДИЗАЙНЕРОВ

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

1:1 ЗОНЫ РОСТА ПЛАН ЗАДАЧИ КОНТРОЛЬНЫЕ ВСТРЕЧИ
ПЛАН РАЗВИТИЯ

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

ПРОЦЕССЫ

КАК УСТРОЕНА РАБОТА НАД ЗАДАЧАМИ

ПОСТАНОВКА ЗАДАЧИ ПРИОРИТИЗАЦИЯ ДИЗАЙН РАЗРАБОТКА РЕЛИЗ DESIGN REVIEW
ПОСТАНОВКА ЗАДАЧ
Используем единый шаблон постановки задач для новых функций, доработок и Design Review.
ОТВЕТСТВЕННОСТЬ
Фиксируем роли PO, UX Lead, дизайнера и разработки, чтобы на каждом этапе было понятно, кто за что отвечает.
РАБОЧИЙ ПРОЦЕСС
Работаем по общему процессу от постановки задачи и приоритизации до разработки, релиза и Design Review.
DESIGN REVIEW
После релиза дизайнер проверяет реализацию. Критичные ошибки исправляем сразу, остальные фиксируем в следующих задачах.
РЕЗУЛЬТАТ

ЧТО В ИТОГЕ БЫЛО ВЫСТРОЕНО

ПРОЦЕССЫ
Понятный процесс работы над задачами
КОМАНДА
Планирование и распределение задач между продуктами
КАЧЕСТВО
Ревью решений и проверка реализации
РАЗВИТИЕ
1:1, обратная связь и планы развития