Как корпоративный портал Riche пересобрали за две недели
Портал рос стихийно: навигация превратилась в плоский список, статусы приходилось вычитывать. За две недели пересобрали навигацию, шесть ключевых экранов и UI Kit со светлой и тёмной темой.
01
Задача
Работа есть, найти её сложно
Портал рос стихийно: сотрудники искали, где находится работа, а у экранов были свои правила.
Работа теряется в навигации
Сотрудники тратили время не на работу, а на поиск того, где она находится.
Статусы приходилось вычитывать
Статусы приходилось вычитывать, а не считывать.
У каждого экрана — свои правила
У каждого экрана — свои отступы, таблицы и цвета.
Интерфейс должен показывать работу, а не прятать её в меню.
02
Решение
Те же экраны, новая логика
Пересобрали логику ключевых экранов и сделали тёмную тему частью системы.
До и после: «Все задачи»
Сначала логика, потом пиксели.
Светлая и тёмная темы
Тёмная тема — свойство системы, а не второй комплект макетов.
Сначала навели порядок в логике — и только потом взялись за визуал.
03
Сначала логика, потом пиксели
Сначала логика, потом пиксели
Десятки страниц сгруппировали в разделы и пересобрали сайдбар — вместо плоского списка.
Новый сайдбар
Десятки страниц сгруппировали в разделы и пересобрали сайдбар.
Разделы задач
Навигация по разделам вместо плоского списка.
Было: навигация старого портала
Портал рос стихийно: навигация превратилась в плоский список из десятков пунктов.
Раздел находится по смыслу, а не прокруткой длинного списка.
04
Шесть ключевых экранов
Шесть экранов, одна логика
Таблицы, доски и продукты: главное — крупно, второстепенное — по запросу.
Таблицы с иерархией
Главное — крупно, второстепенное — по запросу.
Мои доски
«Мои доски» — один из шести ключевых экранов.
Продукты
«Продукты» и «Изменить продукт» адаптировали под мобильные.
Таблица не обязана показывать всё сразу — только то, что нужно сейчас.
05
UI Kit вместо стопки макетов
UI Kit вместо стопки макетов
Палитра по цветам логотипа, статусы цветом и формой, компоненты — сразу в двух темах.
Статусы цветом и формой
Статусы читаются цветом и формой — в светлой и тёмной теме.
SLA и средний рейтинг
Ключевой экран в тёмной теме — из тех же компонентов.
Одна система — две темы
Палитру собрали по цветам логотипа, компоненты — в светлой и тёмной темах.
Новый экран собирается из готовых компонентов — и сразу работает в обеих темах.
Расчёт стоимости
Нужно навести порядок в рабочем интерфейсе?
Пара минут и несколько простых вопросов — и у вас на руках расчет: что делаем, когда запускаем и сколько это стоит