[Кейс] Разработка корпоративного сайта таможенно-брокерской фирмы

Задача: Создание сайта с адаптивным дизайном и уникальным функционалом, понятным для пользователя.

C чего все началось

Не так давно мы разработали сайт для таможенно-брокерской компании “Гарант Сервис”. Фирма вот уже более 20 лет осуществляет таможенное оформление грузов, обеспечивает дополнительное сопровождение для грузов, организовывает страховку от всех рисков на основе официального соглашения с Государственной таможенной службой Украины.

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

Концепция дизайна

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

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

Вот, что у нас получилось:

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

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

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

Таким образом при нажатии на “финансовые гарантии”, “таможенное оформление”, “оформление Т1”, “страхование грузов” — пользователь сразу переходит на страницу конкретной услуги.

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

Функционал сайта и его особенности

Модуль расчета расстояния

Мы понимали, что для таможенной компании просто необходим модуль расчета расстояния и времени перемещения груза. Было решено добавить калькулятор для такого расчета. Поэтому его теперь можно найти на странице “Финансовые гарантии”.

Калькулятор можно поместить на любую текстовую страницу сайта.

Встроенный калькулятор

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

Рассмотреть калькулятор можно ниже.

Для расчета таможенных платежей мы использовали уже готовое решение от MD Office:

Для большего удобства пользователей при расчете суммы платежей мы также разместили плагин курса валют НБУ.

Онлайн заявка на финансовую гарантию

Когда клиент фирмы “Гарант Сервис” определился с грузом, который он везет, и размером таможенного платежа, он может сразу же на сайте оформить заявку на финансовую гарантию. Мы разработали специальную форму, заполнив которую, пользователь сайта получает свою учетную запись — личный кабинет. В нем он может следить за ходом оформления заявки и получения необходимых документов.

Что собой представляет карта на сайте?

Мы не забыли о карте пропускных пунктов, в которых есть представительства компании “Гарант Сервис”. 

Если нажать на маркер конкретного пропускного пункта — появится модальное окно с ключевой информацией.

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

В дальнейшем, кроме текстового описания пропускного пункта тут появится еще и его фотография.

Личный кабинет

При разработке функционала был продуман личный кабинет.

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

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

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

Новости и справочник терминов

Еще мы добавили блог с поиском по тегам для удобной рубрикации по ключевым темам.

А страница “Справочник” была создана специально для объяснения юридической терминологии клиентам со ссылками на шаблоны договоров и других необходимых документов.

Возможности для дальнейшего SEO-продвижения

Сайт gs.com.ua, как и любой другой на базе ArtBox, изначально полностью готов для дальнейшего продвижения в поисковых системах. Разработанный нами SEO-модуль имеет весь инструментарий для эффективной работы SEO-специалиста, не привлекая при этом программиста.

SEO-фишки, что мы внедрили:

• Возможность генерации мета-тегов вручную или по шаблону
• Возможность правки мета данных по URL для любой страницы
• Управление индексацией сайта
• На любую страницу можно внедрить ЧПУ
• Самостоятельное внедрение кода аналитики
• Генерация ALT для картинок
• Облако тегов в блоге
• Короткие URL без лишних символов
• Вывод ключевых данных с Google Analytics в админ-панель

Подводим итоги

Таким образом, мы получили сайт с удобной и правильной структурой: четыре главные подраздела доступны с первого экрана сайта; дополнительными модулями: плагин курса НБУ, калькуляторами и онлайн-заявками на оформление финансовой гарантии.

Все это — в фирменном стиле компании “Гарант Сервис”. Оставив корпоративные цвета компании, удалось сохранить их брендинг, и реализовать его в новом современном и лаконичном формате.