Опыт

Сайт и личный кабинет для «СТС Логистикс Транспорт»

Создание сайта и личного кабинета для логистической компании.

Задачи проекта

  • Создание сайта с личным кабинетом для логистической компании.

Консультирование и планирование

Анализ конкурентов

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

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

Анализ-конкурентов

Проектирование

Семантическое ядро

C использованием KeyCollector и Keys.so собраны ключевые слова. Произведено ранжирование высокочастотных, средне- и низкочастотных запросов. Ядро очищалось вручную, а затем проверялось на нецелевые запросы заказчиком.

Семантическое ядро

Карта сайта

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

  1. Главная
  2. О компании
    1. История и достижения (о компании; награды; фотогалерея)
    2. Миссия и ценности
    3. Клиенты
    4. Отзывы
    5. Преимущества сотрудничества
    6. Система качества
    7. Сертификаты и награды
      1. Рубрика: сертификаты и свидетельства
      2. Награды и благодарности
    8. Наши сотрудники (люди с фильтром отделов)
    9. Карьера
      1. Вакансии
        1. *Отправить резюме (форма обратной связи во всплывающем диалоге)
    10. Документы
      1. Договора
      2. Презентации
      3. Регламенты
      4. Тарифы
      5. СОУТ
  3. Услуги
    1. Складская логистика
      1. Услуги складской логистики
      2. Кейсы
      3. Наши склады
        1. Москва
        2. Санкт-Петербург
        3. Самара
        4. Ростов-на-Дону
        5. Екатеринбург
        6. Новосибирск
        7. Хабаровск
        8. Владивосток
    2. Мультимодальные перевозки
      1. Контейнерные перевозки
      2. Морские и речные грузоперевозки
      3. Железнодорожные перевозки
      4. Кейсы
    3. Таможенное оформление
      1. Таможенное оформление экспортно-импортных грузов
      2. Классификационные решения
      3. Кейсы
    4. Аутсорсинг ВЭД
      1. Кейсы
    5. Негабаритные и проектные перевозки
      1. Кейсы
    6. Авиаперевозки
      1. Кейсы
    7. Сборные грузы
      1. Международные перевозки сборных грузов
      2. Региональные перевозки сборных грузов
      3. Кросс-докинг
      4. Паллетная доставка в торговые сети
      5. Кейсы
      6. Кейсы

    8. Автоперевозки

    9. Копакинг
    10. Дополнительные услуги
      1. Консультирование
      2. Страхование грузов
      3. Упаковка грузов
    11. *Заказать услугу (форма обратной связи во всплывающем диалоге)
  4. Отраслевые решения
    1. Сетевой ритейл
    2. Оптово-розничная торговля
    3. Индустрия моды
    4. Автомобильная промышленность
    5. Строительство
    6. Промышленное оборудование
    7. Химическая промышленность
    8. Фармацевтическая отрасль
    9. Сельское хозяйство
    10. Нефтегазовая отрасль
    11. Энергетика
    12. Горнодобывающая отрасль
    13. *Вопрос эксперту (форма обратной связи во всплывающем диалоге)
  5. Направления
    Пример https://tk-kit.com/directions
    1. Россия
      1. Кейсы (могут быть для каждого направления)
    2. Калининград
    3. Крым
    4. Беларусь
    5. Узбекистан
    6. Кыргызстан
    7. Казахстан и Средняя Азия
    8. Армения
    9. Грузия
    10. Страны Ближнего Востока
    11. Индия
    12. Иран
    13. Китай и Юго-Восточная Азия
    14. Европа
    15. Весь мир (транзитом через Турцию и ОАЭ)
      1. Кейсы (могут быть для каждого направления)
  6. Пресс-центр
    1. Новости и события (можно просто «новости»)
      1. Новость
    2. Пресса о нас
      1. Статья
    3. Корпоративный блог
      1. Рубрика
      2. Статья
    4. Фотогалерея
      1. Фото альбом
      2. Фотография
  7. Контакты
    1. Офисы
      1. Москва
      2. Санкт-Петербург
      3. Казань
      4. Самара
      5. Ростов-на-Дону
      6. Новороссийск
      7. Пермь
      8. Екатеринбург
      9. Новосибирск
      10. Владивосток
      11. Находка
      12. Бреда, Нидерланды
      13. Алматы, Казахстан
    2. Склады
      1. Москва
      2. Санкт-Петербург
      3. Самара
      4. Ростов-на-Дону
      5. Екатеринбург
      6. Новосибирск
      7. Хабаровск
      8. Владивосток
    3. Представительства
    4. Оставить рекламацию (форма запроса)
    5. Запрос бухгалтерских документов
  8. *Задать вопрос (форма обратной связи во всплывающем диалоге)
  9. *Перезвоните Заказать звонок (форма запроса во всплывающем диалоге)
  10. *Рассчитать перевозку Заказать расчёт (Форма запроса во всплывающем диалоге. Для любых посетителей сайта, так и в личном кабинете. Неавторизованные посетители делают расчёт, оставляя свои контактные данные. Создаётся новая заявка на перевозку. Для пользователя реализуется переход в расширенную форму заявки для регистрации в личном кабинете.)
  11. *Отследить груз (Доступно только в личном кабинете, после авторизации пользователя. Может быть как на отдельной странице так и  во всплывающем диалоге. Примеры https://www.fesco.ru/ru/clients/tracking/ или https://trasko.ru/track/ )
  12. Клиентам
    1. Частые вопросы
    2. Оплата
    3. Гарантии
  13. Личный кабинет
    1. Вход
    2. Регистрация
    3. Восстановить доступ
    4. Личные данные
    5. Рассчитать перевозку (Форма запроса. Расчет формирует заявку с заполненными полями «заказчик» и «договор», т.к. клиент уже авторизован и о нём известны все данные. )
    6. Заявки (Это первичный документ с минимально заполненными данными. Тут главное это расчёт стоимости от точек А до Б, и контакты заявителя.)
      1. Заявка
    7. Заказы (Это следующий этап после заявки, когда заполнены все необходимые поля)
      1. Заказ (в заказе: счета, документы)
    8. Отслеживание груза
    9. Запрос документов
    10. Рекламации
  14. Поиск по сайту
  15. Карта сайта
  16. Страница ошибки (404: Страница не найдена)
  17. Пользовательское соглашение, политика конфиденциальности

Прототип

Главная страница

Главная страница

Страница услуги

Страница услуги

Дизайн

Эскиз

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

Эскиз проекта

Макеты

На основе эскизов и прототипа разработаны макеты проекта. Разработана и согласована главная страница в графическом формате. Затем были разработаны все типовые страницы в верстке чистового качества.

1 итерация

1 итерация

2 итерация

2 итерация

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

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

Техническое задание

Техническое задание

Инфраструктура

Серверное окружение

1. База данных: MySQL Percona 5.7

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

2. Веб-сервер: Nginx Stable

  • Это бесплатный и открытый веб-сервер с высокой производительностью и надежностью.
  • Nginx обеспечивает быстрое обслуживание запросов и эффективное использование ресурсов сервера.

3. Язык программирования: PHP 8.1

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

4. Кэш-система: Redis 7

  • Redis является быстрой и масштабируемой системой кэширования данных.
  • Redis обеспечивает быстрый доступ к данным и повышает производительность приложения.

Используемые фреймворки

1. Фреймворк для создания веб-приложений: Laravel 10.

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

2. Фреймворк для создания пользовательских интерфейсов: Vue.js 3

  • Vue.js  является современным и быстрым фреймворком для создания пользовательских интерфейсов.
  • Vue.js обеспечивает быструю отрисовку и масштабируемость интерфейса.

3. CSS-фреймворк: Tailwind CSS 3.

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

Используемые модули

Дизайн

Страница «Личные данные»

Личный данные

Заявки

Заявки

Документы

Документы

Отслеживание грузов

Отслеживание грузов

Платформа

  • Сервер — выделенный физический сервер, арендованный Заказчиком в дата-центре, настроен Cetera в рамках проекта.
  • Операционная система — Linux Debian
  • Веб-серверы: Nginx
  • База данных — MySQL Percona 5.7
  • Языки программирования: PHP
  • Кэш-система: Redis 7
  • Фреймворки — Laravel, Vue.js, Tailwind. 

Разработка

Верстка выполнена на framework Foundation 6.0. Обеспечена адаптивная вёрстка. Код прошёл тестирование на соответствие стандартам W3C.

Программирование выполнялось на PHP. Отдельные возможности реализованы на стандартных модулях jQuery.

Контроль качества проводился автоматическими системами. Обеспечено соответствие стандартам PSR для PHP. Пройдены все встроенные тесты (безопасность, производительность, неизменность ядра и т.д.) системы управления контентом.

Внедрены следующие модули

  • Структура и навигация.
  • Материалы.
  • Баннеры.
  • Поиск.
  • Формы обратной связи.
  • Языковая версия.
  • Новости.
  • Подписка на рассылку.
  • Документы.
  • Корпоративное управление (с навигацией).
  • Наши склады.
  • Контакты.
  • Анонсы.
  • Отраслевые решения.
  • Кейсы.
  • Клиенты и отзывы.

Дальнейшее развитие

Развитие осуществляется на основе периодических процессов выявления потребностей и планирования проектов — видений. Интервью проводятся с периодичностью раз в квартал. Корректировка планов — ежемесячно вносятся изменения в мастер-планы проекта. Ключевые задачи:

Апрель 2023

  • Создание тестовой площадки.
  • Настройка площадки для ЛК.
  • Оформление конструктора личных кабинетов по фирменному стилю заказчика.
  • ТЗ на функционал ЛК.
  • ТЗ на интеграцию с 1С.
  • Сбор семантического ядра.
  • Анализ конкурентов.
  • Разработка карты сайта.
  • Разработка эскиз.

Май 2023

  • Выводить информацию о грузе в ЛК клиента.
  • Загрузить информацию о контейнерах клиента в свою базу из 1С.
  • Загрузить сопутствующие услуги клиента в свою базу из 1С.
  • Загрузить пункты отправления/назначения клиента в свою базу из 1С.
  • Интеграция с 1С (в объеме функционала текущего месяца).
  • Дизайн макеты сайта.
  • Разработать прототип сайта.

Июнь 2023

  • Калькулятор.
  • Оформление заявок.
  • Статусы заказов.
  • Истории заказов.
  • Интеграция с 1С.
  • Разработка модулей.

Август 2023

  • SEO-переезд накопленного трафика со старого сайта на новый.
  • Истории заказов (продолжение из-за обновленной документации).
  • Уведомления.
  • Программирование страниц.
  • Устанавливать клиенту своего менеджера.

Сентябрь 2023

  • Создание профилей из контактных лиц.
  • Создание справочника контактных лиц.
  • Подгрузка документов.
  • Изменение страницы заказа.
  • Перевозки (Заказы).
  • Статусы заказов (продолжение из-за обновленной документации).
  • SEO-переезд накопленного трафика со старого сайта на новый.
  • Тестирование и открытие личного кабинета и обновленного сайта stslog.com.
  • Добавить страницу с результатом ответа по трек-номеру.
  • Дизайн результатов отслеживания по трек-номеру.

Октябрь 2023

  • Базовый аудит.
  • Аудит на наличие КФ вручную с ниши.
  • Обернуть в APK.
  • Калькулятор:  индивидуальный расчёт.
  • Изменение страницы заказа.
  • Калькулятор расчет допуслуг: страхование.
  • Груз: слежение на карте, история дислокации.
  • Разработка функциональности в административном интерфейсе.
  • Счета, список счетов.
  • Добавить текстовый редактор.
  • Интеграция с dadata.
  • Добавить оферту на страницу регистрации.
  • Вывод текста об ошибке.

Ноябрь 2023

  • Маршрут: визуальная линейка.
  • Обновление верстки страницы по заказу.
  • Проверка договора при регистрации.
  • Подтверждение аккаунта, письмо активации аккаунта на почте.
  • Груз: слежение на карте, история дислокации (картографичный вид).
  • Добавить чек-бокс активности в разделе с пользователями.
  • Задачи по продвижению:
    • Консультация клиента SEO-специалистами.
    • Мероприятия по итогам базового аудита.
    • Внедрение КФ.
    • Публикация по ТЗ  (1 этап).
    • Анализ конкурентов с девиацией.
    • Базовое позиционное продвижение.
    • Получение ссылок с каталогов и сервисов.
    • Выбор страниц для позиционного продвижения.
    • Постраничное снятие параметров по плотности относительно медиан.
    • Постраничное снятие параметров по плотности с лидеров ниши.
    • Выявление отклонений.
    • Снятие позиций.

Декабрь 2023

  • Программирование истории запросов.
  • Проверка авто, водителей и организаций.
  • Добавление фильтра заявок.
  • Выгрузка списка заявок.
  • Маршрут: визуальная линейка. Программирование.
  • Задачи по продвижению:
    • Внедрение позиционных правок.
    • Публикация по ТЗ (2 этап).
    • Составить анкор-лист.
    • Выбрать площадки под закупку ссылок.
    • Разработать ссылочную стратегию.
    • Закупить ссылки.

Январь 2024

  • Проверка авто, водителей и организаций. Продолжение.
  • Верстка и программирование шаблона заявки.
  • Развитие и поддержка кабинета по заявкам заказчика.
  • Задачи по продвижению:
    • Публикация по ТЗ.
    • Просчитать внутренний вес страниц.
    • Настроить перелинковку на сайте.
    • Закупить ссылки.
    • Добавление запросов в Яндекс.Вебмастер.
    • Добавить ссылки на страницы из ТЗ для отслеживания в Яндекс.Вебмастер.
    • Составить стратегию на следующий период.

Февраль 2024

  • Добавить выпадающее меню в хедере.
  • Ошибка с поиском.
  • Настройка передачи сессии клиента.
  • Проверка авто, водителей и организаций. Продолжение.
  • Передача IP пользователя.
  • Разработка FTL кабинета.
  • Задачи по продвижению:
    • Контрольный базовый аудит.
    • Выбрать страницы для позиционного продвижения и запросы к ним.
    • Базовое позиционное продвижение (сл. этап).
    • Закупить ссылки.
    • Написание и публикация статей по ТЗ (4 этап).

Март 2024

  • Доработки по сайту.
  • Подключение СМС шлюза.
  • Дизайн страницы.
  • Разработка FTL направления.
  • Добавить на страницу сборных грузов возможность поверки статуса доставки груза.
  • Задачи по продвижению:
    • Внедрение позиционных правок (1 часть).
    • Составление ссылочной стратегии.
    • Составить анкор-лист.
    • Выбрать площадки для закупки ссылок.
    • Закупить ссылки.
    • Написание и публикация статей по ТЗ (5 этап).

Менеджеры проекта

Максим Самохвалов

Максим Самохвалов

Максим Самохвалов
Менеджер проектов.

Похожие кейсы

Разработка личного кабинета для транспортной компании «Тинокс»

Опыт

Разработка личного кабинета для транспортной компании «Тинокс»
Разработка личного кабинета для транспортно-логистической компании «Тинокс».
Доработка таможенной системы для компании «ИНДИТАЛ КАСТОМС»

Опыт

Доработка таможенной системы для компании «ИНДИТАЛ КАСТОМС»
Доработка таможенной системы на основе Laravel Nova.
Тендерная площадка для компании

Опыт

Тендерная площадка для компании
Тендерная площадка для компании.
Дашборд с аналитикой для компании в России

Опыт

Дашборд с аналитикой для компании в России
Дашборд с аналитикой для компании в России. Автоматизация логистики, вывод на маркетплейсы, заказная разработка и кастомизация CRM, поддержка CRM, обеспечение безопасности и высокой скорости работы интернет-магазина.
Претензионный портал для компании

Опыт

Претензионный портал для компании
Претензионный портал для компании.
Терминал для водителей

Опыт

Терминал для водителей
Терминал для водителей для компании в России.