Мобильное приложение для автоматизации логистики

«Антор» — один из лидеров в сфере автоматизации транспортной логистики. Более 20 лет компания занимается разработкой ПО для планирования маршрутов, мониторинга, логистики и управления персоналом. Ее мобильным приложением для автоматизации логистики пользуются в основном водители коммерческого транспорта (от «Газели» до «КамАЗа») и курьеры, в меньшей степени — складские сотрудники.

Сейчас у приложения есть несколько проблем:

1. Устаревший визуальный стиль мешает развитию и доработкам (уровень 2010-х годов). Приложение не соответствует отраслевым стандартам и имеет низкие оценки в сторе от пользователей.
2. Элементы интерфейса (отступы, кнопки) не стандартизованы.
3. Есть UX-недочеты.
4. Приложение сложно масштабировать и поддерживать из-за кастомных решений.

Заказчик ожидает, что после редизайна приложение станет более современным и user-friendly. Появится возможность использовать дизайн как основу для архитектуры приложения (в перспективе разработка IOS версии).

Бизнес-задача

Обновить интерфейс мобильного приложения, привести продукт в соответствие с современными стандартами Android (Material Design) и подготовить его к дальнейшему масштабированию.

Дизайн-задачи

Выполнить редизайн интерфейсов мобильного приложения Заказчика (под Android) и передать макеты в разработку.

Результат

Аналитика

Ни один наш проект не начинается без аналитики и изучения продукта заказчика. Этот проект отличался от наших типичных. Отличался тем, что на нем было только 2 звонка с заказчиком. 2 часа. За весь проект.

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

Выделили 4 типа водителей и 4 типа бизнесов.

На их основе подготовили сценарии использования приложения и архитектурно-информационную карту.

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

Дизайн

Начали дизайн с выбора нового визуального решения. У заказчика были референсы – приложение для проведения сделок, которое мы делали для компании SimpleFly. Предложили заказчику 5 вариантов на выбор:

1. Стандартное решение из Material 3.
2. Стандартное решение из Material 3, но поработали с фоном. Сделали его белым.
3. Использовали менее акцентный фон и сделали кнопку одним из акцентных цветов логотипа. Внесли изменения на уровне компонентов: поработали со скруглениями.
4. Сделали вариант с более теплым вариантом фона, Выделили кнопку + переработали скругления.
5. Черно-белый контрастный вариант с цветовыми акцентами на действиях. Кнопки темные и контурные.

Заказчик остановился на 3 варианте.

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

Согласовали концепты и перешли к детальному проектированию.

Весь этап проектирования был разбит на 3 спринта. Чтобы избежать риска забыть какую-то часть системы или не уложиться в объем проекта, сформировали таблицу с задачами.

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

Финальным этапом прописали системные правила и сетки. Это поможет разработке заказчика постепенно внедрять наше решение.

Особенности и нюансы процесса

Работали в рамках библиотеки Material 3 с минимальной кастомизацией элементов интерфейса.

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

Попросили заказчика посмотреть на концепты глазами водителя, который выполняет заказ и оценить от 1 до 5 насколько каждый концепт отвечает поставленным задачам, насколько он понятен. Сработало отлично. Такое упражнение проделали как для навигации, так и для карточки заказа.