АвтоКонтроль. Веб-сервис

17 сентября 2024

Интерфейсы

Ancora

PRO Агентство, 2 соавтора

АвтоКонтроль. Веб-сервис — Изображение №1 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №2 — Интерфейсы на Dprofile

О проекте

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

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

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

Заказчик: Olve. Tech

Год: 2024

Студия: Ancora.Agency

АвтоКонтроль. Веб-сервис — Изображение №3 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №4 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №5 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №6 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №7 — Интерфейсы на Dprofile

Создавая логотип для компании “Автоконтроль”, мы соединили символизм
единого пространства, охватывающего как дороги, так и границы округа.
Это визуальная метафора целостности и связи.

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

АвтоКонтроль. Веб-сервис — Изображение №8 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №9 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №10 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №11 — Интерфейсы на Dprofile

Для проекта мы выбрали цветовую схему, которая опирается на четыре
основных цвета и вариативную палитру.

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

АвтоКонтроль. Веб-сервис — Изображение №12 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №13 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №14 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №15 — Интерфейсы на Dprofile

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

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

АвтоКонтроль. Веб-сервис — Изображение №16 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №17 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №18 — Интерфейсы на Dprofile

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

Он базируется на библиотеке Material UI, чтобы разработчикам было удобно

АвтоКонтроль. Веб-сервис — Изображение №19 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №20 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №21 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №22 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №23 — Интерфейсы на Dprofile

АвтоКонтроль. Веб-сервис — Изображение №24 — Интерфейсы на Dprofile

После запуска MVP мы продолжили работу по проектированию и дизайну сервиса.
Следующей итерацией стало добавление механики сбора данных с дорожных камер
и отображение результатов после их проверки.