Кейс: разработка веб-сайта для автоматизированной загрузки диагностических карт компании «Свои люди»

Клиент: «Свои люди» — организация, которая предоставляет внутренние базы данных другим компаниям и станциям ТО для загрузки и хранения информации о прохождении технического осмотра и наличии диагностических карт.

Задача: Разработать многофункциональный веб-сайт.

Цели:

• Веб-сайт должен быть адаптирован под различные устройства;
• Информация с веб-сайта должна автоматически загружаться и проходить верификацию на сервисе ЕАИСТО.

Компания «Свои люди» уже обращалась в наше агентство с подобным запросом: тогда мы разрабатывали сайт с внутренней системой, которая самостоятельно обрабатывала информацию и хранила на своих серверах. Теперь же требовалось, чтобы система загружала данные о прохождении техосмотров и о диагностических картах напрямую в сервис ЕАИСТО для верификации. При этом было необходимо оптимизировать структуру и обновить дизайн веб-сайта, сохранив и расширив функционал.

Команда «Business Boom» уже работала с заказчиком и отлично понимала, какой результат желает получить наш клиент. Мы прописали техническое задание, утвердили его и приступили к работе над веб-сайтом.

Дизайн и структура веб-сайта

В первую очередь мы спланировали редизайн веб-сайта. Дизайн предыдущего ресурса был выполнен в стиле минимализма, по требованию заказчика. Теперь же, наша команда решила уйти в классический стиль веб-дизайна: бело-голубая цветовая палитра и бо́льшее количество анимации. Таким образом, веб-сайт, помимо практичности, приобрел удобство и комфортное использование.

Текстовое наполнение веб-сайта было решено выполнять в шрифте Roboto — он дополняет классический стиль.

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

• Меню входа и регистрации, в которых агенты могут начать или продолжить работу с сервисом;
• Личный кабинет, состоящий из нескольких блоков;
• Меню создания карт;
• Раздел «Список карт»;
• «Счета» — в данном разделе расположена информация о выставленных счетах;
• Раздел «Агенты и партнеры»;
• Разделы с различными видами отчетов;
• «Техподдержка» — раздел для администраторов сервиса;
• Меню «Проверка карты».

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

Регистрация на веб-сайте стала более доступной: теперь она состоит всего лишь из нескольких шагов, лишена излишней сложности и «многослойности». Это уменьшает порог вхождения и увеличивает количество потенциальных агентов и партнеров компании:

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

Наша команда обновила и улучшила меню создания карты — система автоматически сохраняет заполненную форму и отправляет ее в сервис ЕАИСТО. Форму можно дополнять и изменять в процессе обработки запроса:

В разделе «Список карт» содержится информация о статусе подтверждения каждой ДК (диагностической карты). В этом блоке пользователи могут регулярно проверять каждое транспортное средство и клиента в режиме онлайн. Некоторые данные о клиентах закрыты в целях сохранения конфиденциальной информации:

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

Обновленный блок в разделе «Агенты и партнеры» облегчает регистрацию новых пользователей в системе и выдачу им определенных прав. Брокеры упрощают работу агентам:

Разделы отчетов включают в себя всю подотчетную информацию, необходимую для работы сотрудников сервисов и станций технического обслуживания. Веб-сайт формирует файлы отчетов в «Excel» и открывает доступ к ним:

В блоке «Техподдержка» администраторы веб-сайта осуществляют информационную и техническую поддержку пользователей в случаях отмены результатов техосмотра и прочих проблем:

При необходимости лично проверить верификацию ДК агенты и партнеры могут воспользоваться формой на сервисе UMAX, который пробьет данные по системе ЕАИСТО:

Верстка веб-сайта

Команда «Business Boom» переработала структуру веб-сайта и провела его редизайн. Нашему разработчику оставалось сверстать блоки друг с другом и доработать функционал.

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

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

Также CMS платформа WordPress полноценно поддерживает все функции веб-сайта.

(блок-меню в мобильной версии веб-сайта) 

Разработка веб-сайта, от этапа подписания актов до утверждения финальной версии, длилась 60 рабочих дней.

Результат: Переработанный адаптивный веб-сайт с классическим дизайном и структурой, автоматизирующий подачу запросов в сервисы ЕАИСТО на выдачу диагностических карт, разработанный на платформе WordPress.