ITCROWD — внутренняя платформа Ozon

Начало
О продукте
Проблема
Процесс
Решения
Новая сетка
Где я облажался
Финальный дизайн
Шаблоны ресурса
Команда

IT-CROWD

Внутреннее облако Ozon

01 · КОНТЕКСТ

О продукте

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

Три тысячи пользователей еженедельно. Шесть разных ролей: бэкенд, фронтенд, QA, тимлиды, SRE, ИБ.
У каждой роли — свои сценарии. Разработчик создаёт сервис. Тимлид мониторит команду. ИБ важно смотреть не хранит ли проект конфидициальную информацию и т. д

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

Глеб Долгов

Моя роль

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

Результаты

CSAT продукта

73 → 90 %

Запуск нового типа ресурса

Недели → дни

Запуск раздела

Биллинг, квоты

Другие активности

Унификация подходов

За четыре года команда выросла с одного человека до четырех

Валерия Зарубенкова

Ирина Касевич

Александра Чеснокова

Илья Миронов

Александру и Валерию брал как стажёров, Валерия стала моим замом, Александра - Senior Designer

Что внедрил

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

1:1 раз в две недели с каждым дизайнером и с лидами разработки.

Ретроспективы по итогам спринтов. Что работает, что нет.

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

Распределение зон ответственности между дизайнерами по разделам

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

02 · ПРОБЛЕМА

Страница проекта

Главная страница продукта была одна на всех. Самая посещаемая. На неё приходили все шесть ролей с разными вопросами — и она пыталась закрыть потребности каждого. Карточки метрик, статусы, лента активности, виджеты, табы — всё на одном экране, без иерархии. Большинство пользователей сидело на MacBook 13″. Самое важное оказывалось ниже первого экрана.
Помимо страницы «Проект» у нас было ещё четыре разновидности этой же страницы. Каждая — со своим набором виджетов. Унификации не было.

01

Слишком много данных

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

02

Сложный поиск информации

Большинство пользователей сидит на MacBook 13″ и не любит скроллить. Ключевая информация не помещалась в первый экран.

03

Нет масштабируемости

Помимо «Проекта», у нас ещё есть 4 разновидности одной страницы. Это нужно все унифицировать

Первая версия. Дашборд из виджетов: всё самое важное оказывалось внизу.

03 · ПРОЦЕСС

От идей к решению

01

DISCOVERY

Интервью и данные

Провели интервью с разработчиками, тимлидами, ИБ и SRE. Собрали реальные сценарии использования страницы.

02

REDESIGN v1

Перегруппировка данных

Сократили высоту страницы, переверстали виджеты. Но табов становилось больше, фильтр «Окружение» применялся только к 5 из 10 табов. Тестирование на пользователях

03

REDESIGN v2

Боковое меню и новая сетка

Перешли на боковое меню. Решило часть проблем, но блоки всё ещё ломали сетку на 1920+.
Тестирование на пользователях и первый провал

04

REDESIGN v3

Новый подход

После 1,5 года «фриза» на редизайн и накопления обратной связи от пользователей, спроектировали новый дизайн

04 · Первый подход

Перегруппировка данных

Перегруппировал данные. Сократил высоту страницы в 1,5 раза, переверстал виджеты. Стало легче искать.
Но количество табов росло, а фильтр «Окружения» применялся только к 5 табам из 10 — это всё равно выглядело не логично.

05 · Второй подход

Боковое меню и новая сетка

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

06 · СЕТКА

Новая сетка и шапка проекта

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

Старая сетка

Блоки разной ширины; плохо масштабируется на широких экранах.

Новая сетка

Фиксированные блоки; одинаковый ритм на любых разрешениях.

В новой шапке рейтинг сервиса и другая ключевая информация переехали под его название.
Кнопки действий — справа.

Если навести на иконку severity, появится расшифровка и дата создания сервиса.
Собрал кликабельный прототип. Юзабилити-тесты. Опрос. Зелёные сценарии — все, которые я считал основными.

Новый дизайн

Старый дизайн

Шапка проекта

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

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

Приоритеты в интерфейсе мы сверяем с аналитикой и тепловыми картами — не только с интервью.

Открыл утром рабочий чат и увидел волну комментарий. Десятки сообщений. «Где Proto-контракты?» «Куда вы их дели?» «Почему я не могу найти главную кнопку?»

Я освобождал место. Перенёс кнопку «Proto-контракты» из шапки в блок «Проекты». Логично выглядело. На тестах ошибок нет

Я не проверил одну вещь: к этой кнопке вели восемьдесят процентов сценариев. Не двадцать. Не половина. Восемьдесят.

Это была моя ошибка, и я её не скрываю. Я опрашивал юзеров про важность — и они отвечали в категориях «полезно / не очень». И не смотрел, на то, к чему они обращаются каждый день в своей работе.

08 · УРОК

Где я облажался

ПОСЛЕДСТВИЯ

ПРОВАЛ

07 · РЕШЕНИЕ

Финальное решение

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

Концепт

Создание проекта

Концепт

Страница проекта

09 · ШАБЛОН РЕСУРСА

Универсальный шаблон ресурсов

В IT-CROWD каждый новый тип ресурса — база данных, очередь, бакет, кластер — требовал своей страницы. Дизайнер собирал с нуля, разработчик верстал с нуля. Запуск занимал несколько недель.

Мы с командой спроектировали универсальный шаблон: общая структура (метаданные, настройки, мониторинг, доступы) и конфигурируемые блоки под специфику ресурса. Дизайнер берёт шаблон, добавляет 1−2 блока под свою специфику, отдаёт в разработку.