Smart Balancing — Flex 4

Кросс-платформенное приложение

Аутсорс-проект для шведской компании. Система управления климатом в зданиях. Оборудование подключается к приложению и передаёт данные для анализа и балансировки.

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

3 месяца

аутсорс проект
Figma
Confluence
Smart Balancing — Flex 4 Summary
Изучение требований

Анализ старой версии

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

Smart Balancing — Flex 4 Overview
Базовый сценарий

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

Настройка

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

Данные

После настройки появляются данные. На графиках и в логах видно расхождения между показаниями датчиков и эталонными значениями. Это сразу показывает, всё ли работает корректно и есть ли перерасход энергии.

Smart Balancing — Flex 4 Step
Flex 2

Сборка первой версии

Начали с Flex 2 — упрощённой версии продукта. Задача была не закрыть все сценарии, а нащупать основу и определиться с визуальным направлением. Собрали ключевые экраны и базовую навигацию. Проверили, как интерфейс ведёт себя в реальных сценариях. Посмотрели, что работает, а что требует пересборки. Эта версия стала точкой опоры для дальнейших решений и помогла избежать переделок на поздних этапах.

Smart Balancing — Flex 4 Overview
Поиск датчиков

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

Настройка

Для выбора типа использовал степпер и чипсы. После ревью убрали одноразовые действия вроде «открыть / закрыть клапан» и оставили только основные шаги. График вынес в нижнюю панель. Это упростило экран и сделало сценарий понятнее. Решение опиралось на современные паттерны и реальное поведение пользователей.

Графики

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

Smart Balancing — Flex 4 Step
Планшет

Адаптация для планшета

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

Smart Balancing — Flex 4 Overview
Планшет

Информация доступна сразу. Не нужно переключаться между настройками и графиками. Добавил классические табы для навигации. Так понятнее и привычнее, без путаницы с чипсами.

Логи

Большие объёмы данных читать заметно проще. Навигация всегда перед глазами. Меньше переходов. Меньше лишних действий.

Брендирование

Палитра адаптирована под 15 брендов. Интерфейс автоматически подстраивается под основной цвет бренда. Визуальная целостность сохраняется во всех конфигурациях.

Выводы

  1. Планшет — это не просто большой телефон
  2. Дизайнерские решения работают и в инженерных продуктах
  3. Специализированные приложения ≠ плохой UX/UI
Smart Balancing — Flex 4 Step

Другие проекты

Money tracker – Fynza Project

Money tracker – Fynza

Мой первый iOS-проект: дизайн, разработка и релиз в App Store вместе с маркетологом.

Смотреть Arrow
Monitoring — UAP Project

Monitoring — UAP

Мониторинг для АЭС — это не про интерфейс, а про понимание состояния системы. Проект включал переработку логики, визуализацию 3D-хранилищ и синхронизацию сложных сценариев.

Смотреть Arrow
Habit tracker – Trackly Project

Habit tracker – Trackly

Второй iOS-проект. Простой трекер привычек без перегруза и лишних функций.

Смотреть Arrow