Всё на своих местах: как редизайн ATM Soft выстроил новые рабочие маршруты для инженеров терминалов

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

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

Опираясь на проведённые исследования, мы внедрили изменения, которые напрямую влияют на скорость и качество работы.

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

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

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

Что мы сделали:

1. Объединили все заявки в один раздел с гибкими «умными» фильтрами (чекбоксы, мультивыбор) вместо большого набора вкладок;

2. Чётко сгруппировали функции по блокам;

3. Вынесли ключевые действия на главный экран и сократили количество шагов к второстепенным разделам;

4. Заложили архитектуру для офлайн-работы, определив, какие данные и функции должны быть доступны без сети.

Цель: Определить структуру, расположение элементов и логику взаимодействия для ключевых экранов.

Что сделано:

1. Создали чёрно-белые схемы ключевых экранов;

2. Распределили весь контент в разделах и карточках заявок в соответсвии с их приотизацией;

3. Проработали новые компоненты: спроектировали блок фильтров с чекбоксами, систему перетаскивания заявок в маршруте, пересобрали структуру карточки и разделили информацию в заявке по смысловым блокам;

4. Связали экраны в интерактивный прототип для проверки логики основных сценариев: поиск заявки, работа с маршрутом, заполнение отчетов и закрытие заявки.

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

Что сделано:

1. Разработали дизайн-систему: утвердили цвета, шрифты, стили кнопок и карточек. При помощи фирменного цвета расставили акценты на все ключевые действия;

2. Создали светлую и тёмную тему с учетом работы на улице и в помещениях при разном освещении;

3. Статусы и приоритеты: ввели цветовую маркировку заявок (например, срочные — красным) и добавили возможность инженеру назначать цвет на свои заметки в заявках;

4. Система мотивации: баллы и рейтинг выделили акцентными цветами и типографикой;

5. Улучшили читаемость: разбили сплошной текст в карточках на смысловые блоки, расставили акценты;

6. Добавили интерактивные подсказки: иконки с пояснениями для сложных полей и блоков (особенно в разделах с оборудованием);

7. Подготовили полный комплект экранов для передачи разработке, включая все состояния элементов.

Цель: Создать понятную единую систему цветов, шрифтов, отступов, элементов и их состояний для быстрой и продуктивной работы дизайнеров и разработчиков с приложением. 

Что сделано:

1. Сформированы токены по цветам и шрифтам, в зависимости от их назначения и типа использования;

2. Введена модульная сетка и единая система отступов, обеспечивающая визуальный ритм и «воздух» в интерфейсе.

3. Собрана библиотека компонентов от базовых (кнопки, инпуты, чекбоксы, выпадающие списки), до сложных многокомпонентных элементов (карточки, фильтры, статусы, уведомления);

4. Адаптация для тем. Для каждого компонента и цветового токена прописаны значения для светлой и тёмной темы, обеспечивая достаточный контраст и комфортное восприятие в любых условиях освещения.

5. Документация и правила использования. Установлены чёткие правила применения компонентов (когда использовать какую кнопку, как сочетать цвета).

Итог: Система обеспечивает визуальное единство приложения и служит готовой основой для разработки новых экранов.

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