Редизайн мобильного приложения для управления маршрутами и работой водителей

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

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

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

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

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

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

1. Устаревший визуальный стиль мешает развитию и доработкам (уровень 2010-х годов). Приложение не соответствует отраслевым стандартам и имеет низкие оценки в сторе от пользователей.

2. Элементы интерфейса (отступы, кнопки) не стандартизованы.

3. Есть UX-недочеты.

4. Приложение сложно масштабировать и поддерживать из-за кастомных решений.

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

Старые экраны приложения

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

Карта старого интерфейса

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

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

Типы водителей

Типы бизнесов

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

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

1. Стандартное решение из Material 3.

2. Стандартное решение из Material 3, но поработали с фоном. Сделали его белым.

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

4. Сделали вариант с более теплым вариантом фона, Выделили кнопку + переработали скругления.

5. Черно-белый контрастный вариант с цветовыми акцентами на действиях. Кнопки темные и контурные.

Варианты визуального решения

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

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

Концепты

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

Список заказов: начало дня. Просматриваем карточку первого заказа

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

Заказ взятый в работу отображается в соответствующей вкладке. Середина дня: часть заказов выполнена, часть в работе, часть проблемная

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

Карточка выполненного заказа и карточка проблемного заказа в раскрытом виде

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

Отказаться от заказа

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

Заказ в работе 

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

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

Груз и упаковка

Провели 3 спринта детального проектирования;

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

Отрисовали 32 сценария;