Ostral
Веб-платформа — UX/UI, Визуализация Данных, Прототипирование
Ostral
обзор
Ostral — веб-платформа для управления инспекционными программами и контроля рисков на промышленных объектах нефтепереработки. Разработана для Hillsec — инжиниринговой компании, специализирующейся на техническом обслуживании объектов нефтехимической и масложировой промышленности
Главный вызов проекта — высокая плотность данных. Тысячи геолоцированных дефектов, многоуровневая аналитика рисков, сложные таблицы с фильтрацией. Задача дизайна — не просто отобразить данные, а помочь пользователю быстро ориентироваться в них
Роль
UX/UI Дизайнер
Основные задачи
UX/UI дизайн веб-платформы, визуализация данных, прототипирование
Команда
UX/UI дизайнер, менеджер проекта
Сроки
1 месяц
Описание задачи
Инженерная команда Hillsec работала в разрозненных инструментах — дефекты в таблицах, карты объектов в отдельных системах, отчёты по электронной почте. При тысячах привязанных к карте дефектов и многоуровневой аналитике рисков это делало невозможным быстрое принятие решений
Цель проекта — спроектировать продвинутый MVP платформы, достаточный чтобы показать клиенту реальную ценность инструмента. В рамках проекта был разработан интерактивный прототип со всеми ключевыми экранами и взаимодействиями
Пользователи
Платформа обслуживает разные роли — от инженера на объекте до руководителя, принимающего бюджетные решения. Понимание их целей и контекста работы стало основой для проектирования навигации и приоритизации данных
персона №1
Марк, 42
старший инженер-инспектор
Проводит большую часть времени непосредственно на объектах. Работает в условиях высокой плотности данных — ему важна скорость навигации и чёткая визуальная иерархия
локация
Клайпеда
Устройство
планшет на объекте, desktop в офисе
МотивациЯ
быстро находить критичные дефекты и принимать решения без переключения между инструментами
Боли
данные разбросаны по разным системам, нет единой картины объекта
персона №2
Анна, 38
менеджер по техническому обслуживанию
Принимает решения о бюджете и приоритетах ремонта. Не погружается в детали каждого дефекта — ей нужна общая картина и динамика рисков
локация
Вильнюс
Устройство
работает с desktop, на выездах со смартфона
МотивациЯ
понимать состояние объекта и обосновывать бюджет на ремонт без звонков инженерам
Боли
статус инспекций приходит только через почту и всегда с задержкой
персона №3
Томас, 47
руководитель инспекционных программ
Координирует работу инженерных команд и следит за выполнением инспекционных кампаний в срок. Отвечает за коммуникацию с клиентом и подготовку финальных отчётов и пакетов документации
локация
Клайпеда
Устройство
desktop в офисе, смартфон на выездах
МотивациЯ
держать все кампании под контролем и вовремя сдавать документацию клиенту без ручного сбора данных
Боли
статус кампаний приходится собирать вручную из разных источников, легко пропустить дедлайн
Проектирование UX-флоу
Перед проектированием интерфейсов был разработан пользовательский флоу для трёх ролей — инженера, менеджера и руководителя программ. Это помогло определить ключевые сценарии и точки принятия решений в каждом модуле платформы
Диаграмма флоу
Экраны ключевых интерфейсов
На основе UX-флоу были разработаны интерфейсы для трёх пользовательских сценариев: инспектор работает с картой находок и карточками дефектов, менеджер анализирует риски и принимает решения по эскалации, руководитель программ контролирует ход кампаний и формирует отчётную документацию
АВТОРИЗАЦИЯ
дашборд
Карта объекта
КАРТА — ФИЛЬТРАЦИЯ ПО УЧАСТКУ
АНАЛИТИКА — РИСКИ ПО УЧАСТКАМ
АНАЛИТИКА — РИСКИ ПО МАТЕРИАЛАМ
АНАЛИТИКА — ПРОГНОЗ РИСКОВ
ПРОГРЕСС КАМПАНИЙ
ДОКУМЕНТАЦИЯ
Заключение
Ostral — мой первый опыт проектирования насыщенного данными B2B продукта. За месяц, в плотной связке с менеджером проекта, прошли полный цикл — от разбора требований с клиентом и проектирования UX-логики до финального UI. Три разных пользователя потребовали трёх разных подходов к подаче информации — карта для инспектора, аналитика для менеджера, прогресс для руководителя программ
Проектирование data-heavy интерфейсов научило выстраивать жёсткую визуальную иерархию — убирать всё что не помогает пользователю принять решение. Работа в условиях жёстких сроков и чётких требований клиента научила находить баланс между идеальным решением и реальными ограничениями. Погружение в промышленный контекст показало — без понимания предметной области невозможно принимать правильные дизайн-решения
Смотрите также
крипто-обменник
E-commerce платформа
Приложение для растений
дизайн-система
логотип и Айдентика
Ostral
Веб-платформа — UX/UI, Визуализация Данных, Прототипирование
Ostral
обзор
Ostral — веб-платформа для управления инспекционными программами и контроля рисков на промышленных объектах нефтепереработки. Разработана для Hillsec — инжиниринговой компании, специализирующейся на техническом обслуживании объектов нефтехимической и масложировой промышленности
Главный вызов проекта — высокая плотность данных. Тысячи геолоцированных дефектов, многоуровневая аналитика рисков, сложные таблицы с фильтрацией. Задача дизайна — не просто отобразить данные, а помочь пользователю быстро ориентироваться в них
Роль
UX/UI Дизайнер
Основные задачи
UX/UI дизайн веб-платформы, визуализация данных, прототипирование
Команда
UX/UI дизайнер, менеджер проекта
Сроки
1 месяц
Описание задачи
Инженерная команда Hillsec работала в разрозненных инструментах — дефекты в таблицах, карты объектов в отдельных системах, отчёты по электронной почте. При тысячах привязанных к карте дефектов и многоуровневой аналитике рисков это делало невозможным быстрое принятие решений
Цель проекта — спроектировать продвинутый MVP платформы, достаточный чтобы показать клиенту реальную ценность инструмента. В рамках проекта был разработан интерактивный прототип со всеми ключевыми экранами и взаимодействиями
Пользователи
Платформа обслуживает разные роли — от инженера на объекте до руководителя, принимающего бюджетные решения. Понимание их целей и контекста работы стало основой для проектирования навигации и приоритизации данных
персона №1
Марк, 42
старший инженер-инспектор
Проводит большую часть времени непосредственно на объектах. Работает в условиях высокой плотности данных — ему важна скорость навигации и чёткая визуальная иерархия
локация
Клайпеда
Устройство
планшет на объекте, desktop в офисе
МотивациЯ
быстро находить критичные дефекты и принимать решения без переключения между инструментами
Боли
данные разбросаны по разным системам, нет единой картины объекта
персона №2
Анна, 38
менеджер по техническому обслуживанию
Принимает решения о бюджете и приоритетах ремонта. Не погружается в детали каждого дефекта — ей нужна общая картина и динамика рисков
локация
Вильнюс
Устройство
работает с desktop, на выездах со смартфона
МотивациЯ
понимать состояние объекта и обосновывать бюджет на ремонт без звонков инженерам
Боли
статус инспекций приходит только через почту и всегда с задержкой
персона №3
Томас, 47
руководитель инспекционных программ
Координирует работу инженерных команд и следит за выполнением инспекционных кампаний в срок. Отвечает за коммуникацию с клиентом и подготовку финальных отчётов и пакетов документации
локация
Клайпеда
Устройство
desktop в офисе, смартфон на выездах
МотивациЯ
держать все кампании под контролем и вовремя сдавать документацию клиенту без ручного сбора данных
Боли
статус кампаний приходится собирать вручную из разных источников, легко пропустить дедлайн
Проектирование UX-флоу
Перед проектированием интерфейсов был разработан пользовательский флоу для трёх ролей — инженера, менеджера и руководителя программ. Это помогло определить ключевые сценарии и точки принятия решений в каждом модуле платформы
Диаграмма флоу
Экраны ключевых интерфейсов
На основе UX-флоу были разработаны интерфейсы для трёх пользовательских сценариев: инспектор работает с картой находок и карточками дефектов, менеджер анализирует риски и принимает решения по эскалации, руководитель программ контролирует ход кампаний и формирует отчётную документацию
АВТОРИЗАЦИЯ
дашборд
Карта объекта
КАРТА — ФИЛЬТРАЦИЯ ПО УЧАСТКУ
АНАЛИТИКА — РИСКИ ПО УЧАСТКАМ
АНАЛИТИКА — РИСКИ ПО МАТЕРИАЛАМ
АНАЛИТИКА — ПРОГНОЗ РИСКОВ
ПРОГРЕСС КАМПАНИЙ
ДОКУМЕНТАЦИЯ
Заключение
Ostral — мой первый опыт проектирования насыщенного данными B2B продукта. За месяц, в плотной связке с менеджером проекта, прошли полный цикл — от разбора требований с клиентом и проектирования UX-логики до финального UI. Три разных пользователя потребовали трёх разных подходов к подаче информации — карта для инспектора, аналитика для менеджера, прогресс для руководителя программ
Проектирование data-heavy интерфейсов научило выстраивать жёсткую визуальную иерархию — убирать всё что не помогает пользователю принять решение. Работа в условиях жёстких сроков и чётких требований клиента научила находить баланс между идеальным решением и реальными ограничениями. Погружение в промышленный контекст показало — без понимания предметной области невозможно принимать правильные дизайн-решения
Смотрите также
крипто-обменник
E-commerce платформа
Приложение для растений
дизайн-система
логотип и Айдентика
Ostral
Веб-платформа — UX/UI, Визуализация Данных, Прототипирование
Ostral
обзор
Ostral — веб-платформа для управления инспекционными программами и контроля рисков на промышленных объектах нефтепереработки. Разработана для Hillsec — инжиниринговой компании, специализирующейся на техническом обслуживании объектов нефтехимической и масложировой промышленности
Главный вызов проекта — высокая плотность данных. Тысячи геолоцированных дефектов, многоуровневая аналитика рисков, сложные таблицы с фильтрацией. Задача дизайна — не просто отобразить данные, а помочь пользователю быстро ориентироваться в них
Роль
UX/UI Дизайнер
Основные задачи
UX/UI дизайн веб-платформы, визуализация данных, прототипирование
Команда
UX/UI дизайнер, менеджер проекта
Сроки
1 месяц
Описание задачи
Инженерная команда Hillsec работала в разрозненных инструментах — дефекты в таблицах, карты объектов в отдельных системах, отчёты по электронной почте. При тысячах привязанных к карте дефектов и многоуровневой аналитике рисков это делало невозможным быстрое принятие решений
Цель проекта — спроектировать продвинутый MVP платформы, достаточный чтобы показать клиенту реальную ценность инструмента. В рамках проекта был разработан интерактивный прототип со всеми ключевыми экранами и взаимодействиями
Пользователи
Платформа обслуживает разные роли — от инженера на объекте до руководителя, принимающего бюджетные решения. Понимание их целей и контекста работы стало основой для проектирования навигации и приоритизации данных
персона №1
Марк, 42
старший инженер-инспектор
Проводит большую часть времени непосредственно на объектах. Работает в условиях высокой плотности данных — ему важна скорость навигации и чёткая визуальная иерархия
локация
Клайпеда
Устройство
планшет на объекте, desktop в офисе
МотивациЯ
быстро находить критичные дефекты и принимать решения без переключения между инструментами
Боли
данные разбросаны по разным системам, нет единой картины объекта
персона №2
Анна, 38
менеджер по техническому обслуживанию
Принимает решения о бюджете и приоритетах ремонта. Не погружается в детали каждого дефекта — ей нужна общая картина и динамика рисков
локация
Вильнюс
Устройство
работает с desktop, на выездах со смартфона
МотивациЯ
понимать состояние объекта и обосновывать бюджет на ремонт без звонков инженерам
Боли
статус инспекций приходит только через почту и всегда с задержкой
персона №3
Томас, 47
руководитель инспекционных программ
Координирует работу инженерных команд и следит за выполнением инспекционных кампаний в срок. Отвечает за коммуникацию с клиентом и подготовку финальных отчётов и пакетов документации
локация
Клайпеда
Устройство
desktop в офисе, смартфон на выездах
МотивациЯ
держать все кампании под контролем и вовремя сдавать документацию клиенту без ручного сбора данных
Боли
статус кампаний приходится собирать вручную из разных источников, легко пропустить дедлайн
Проектирование UX-флоу
Перед проектированием интерфейсов был разработан пользовательский флоу для трёх ролей — инженера, менеджера и руководителя программ. Это помогло определить ключевые сценарии и точки принятия решений в каждом модуле платформы
Диаграмма флоу
Экраны ключевых интерфейсов
На основе UX-флоу были разработаны интерфейсы для трёх пользовательских сценариев: инспектор работает с картой находок и карточками дефектов, менеджер анализирует риски и принимает решения по эскалации, руководитель программ контролирует ход кампаний и формирует отчётную документацию
АВТОРИЗАЦИЯ
дашборд
Карта объекта
КАРТА — ФИЛЬТРАЦИЯ ПО УЧАСТКУ
АНАЛИТИКА — РИСКИ ПО УЧАСТКАМ
АНАЛИТИКА — РИСКИ ПО МАТЕРИАЛАМ
АНАЛИТИКА — ПРОГНОЗ РИСКОВ
ПРОГРЕСС КАМПАНИЙ
ДОКУМЕНТАЦИЯ
Заключение
Ostral — мой первый опыт проектирования насыщенного данными B2B продукта. За месяц, в плотной связке с менеджером проекта, прошли полный цикл — от разбора требований с клиентом и проектирования UX-логики до финального UI. Три разных пользователя потребовали трёх разных подходов к подаче информации — карта для инспектора, аналитика для менеджера, прогресс для руководителя программ
Проектирование data-heavy интерфейсов научило выстраивать жёсткую визуальную иерархию — убирать всё что не помогает пользователю принять решение. Работа в условиях жёстких сроков и чётких требований клиента научила находить баланс между идеальным решением и реальными ограничениями. Погружение в промышленный контекст показало — без понимания предметной области невозможно принимать правильные дизайн-решения
Смотрите также
крипто-обменник
E-commerce платформа
Приложение для растений
Дизайн-Система
логотип и Айдентика