ERP · Web + Mobile · UI-kit

VasilisaСценарии для desktop и mobile

Vasilisa — ERP-система для электронного документооборота и внутренних согласований. При обновлении продукта важно было сохранить знакомую структуру, но пересмотреть работу на смартфоне.

Продукт
ERP-платформа
Задача
Разделить сценарии по устройствам
Моя работа
UX/UI · Адаптив · UI-кит

Почему mobile нельзя было делать копией desktop

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

Что оставили только в desktop

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

Как система работает на разных устройствах

Desktop используется для работы с проектом и большим объёмом данных. Mobile — для последовательного просмотра заявки и принятия решения.

Карточка проекта Vasilisa в desktop-версии
DesktopКарточка проекта: заявка, участники и связанные разделы остаются в одном рабочем пространстве.
Согласование оплаты подрядчику в мобильной версии Vasilisa
MobileСогласование оплаты собрано в вертикальный сценарий с данными заявки, счетами и итоговыми действиями.

Компоненты для обеих версий

Общая база связывает desktop и mobile: навигацию, поля, формы, состояния, цвета для данных и графики не приходится проектировать заново для каждого сценария.

Варианты боковой навигации Vasilisa
Боковая навигация и её состояния
Цвета и графики UI-кита Vasilisa
Цветовая шкала и компоненты графиков

Какие части ERP были проработаны

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

Dashboard ERP-системы Vasilisa
Dashboard: задачи, проекты и показатели
  1. 01Dashboard и задачи
  2. 02Карточка проекта
  3. 03Согласование оплаты
  4. 04Заявка на зарплату
  5. 05Фактическая оплата
  6. 06Аккредитация подрядчика
  7. 07Согласование сметы
  8. 08Передача проекта
  9. 09Завершение проекта
  10. 10Заявки на премию, аванс и штраф

Сценарии по устройствам и общая компонентная база

Для mobile определили отдельный набор функций и переработали их поведение. Для desktop и смартфона собрали общие компоненты и правила, а также проработали основные экраны и модальные состояния ERP.

  • Разделены desktop- и mobile-функции
  • Переработаны мобильные согласования
  • Собраны UI-кит и компонентная база
Посмотреть макет в Figma ↗
Откроется в новой вкладке