Разработка дизайна сайта для системы мониторинга транспорта Axenta

Заказчик

Axenta разрабатывает системы мониторинга, чтобы отслеживать передвижение транспорта и персонала.

Задача

Разработать визуальный стиль и дизайн для сайта и личного кабинета с нуля.

О проекте 

Axenta разрабатывает системы мониторинга, чтобы отслеживать транспорт и персонал. Например, транспортные компании с помощью таких систем могут отслеживать, где находится их транспорт, сколько топлива тратится и нет ли отклонений от маршрута. 

Такие системы используют службы доставки, строительные компании и производства, чтобы следить за сотрудниками, которые работают в зоне повышенной опасности. И контролировать, чтобы они соблюдали правила и находились в безопасной зоне. 

Задача 

Цель проекта — разработать визуальный стиль и дизайн для сайта и личного кабинета с нуля. 

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

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

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

Реализация проекта

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

Результаты аналитического этапа

1. Целевые сегменты: Были выделены четыре основных сегмента пользователей, которым необходимы разные типы мониторинга: легковой автотранспорт, грузовой транспорт, спецтехника и персонал. Для каждого сегмента разработаны индивидуальные предложения.
2. Функциональность: Определены основные функции, необходимые для каждой категории пользователей, такие как отслеживание местоположения, контроль расхода топлива, анализ маршрутов и безопасность сотрудников.
3. Особенности дизайна: Было решено создать уникальный визуальный стиль, отражающий технологичность и надежность продуктов Axenta, при этом обеспечивающий интуитивное восприятие информации пользователями.

Ограничения и особенности проекта

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

Дизайн и структура

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

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

Таким образом, проект охватывает широкий спектр задач, связанных с мониторингом и управлением транспортом и персоналом, предлагая клиентам Axenta современные и удобные инструменты для повышения эффективности их бизнеса.

Какие были сложности

При реализации любого масштабного проекта неизбежно возникают различные трудности. В случае с проектом Axenta это были:

1. Адаптация под разные типы клиентов.
   Проект охватывал несколько целевых аудиторий: транспортные компании, строительные организации, службы доставки и другие отрасли. У каждой группы пользователей были свои специфические требования к функционалу и интерфейсам. Например, транспортные компании нуждались в точной геолокации и анализе маршрутов, а строительные фирмы больше интересовались контролем за безопасностью персонала на объектах. Сложность заключалась в том, чтобы создать единый интерфейс, который будет удобен и полезен всем категориям пользователей, сохраняя при этом ясную навигацию и простоту восприятия.
2. Оптимизация под мобильные устройства.
   Системы мониторинга часто используются в полевых условиях, когда доступ к компьютеру ограничен. Поэтому одна из ключевых сложностей заключалась в разработке мобильного интерфейса, который бы позволял пользователям удобно просматривать данные и управлять системой с телефона или планшета. Здесь возникали проблемы с оптимизацией экранной площади, эргономичностью кнопок и элементов управления.
3. Обеспечение безопасности данных. 
   Учитывая, что система работает с конфиденциальными данными о перемещении транспорта и сотрудников, возникла необходимость в усиленной защите данных. Нужно было реализовать многоуровневую защиту, шифрование передаваемых данных и строгие политики доступа. Это потребовало дополнительной проработки архитектурных решений и тестирования всех уровней безопасности.
4. Масштабируемость системы. 
   Клиенты Axenta варьируются от небольших компаний до крупных корпораций с большим парком техники и численностью персонала. Поэтому система должна была быть гибкой и масштабируемой, чтобы справляться с увеличением нагрузки без потери производительности. Требовалось учитывать возможности горизонтального и вертикального масштабирования инфраструктуры.
5. Разработка уникального визуального стиля. 
   Создание уникального и узнаваемого бренда для Axenta было важной задачей. Однако сложность заключалась в том, чтобы этот стиль сочетался с высокими требованиями к юзабилити и технической функциональности интерфейсов. Нужно было найти баланс между эстетической привлекательностью и практической полезностью.
6. Тестирование и отладка.
   После завершения разработки началась фаза интенсивного тестирования, включающая тестирование на нагрузочную устойчивость, проверку взаимодействия с внешними системами и интеграциями, а также тестирование удобства использования (UX-тестирование). Обнаруженные ошибки и недочеты приходилось оперативно исправлять, что иногда приводило к пересмотру отдельных модулей системы.

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

Дизайн основной страницы

Дизайн личного кабинета

Дизайн личного кабинета

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

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

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

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

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

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

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

Разработанный нами дизайн личного кабинета представляет собой сбалансированное сочетание эстетики и функциональности. Благодаря расширенному функционалу и удобным инструментам для анализа маршрутов, пользователи получили мощный инструмент для эффективного управления транспортными средствами и контроля за соблюдением норм безопасности.

Отображение объектов на карте

Список треков

Отображение подсказок

Подсказки при наведении на событие

Оконный вариант проигрывателя

Кроме того, мы разработали дизайн адаптивной версии под мобильные устройства.

Перейти на сайт