UX/UI

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

заменить графику
ОТРАСЛЬ
IoT
ТЕХНОЛОГИИ
React, Amcharts, Node.js Express
КОМАНДА
6 человек
О ПРОЕКТЕ
iTraq Butterfly — очень маленькое, мощное, но недорогое устройство, которое помогает отслеживать перемещение большого количества ценных грузов по земному шару.

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

Гаджет позволяет находить что угодно в любом месте, как снаружи, так и внутри зданий, обеспечивая точное местоположение. Вся ключевая информация о перемещениях и не только хранится на сервере iTraq. Эти данные нам и нужно было показать пользователю простым и понятным способом.
О КЛИЕНТЕ
Наш клиент — американская компания из Сиэтла — iTraq. Они занимаются устройствами для отслеживания людей, животных, грузов и многого другого.

Отметим, что это наше не первое сотрудничество. Мы уже делали для них несколько дизайнов, и разработку.
ЗАДАЧИ
Нужно было сделать сайт для пользователей, где они смогут в режиме реального времени смотреть данные от трекера по ключевым метрикам на карте, а также настраивать варианты их отображения.
РЕАЛИЗАЦИЯ
Мы начали с дизайна, а после переключились на вёрстку интерфейса.

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

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

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

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

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

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

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

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

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

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

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

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

Всё это позволяет увеличить скорость загрузки сайта и последних трекера.

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

РЕЗУЛЬТАТ
Сделали дизайн и фронтенд трекингового приложения с подробной информацией о местонахождении груза, журналом температур, а также сообщениями о срабатывании датчиков света и движения. И всё это динамично загружается и обновляется.

Мы также проработали с уже готовым бэкендом сайта, получая и интерпретируя его данные.
ОТЗЫВ
КОМАНДА
Алексей Носов
Менеджер проекта
Жанна Фирчук
Тех.лидер
Владимир Кабоскин
Frontend Разработчик
Баяман Касымбаев
Backend Разработчик
Сергей Красков
Инженер по качеству
Анна Кузнецова
UX/UI Дизайнер
СТЕК ТЕХНОЛОГИЙ
Backend
Amcharts
React-virtualized
Node.js Express
Frontend
React
Redux
UX/UI
Figma
Adobe Illustrator
Другое
Bitbucket
Jira
потрясающая идея
Если хотите разработать что-то похожее или у вас есть
Назначьте встречу
Просто нажмите кнопку ниже и...