Кейс: как мы проектировали интерфейс SaaS-платформы Arental — роли, дашборды и три языка

Проектирование интерфейса Arental — системы управления арендной недвижимостью — строилось вокруг одной задачи: сделать сложный продукт с 40+ модулями понятным для четырёх очень разных пользователей. Директору нужна картина бизнеса за несколько секунд, менеджеру — список дел по его зданиям, бухгалтеру — точные цифры, арендатору — баланс и кнопка оплаты. В этом кейсе рассказываем, какие решения мы принимали и почему, без выдуманных метрик — только логика проектирования.

Исходная задача

Arental заменяет набор инструментов, которыми арендный бизнес обычно пользуется одновременно: Excel-таблицы, папки с договорами, банковские выписки, тетради с показаниями счётчиков и чаты в Telegram. Значит, интерфейс должен был не просто «показать данные», а собрать в одном месте разные рабочие процессы — и при этом не превратиться в перегруженную панель управления, в которой страшно нажать на кнопку.

Мы сформулировали для себя три принципа:

1. Каждая роль видит своё. Не урезанная версия общего экрана, а интерфейс, собранный под задачи конкретного человека.
2. Данные связаны, и это видно. Из карточки помещения — к договору, из договора — к платежам, из платежа — к арендатору.
3. Сначала ответ, потом детали. Главные цифры — сразу на экране, таблицы и фильтры — на шаг глубже.

Четыре роли — четыре сценария

Самое важное решение было принято ещё до первых макетов: мы проектировали не «систему с правами доступа», а четыре разных опыта использования.

Директор

Директор открывает систему, чтобы за минуту понять, всё ли в порядке. Его главный экран — дашборд с KPI по фонду: занятость, доходы, расходы, прибыль, долги. На лендинге продукта это сформулировано так: решения принимаются на цифрах, а не на «кажется». Отдельные блоки — финансы, занятость по портфелю и управление командой: кто что видит и делает.

Менеджер

Менеджер работает «на земле»: показы, договоры, арендаторы, работники. Ключевой приём — он видит только закреплённые за ним здания. Это не только вопрос безопасности, но и вопрос фокуса: в интерфейсе нет чужих объектов, которые отвлекают и путают. Рабочий стол менеджера построен вокруг дня: свободные объекты, визиты, истекающие договоры, новые заявки.

Бухгалтер

Для бухгалтера важна точность и скорость рутинных операций: подтверждение и сверка платежей, расходы по категориям с привязкой к объектам, счётчики и тарифы, отчёты в xlsx и PDF. Здесь мы сознательно отдали приоритет таблицам и фильтрам — бухгалтеру нужно видеть много строк сразу, а не красивые карточки.

Арендатор

Арендатор — самый «случайный» пользователь: он не обучен работе с системой и заходит редко. Поэтому его кабинет максимально простой: баланс и история платежей, оплата, заявки на ремонт с фото и статусом, документы — договор, акты, квитанции. Значительная часть этого сценария вынесена в Telegram-бот, потому что именно там арендатор и так проводит время.

Хороший B2B-интерфейс — это не один экран для всех с разными галочками доступа, а несколько продуктов на общей базе данных.

Дашборды: от цифр к действиям

Дашборд легко превратить в витрину графиков, на которые никто не смотрит. Мы проектировали его как список ответов на конкретные вопросы и сразу — следующих действий:

• занятость портфеля — с переходом к списку свободных помещений;
• долги — с переходом к списку должников;
• истекающие договоры — с переходом к карточке договора для продления;
• динамика доходов и расходов — с разбивкой по зданиям и категориям;
• быстрые действия: добавить платёж, расход, объект или арендатора.

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

Навигация по 40+ модулям

Сорок модулей в одном меню — верный способ потерять пользователя. Мы сгруппировали их по смыслу: объекты, арендаторы и договоры, деньги, счётчики, команда, документы, аналитика, настройки. Плюс глобальный поиск по объектам, арендаторам и договорам и быстрые переходы — опытные пользователи перемещаются по системе, не открывая меню вовсе.

Ещё один приём — единые статусы с цветом и текстом: помещение «свободно», «в аренде», «долг», «архив»; платёж «оплачен», «ожидает», «частично», «просрочен»; договор «активен», «истекает», «на подписании». Статус всегда подписан словом, а не только цветом, — это важно для доступности и для печати.

Три языка — это не перевод, а адаптация

Arental работает на русском, узбекском (кириллица и латиница) и английском. На практике это означало несколько дизайнерских решений:

• Запас по длине. Узбекские и английские формулировки часто длиннее русских или короче — кнопки, заголовки таблиц и метки проектировались с учётом самого длинного варианта.
• Язык на уровне пользователя. Сотрудник управляющей компании может работать на русском, а арендатор получать уведомления и квитанции на узбекском — по данным сайта, сообщения уходят на языке, выбранном в профиле.
• Форматы. Суммы в сумах, даты, единицы измерения (м², кВт, м³) — единообразно во всех языках.
• Переключение в один клик без перезагрузки рабочего контекста.

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

Формы, импорт и мобильный сценарий

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

Отдельное внимание — первому запуску. Пустая система пугает, поэтому важны импорт данных из CSV и подсказки «что сделать дальше». А поскольку менеджеры часто работают на объекте, а не за столом, ключевые сценарии — посмотреть свободные помещения, внести показание, проверить статус платежа — должны быть удобны и с телефона.

Визуальный язык

Для B2B-продукта, в котором проводят по несколько часов в день, мы выбрали спокойный визуальный язык: сдержанная оливково-зелёная основная гамма, много воздуха, чёткая типографика для цифр, светлая и тёмная темы. Акцентные цвета зарезервированы под статусы — чтобы просрочка или истекающий договор бросались в глаза, а не тонули среди декоративных элементов. Лендинг продукта говорит на том же языке и сразу показывает интерфейс: дашборд, платежи, счётчики.

Telegram как часть интерфейса

В Узбекистане Telegram — основной мессенджер и для бизнеса, и для частных лиц. Поэтому мы рассматривали бота не как «дополнительную интеграцию», а как полноценный канал продукта: уведомления, квитанции, баланс, оплата и заявки для арендаторов. Это требовало согласования текстов и сценариев между веб-интерфейсом и ботом, чтобы арендатор видел одни и те же статусы и суммы в обоих местах.

Чему нас научил этот проект

• Проектировать от ролей, а не от модулей. Модули — это внутренняя логика системы, роли — то, как ею пользуются люди.
• Делать статусы главным визуальным сигналом. В учётной системе цвет должен сообщать о проблеме, а не украшать.
• Закладывать локализацию с первого макета, а не после релиза.
• Проектировать пустые состояния так же внимательно, как заполненные: первое впечатление пользователя — это пустая система.
• Встраиваться в каналы, которыми люди уже пользуются, вместо того чтобы заставлять их осваивать новые.

Этот опыт мы применяем и в клиентских проектах: если вы планируете сложный веб-сервис, личный кабинет или внутреннюю систему, команда Dasta Creative проектирует интерфейсы в рамках услуги веб-дизайна — с той же логикой ролей, сценариев и локализации.