Компетенции
  • UI/UX
  • Frontend-разработка
  • Концептуальный дизайн
Сервис аварийных бригад
О проекте
Разработка сайта для «Росводоканал», который обеспечивает питьевой водой и оказывает услуги по водоотведению жителям страны.
Задача

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

Решение

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

Типографика

Для сервиса был выбран шрифт Rubik, без засечек со слегка закруглёнными углами. Лёгкий, мягкий шрифт подойдёт проекту практически любой тематики.

Цвет

Базовые цвета сайта включают фирменные яркие тона, что отличает компанию от конкурентов на рынке светотехнической продукции.

Сетка
Провели иследование: анализ рынка, конкурентов и состояние аккаунта
Первым делом клиент заполнил бриф и мы приступили к исследованию. На самом первом этапе прорабатываем портрет целевой аудитории, проводим тщательный анализ конкурентов, анализ спроса, то есть закладывается фундамент проекта.
Дизайн

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

  1. Диспетчер работает с аварийными заявками, назначает транспорт и мастеров. Мы предусмотрели, чтобы диспетчер мог легко назначать транспорт на аварийные заявки, распределять спецтехнику по бригадам и при необходимости давать комментарий на любую из заявок.
  2. Мастер работает на выезде по аварийной заявке. В этой роли были свои особенности: специалисты работают с сервисом в полевых, не всегда комфортных условиях на планшетах, поэтому необходимо было разработать простой, максимально понятный и интуитивный интерфейс с достаточно большими по размеру элементами управления.
  3. Начальник участка занимается всеми вопросами, касающимися транспорта: может поменять статус спецтехники, прописать ее местоположение, работать с комментариями на заявки автотранспорта, а также вести статистику.
  4. Администратор ведет учет пользователей и спецтехники.
Планшетная версия
Мокап продукта
Мокап продукта
Мокап продукта
Мокап продукта
Мокап продукта
Мокап продукта
Формы Pop-up
Мокап продукта
Мокап продукта
Мокап продукта
Ui kit
Для удобства Frontend-разработчиков, а также для сохранения общей стилистики при возможном расширении сайта в будущем, был подготовлен подробный Ui Kit c элементами дизайна.
Мокап продукта
Мокап продукта
Мокап продукта
Мокап продукта
Сверстали и запрограммировали сайт

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

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

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