Экраны, в которых люди работают каждый день, а не заходят раз в месяц.
Проектирование интерфейсов для сложных сервисов и внутренних систем
Есть интерфейсы, которые нужно продать, и есть те, в которых нужно работать. Второе устроено иначе: человек уже внутри, он никуда не уйдёт, но каждый лишний клик он повторит триста раз за месяц.
Здесь дизайн — это не оформление, а работа со структурой: какие данные показать сразу, что спрятать, как назвать разделы, что делать при ошибке, как объяснить состояние. Красивая палитра не спасёт таблицу, в которой нельзя найти нужную строку.
Мы проектируем такие интерфейсы и сами их разрабатываем, включая внутренние системы: у нас есть интранет-порталы, которыми ежедневно пользуются более трёх тысяч человек.
Направления
Есть интерфейсы, которые нужно продать, и есть те, в которых нужно работать. Вторые устроены иначе: человек уже внутри и никуда не уйдёт, но каждый лишний клик он повторит триста раз за месяц. Ниже — четыре типа таких интерфейсов.
01
Личные кабинеты
Пространство клиента: статусы, документы, оплаты, обращения. Задача — чтобы человек находил ответ сам и не писал в поддержку по каждому вопросу. Задача — чтобы человек находил ответ сам и не писал в поддержку по каждому вопросу. Значительная часть обращений порождается не сложностью, а невнятными статусами, поэтому их проектируем отдельно.
02
Админки и панели управления
Внутренние инструменты, где скорость важнее эффектности. Здесь окупается каждый убранный шаг: операцию повторяют десятки раз в день. Каждый убранный шаг окупается: операцию повторяют десятки раз в день. Мы считаем шаги до и после — это единственный честный способ показать результат.
03
Дашборды и отчётность
Экраны, на которых руководитель за минуту понимает положение дел. Главная работа — решить, чего на экране быть не должно. Главная работа здесь — решить, чего на экране быть не должно. Показатель, который никто не использует для решений, только мешает увидеть важное.
04
Порталы и интранет
Системы для сотрудников: заявки, согласования, справочники, база знаний. Отдельная сложность — роли: разные люди должны видеть разное. Отдельная сложность — роли: разные люди должны видеть разное, и ошибка тут дороже любой другой. Матрицу доступа согласуем письменно до проектирования экранов.
опыт
Работаем с системами, где интерфейсом пользуются ежедневно и помногу
Реализовали и поддерживаем интранет системы, которыми пользуются более 3 000 человек
01
Входим в Топ-3 разработчиков России в стеке Nuxt.js по версии Рейтинг Рунета 2025
02
II место в срезе студий разработки в сфере Юридические услуги и консалтинг по версии Рейтинг Рунета 2025
03
Успешно запустили крупный eCommerce с более чем 37 000 SKU
04
Разработали и поддерживаем собственную административную систему на стеке Node.js
05
Что это даёт
В рабочих интерфейсах эффект считается в сэкономленном времени сотрудников, а не в впечатлении от оформления. Величина измеримая: сколько шагов и минут занимает операция сейчас и сколько после. Ниже — где эта разница возникает.
Операции становятся короче
Действие, которое занимало шесть шагов, начинает занимать два. Умножьте на число повторений в месяц — это и есть измеримый результат работы. Действие из шести шагов начинает занимать два, и это умножается на число повторений в месяц. Такой результат виден в цифрах, а не в ощущениях.
Меньше ошибок
Понятные формы, внятные подтверждения и честные сообщения об ошибках снижают число неверных вводов, а значит и время на их исправление. Понятные формы и честные сообщения об ошибках снижают число неверных вводов. Вместе с ними уходит и время на исправление, которое обычно никто не считает.
Быстрее вводятся новые сотрудники
Если система понятна без инструкции, обучение занимает часы вместо недель. Для команд с текучестью это ощутимая экономия. Если система понятна без инструкции, обучение занимает часы вместо недель. Для команд с текучестью это освобождает время опытных сотрудников.
Систему можно развивать
Компоненты и правила заданы, поэтому новый раздел не требует нового дизайн-проекта и не выглядит чужим. Новый раздел собирается из готовых компонентов и не выглядит чужим. Это удерживает систему от расползания, когда над ней работают разные люди.
Этапы
Начинаем не с экранов, а с того, как работают люди: структура и права здесь важнее оформления. Ошибка в правах доступа обходится дороже любой ошибки в интерфейсе, поэтому её мы согласуем письменно и первой.
01
Разбор процессов и ролей
Смотрим, кто и что делает в системе, где сейчас теряется время. Часто выясняется, что половина проблем решается не дизайном, а изменением самого процесса, — об этом мы говорим прямо. Часто выясняется, что половина проблем решается не дизайном, а изменением самого процесса, — и мы говорим об этом прямо. Отменённое согласование ускоряет работу дешевле любого интерфейса.
02
Структура и права
Раскладываем разделы, роли и доступы. В корпоративных системах это самая ответственная часть: ошибка здесь дороже любой ошибки в оформлении. В корпоративных системах это самая ответственная часть: ошибку в правах исправлять дороже всего. Матрицу согласуем письменно, потому что устные договорённости здесь всегда расходятся.
03
Прототипы ключевых сценариев
Собираем в схемах те операции, которые повторяются чаще всего, и считаем в них шаги. Считаем шаги в операциях, которые повторяются чаще всего, и фиксируем цифры до начала работы. По ним потом и проверяем результат.
04
Дизайн и состояния
Оформляем экраны и прорабатываем состояния: пустые списки, загрузка, отказ в доступе, ошибки, длинные значения, тысячи строк в таблице. Пустые списки, загрузка, отказ в доступе, длинные значения, тысячи строк в таблице — всё это проектируется отдельно. На реальных объёмах интерфейс ведёт себя не так, как на демонстрационных данных.
05
Внедрение
Передаём компоненты, сопровождаем разработку и смотрим на систему после запуска: в рабочих интерфейсах самые полезные правки видны только на реальных данных. После запуска смотрим на систему на реальных данных: самые полезные правки видны только там. Компоненты и документацию передаём вашей команде.
В чём работаем
Технологии
Дизайн
Figma
Дизайн-системы
Прототипы
Работа с таблицами и данными
Реализация
Vue.js
Nuxt.js
TypeScript
Node.js
Интеграции
CRM
ERP
1С
Внутренние базы данных
Кому это подходит
Чем больше людей работает в системе, тем сильнее окупается проектирование: экономия минуты умножается на число сотрудников и повторений. Ниже — случаи, в которых мы видим это чаще всего.
Компаниям с большим штатом
Когда в системе работают сотни человек, экономия минуты на операции превращается в заметные цифры. У нас есть опыт систем на три тысячи с лишним пользователей. Экономия минуты на операции превращается в заметные цифры, когда в системе работают сотни человек. У нас есть опыт систем, которыми ежедневно пользуются более трёх тысяч сотрудников.
Сервисам с личным кабинетом
Когда клиент может решить вопрос сам, поддержка перестаёт быть узким местом. Когда клиент решает вопрос сам, поддержка перестаёт быть узким местом. Это же снижает нагрузку на менеджеров в пиковые периоды.
Профессиональным практикам
Юридическим, бухгалтерским и консалтинговым компаниям, где интерфейс работает с чувствительными данными и сложными статусами. Интерфейс здесь работает с чувствительными данными и сложными статусами, поэтому разграничение доступа проектируется до экранов. Мы работаем с этим сегментом постоянно и знаем его ограничения.
Продуктам, переросшим таблицы
Когда учёт живёт в разросшихся таблицах и переписке, первый шаг — не написать код, а спроектировать нормальный интерфейс. Когда учёт живёт в разросшихся таблицах и переписке, первым шагом должен быть не код, а нормальная структура. Иначе автоматизируется беспорядок.
Образовательная платформа «EdPRO»(топ-3 рынка дополнительного образования России), приложение для сопровождения бухгалтерского учета «ЦСБ», сервис AI-ассистентов Neuralismo.ru, GPT-based ассистент для здорового питания CalMePlease
Результаты клиентов
Продажи растут, прибыль тоже. Сильно подросли продажи сегмента мужской одежды. Сайт стал гораздо красивее, в нем стал удобнее поиск для клиентов. Лично для меня огромный плюс, что стало удобно пользоваться админкой. Она легчайшая, простейшая, просто подарок для маркетолога ― двигаешь что хочешь и куда хочешь.
Наши ожидания от работы полностью оправдались. Ребята проявили профессионализм, креативность и ответственность в выполнении задач. Мы сотрудничаем до сих пор ― улучшаем функционал, вносим новые фишки в сайт и приложение.
Оцениваем сайт высоко. Скорость работы сайта, качество и плавность анимаций, общий стиль и выделение на фоне остальных - круто Конверсия хорошая. Сайт конвертирует реальные заявки и ещё были звонки и переходы в наши мессенджеры
Богдан Царелунга
Руководитель маркетинга Lobster Group
Ребята подошли к задаче комплексно, сначала изучили ЦА, аналоги, продумали сценарии. Использовали Flutter и это большой плюс тк проект получился кроссплатформенным, технологически свежим, и что важно, легко поддерживаемым. Приложением ежедневно пользуются наши студенты. Огромное спасибо всей команде. Крутая работа, классный кейс
Марат Шаниязов
CTO Международной академии EDPRO
Нам нравится сайт) Мы также получаем положительную обратную связь: стильный, лаконичный, точный. Дотьюнили контент и будем менять некоторые стоковые визуалы. Вероятно изменим цвет кнопки на главном экране, но пока оставили оранжевый) Спасибо за работу!
Алена Шукалович
Директор по развитию Kaloy.ru
Продажи растут, прибыль тоже. Сильно подросли продажи сегмента мужской одежды. Сайт стал гораздо красивее, в нем стал удобнее поиск для клиентов. Лично для меня огромный плюс, что стало удобно пользоваться админкой. Она легчайшая, простейшая, просто подарок для маркетолога ― двигаешь что хочешь и куда хочешь.
Наши ожидания от работы полностью оправдались. Ребята проявили профессионализм, креативность и ответственность в выполнении задач. Мы сотрудничаем до сих пор ― улучшаем функционал, вносим новые фишки в сайт и приложение.
Оцениваем сайт высоко. Скорость работы сайта, качество и плавность анимаций, общий стиль и выделение на фоне остальных - круто Конверсия хорошая. Сайт конвертирует реальные заявки и ещё были звонки и переходы в наши мессенджеры
Богдан Царелунга
Руководитель маркетинга Lobster Group
Ребята подошли к задаче комплексно, сначала изучили ЦА, аналоги, продумали сценарии. Использовали Flutter и это большой плюс тк проект получился кроссплатформенным, технологически свежим, и что важно, легко поддерживаемым. Приложением ежедневно пользуются наши студенты. Огромное спасибо всей команде. Крутая работа, классный кейс
Марат Шаниязов
CTO Международной академии EDPRO
Нам нравится сайт) Мы также получаем положительную обратную связь: стильный, лаконичный, точный. Дотьюнили контент и будем менять некоторые стоковые визуалы. Вероятно изменим цвет кнопки на главном экране, но пока оставили оранжевый) Спасибо за работу!
Алена Шукалович
Директор по развитию Kaloy.ru
Частые вопросы
Частые вопросы о проектировании интерфейсов.
01
У нас старая система, её нужно переделывать целиком?
Не обязательно. Часто разумнее начать с одного-двух самых нагруженных экранов: результат виден быстро, а риск для работающего процесса минимален. Полную переделку имеет смысл затевать, когда мешает сама структура.
02
Как вы работаете с ролями и правами?
Проектируем интерфейс от роли: что человек видит, что может изменить, чего не должен видеть вовсе. Это описывается до дизайна экранов, иначе потом приходится переделывать и то, и другое. Изменение прав делает администратор, без обращения к разработчикам и без нового релиза.
03
Нужно ли отвлекать наших сотрудников?
Немного — и это лучшее вложение времени в проекте. Несколько разговоров с теми, кто работает в системе каждый день, дают больше, чем месяц догадок. Обычно достаточно нескольких разговоров по часу — это лучшее вложение времени в проекте.
04
Что с мобильной версией внутренней системы?
Смотрим по задаче. Полностью адаптировать админку редко нужно, но отдельные сценарии — согласование, заявка, просмотр статуса — на телефоне действительно требуются. Мы честно скажем, если полная адаптация админки вам не нужна, и предложим ограничиться отдельными сценариями.
05
Вы делаете и разработку?
Да, включая интеграции с CRM, ERP и 1С. Можно взять только проектирование, если разработку ведёт ваша команда. Если разработку ведёт ваша команда, передаём компоненты с описанным поведением и остаёмся на связи.
06
Как понять, что стало лучше?
До работы фиксируем, сколько шагов и времени занимают ключевые операции, после — измеряем снова. Это честнее любых рассуждений о том, что интерфейс стал удобнее. Показатели фиксируем письменно до начала работ, чтобы сравнение было честным.