UX/UI

UX/UI дизайн и разработка интерфейса для трекингового устройства

itraq butterfly logo
itraq case study
отрасль
ОТРАСЛЬ
IoT
технологии
ТЕХНОЛОГИИ
React
Amcharts
Express.js
команда
КОМАНДА
6 человек

О ПРОЕКТЕ

iTraq Butterfly — очень маленькое, мощное, но недорогое устройство, которое помогает отслеживать перемещение множества ценных грузов по земному шару.

Оно предназначено для простого и точного отслеживания всех типов отправлений и прекрасно подходит для бизнес-пользователей.

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

О КЛИЕНТЕ

Наш клиент — американская компания из Сиэтла — iTraq. Они занимаются устройствами для отслеживания людей, животных, грузов и многого другого.

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

ЗАДАЧИ

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

РЕАЛИЗАЦИЯ

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

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

Посмотреть кликабельный прототип интерфейса можно здесь.

Страница продукта

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

Отслеживание

Разработали специальную страницу, где пользователи смогут просмотреть все записи трекера, чтобы отобразить получаемые данные.

На странице отмечены: местоположение трекера, внешняя температура, а также записи о срабатывании датчиков света и движения.

Для этой страницы мы использовали настраиваемую версию Google Maps. Добавили на неё специальные маркеры с разными цветами и иконками для каждого события.

Журнал температур

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

По наведению курсора на диаграмме отображается информация со всеми данными.

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

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

Загрузка данных

данные с трекера

РЕЗУЛЬТАТ

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

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

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

ОТЗЫВ

КОМАНДА

  • Алексей Носов
    Менеджер проекта
  • Жанна Фирчук
    Тех.лидер
  • Владимир Кабоскин
    Frontend Разработчик
  • Баяман Касымбаев
    Backend Разработчик
  • Сергей Красков
    Инженер по качеству
  • Анна Кузнецова
    UX/UI Дизайнер

СТЕК ТЕХНОЛОГИЙ

Backend
бэкенд иконка
Amcharts
React-virtualized
Node.js Express
Frontend
фронтенд иконка
React
Redux
UX/UI
UX/UI иконка
Figma
Adobe Illustrator
Другое
Другое иконка
Bitbucket
Jira
потрясающая идея
Если хотите разработать что-то похожее или у вас есть
Назначьте встречу
Просто нажмите кнопку ниже и...