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

IT-CROWD

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

2022-2026

01 · КОНТЕКСТ

О продукте

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

Пользователи

≈ 3000 человек: backend- и frontend-разработчики, QA-инженеры, тимлиды, SRE и ИБ-специалисты. У каждой роли свои сценарии — разработчик создаёт сервис, тимлид мониторит команду, SRE управляет кластером.

Моя роль

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

“

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

Глеб Долгов

02 · ПРОБЛЕМА

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

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

01

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

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

02

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

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

03

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

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

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

04 · ПРОЦЕСС

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

01

DISCOVERY

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

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

02

REDESIGN v1

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

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

03

REDESIGN v2

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

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

04

REDESIGN v3

Новый подход

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

03 · Первое решение

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

Я пересобрал страницу — сократили её высоту, теперь она помещается в 1,5 экрана прокрутки. Это решило первую проблему: искать нужную информацию стало легче.
Но виджетов на странице становилось всё больше, и количество пунктов в горизонтальных табах тоже росло. Так же выбор «Окружения» относился только к 5 табам из 10

04 · Первое решение

Боковое меню

Я пересобрал страницу — сократили её высоту, теперь она помещается в 1,5 экрана прокрутки. Это решило первую проблему: искать нужную информацию стало легче.
Но виджетов на странице становилось всё больше, и количество пунктов в горизонтальных табах тоже росло. Так же выбор «Окружения» относился только к 5 табам из 10

05 · СЕТКА

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

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

Старая сетка

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

Новая сетка

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

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

Если навести на иконку severity, появится расшифровка и дата создания сервиса.

Новый дизайн

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

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

05 · РЕШЕНИЕ

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

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

06 · УРОК

Провал после редизайна

“

Когда мы выкатили вторую версию. Казалось, что все должно пройти просто идеально. Юзабилити исследование, кликабельный прототип, опрос — всё прошло идеально, но когда сделали релиз, получили волну негодования. Всё из-за того, я перенёс кнопку «Proto-контракты» в блок «Проекты», думал — освобождаю место. Оказалось, это главная функция страницы, к ней вели 80% сценариев

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

Глеб Долгов

Lead UX

07 · РЕШЕНИЕ · ШАБЛОН РЕСУРСА

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

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

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