Крупнейшая digital-премия в Европе

Перезагрузка личного кабинета MY.FESCO

Заказчик: FESCO
Исполнитель: Ареал
Share
Перезагрузка личного кабинета MY.FESCO

Главное о кейсе

— За период с 01.01.2021 по 30.11.2021 15% зашли в ЛК со смартфона
— 256 договоров КДЕ заключено через ЛК за 3 квартал 2021
— Отрисовано 3 дизайн концепции, 100+ макетов desktop. 40+ макетов mobile.
UIKIT содержит 70+ компонентов, 26 страниц с описанием. Библиотека компонентов и стилей экономит время дизайнеру и программисту, а значит ускоряет срок выпуска продукта, при этом экономя ресурсы FESCO. UI Kit и frontend компоненты, собранные на его основе, сможет использовать любой подрядчик при реализации других ресурсов FESCO
— Новая технологическая платформа позволяет реализовать Кабинет менеджера. Сотрудники FESCO будут онлайн согласовывать скидки, контролировать заключение договоров и реагировать на запросы котировок

--------------------------

— For the period from 01/01/2021 to 11/30/2021, 15% of users logged into the personal account from a smartphone;
— 256 transportation contracts were concluded through the personal account for the 3rd quarter of 2021;
— 3 design concepts have been drawn, 100+ desktop layouts and 40+ mobile layouts.
The UI KIT contains 70+ components and 26 pages with a description. UI KIT saves designer and programmer time. UIKit and front-end components assembled on its basis can be used by any contractor when implementing other FESCO resources;
— The new technological platform allows you to implement a manager's office. FESCO employees will be able to coordinate discounts, control the conclusion of contracts and respond to requests for quotations online.

Бизнес-задача и ее решение

АУДИТ И БЕНЧМАРКИНГ КОНКУРЕНТОВ

Компания активно развивает клиентский порт самообслуживания — личный кабинет MY. FESCO. В 2021 году стал актуален вопрос редизайна и комплексного перезапуска личного кабинета.

Мы провели исследование клиентских сервисов Fesco и конкурентов компании. 10 личных кабинетов были проанализированы по 55 критериям. Результатом стал список Best Practice, понимание сильных и слабых сторон личного кабинета Fesco среди конкурентов и конкретные рекомендации к изменению.

ДИЗАЙН

Новые интерфейсы стали интуитивно понятны и дружелюбны к пользователю.
У всего кабинета появилась общая стилистика:
— дизайн создан на основе брендбука FESCO и при поддержке сотрудников отдела Маркетинга
— современный и легкий, он не перегружен обилием цвета и мелкими деталями,
цветовые акценты и кодировки подсказывают пользователю
— преобладают светлые тона, это важно для системы, с которой работают ежедневно
— визуализация ключевой информации делает решение повседневных задач легче
иллюстрации вовлекают пользователя, они выполнены в единой изометрической стилистике
— навигация кабинета проработана для трёх типов устройств desktop, mobile, tablet

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

КАЛЬКУЛЯТОР, СРАВНЕНИЕ СТАВОК

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

ФОРМА ПОДАЧИ ЗАЯВКИ

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

ПОДАННЫЕ ЗАЯВКИ

— Фильтры и сортировки переработаны.
— Фактический и планируемый статус по контейнеру соотнесен с таймлайном. В таблице нет дублирующей информации о пунктах перевалки.
— Заявки становятся центром взаимодействия с FESCO. Из них запускаются процессы сопровождения перевозки.

ВОЗВРАТ ПОРОЖНИХ КОНТЕЙНЕРОВ
* Сервис доступен для локаций Владивосток и Санкт-Петербург

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

ТАМОЖЕННОЕ ОФОРМЛЕНИЕ

Пользователь коммуницирует с FESCO по процессу таможенного оформления в режиме одного окна. Декларация формируется автоматически на основе загруженного пакета документов. Этапы оформления отображены на стандартном для системы таймлайне.

АРМ 3PL

Удобный инструмент управления и реализации задач по оформлению пакетов. Реализован мониторинг и распределение нагрузки между сотрудниками. Интеграция с таможенным порталом Альта-Софт

ДОГОВОРЫ, ДОКУМЕНТЫ И АКТЫ СВЕРКИ

— Автоматизировано заключение типового договора менее чем за 3 дня через ЭДО или на бумажном носителею
— Доступно три типа договоров: КДЕ, каботажный и на перевозку рефрижераторных контейнеров.
— Проработан таймлайн со статусами согласования договоров.
— Появилось полуавтоматическое согласование актов сверки.

ПРОФИЛЬ, ОБРАЩЕНИЯ И МОИ СПРАВОЧНИКИ

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

МОБИЛЬНАЯ ВЕРСИЯ И ПРИЛОЖЕНИЕ

— Адаптивная мобильная версия интерфейсов.
— Запускаем мобильное приложение, которое в том числе позволит использовать PUSH-уведомления.

НАСТРОЙКА ПРАВ ДОСТУПА И МАСТЕР-УЧЕТКИ

— Настройка прав доступа и привязка учетной записи к юридическим лицам стали нагляднее.
— Запросы на предоставление доступа стали логичными и пошаговыми, мы избавились от лишнего.
— Подчистили функцию Мастер-учетки, теперь все «разложено по полочкам»
С помощью мастер-учетки клиент сам управляет списком менеджеров и их правами на стороне клиента.

РАЗРАБОТКА

Личный кабинет стал безопаснее и быстрее:
— увеличили скорость работы за счет оптимизации backend;
— перешли на более безопасный REST API вместо GrahpQL.

Обновленный технологический стек и архитектура позволяют быстро наращивать темп разработки новых функций:
— привели к единообразию технологический стек frontend, избавились от legacy (накопленные ошибки программного кода);
— использовали и продолжаем использовать, и пополнять единую библиотеку компонентов и последние версии подключаемых библиотек;
— задокументировали всё взаимодействие между frontend и backend приложения.
— переход на REST API повысил скорость обмена данными с GLOVIS. Простота подключения позволит другим клиентам использовать API для обмена данными в формате АСУ-АСУ.

ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ

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

UI KIT

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

— Интерфейсы, собранные на основе библиотеки, согласованы между собой (соблюдены консистентность и прецизионность).
— Мы стали на шаг ближе к созданию Дизайн-системы FESCO.

--------------------------

AUDIT AND BENCHMARKING OF COMPETITORS

We made an analysis of FESCO's client services and competing companies, and also analyzed 10 personal accounts according to 55 criteria. As a result of the research, we compiled a Best Practice list, identified the strengths and weaknesses of the FESCO personal account relative to competitors and developed specific recommendations for change.

DESIGN

The new interfaces have become intuitive and easy to use. The personal account has a common style. The design has been created based on the brand book. Visualization of key information makes solving everyday tasks easier, illustrations are made in a single isometric style and involve the user in working with a personal account. Cabinet navigation is designed for three types of devices: desktop, mobile, tablet.

CALCULATOR, COMPARISON OF RATES

— The full path is displayed on the timeline;
— The filter is fixed and always remains at hand;
— The comfortable mobile version of the page allows you to calculate the rate on the go.

APPLICATION FORM

— There are steps instead of a large form;
— Containers and cargo are placed in one compact and informative table with convenient sorting;
— The request reiteration is available from a mobile device.

SUBMITTED APPLICATIONS

— Filters and sorting are redesigned;
— Applications are the center of interaction with FESCO. The processes of transportation support are launched from them.

RETURN OF EMPTY CONTAINERS

* The service is available for locations in Vladivostok and St. Petersburg
— Containers that require attention are quickly filtered;
— Customers see the status and the need to return an empty container;
— The instruction is generated automatically, and the depot availability is requested at the moment.
3PL workstation
— A convenient tool for managing and implementing package registration tasks;
— Implemented monitoring and workload sharing among employees;

CONTRACTS, DOCUMENTS AND RECONCILIATION REPORTS

— The conclusion of a standard contract has been automated;
— A timeline with the statuses of contract approval has been developed;
— Semi-automatic approval of reconciliation acts has appeared.

PROFILE, REQUESTS AND MY DIRECTORIES

— All information is divided into sections;
— The correspondence in the appeals is arranged in a chat format;
— Users can edit directories.

MOBILE VERSION AND APP

— An adaptive mobile version of interfaces has appeared;

DEVELOPMENT

The personal account has become safer and faster:
— The speed of work has increased due to back-end optimization;
— Made the transition to a more secure REST API instead of GrahpQL.

AUXILIARY FUNCTIONS

— There is an English version of the cabinet and user manual;
— FESCO administrators control the processes directly in the personal account.

UI KIT

This is a library of components that contains all design elements and their states, ordered by type:
— Interfaces built on the basis of the library are consistent with each other;
— We are one step closer to creating a FESCO design system.


Прочая информация о кейсе

FESCO — крупнейшая частная транспортно-логистическая компания, доставляет грузы по воде, железной дороге и наземным транспортом.

Мы комплексно обновили личный кабинет MY. FESCO:
― Создали новый визуальный стиль и соответствующий UIKit. Новый дизайн стал более легким для восприятия и современным.
― Автоматизировали заключение типового договора, возврат порожних контейнеров.
― Реализовали полуавтоматическую сверку актов.
― Внедрили мастер учетку, облегчили настройку прав доступа и управление пользователями.
― Обновили стек технологий, перешли на REST API, оптимизировали backend. Кабинет стал быстрее и безопаснее.

--------------------------

FESCO — the largest private transport and logistics company that delivers cargo by sea, rail and road.

We have comprehensively updated MY. FESCO personal account:
— Created a new visual style and a corresponding UI toolkit. The design of the new personal account has become more modern and easier to understand;
— Automated the conclusion of a standard contract, the return of empty containers;
— Implemented semi-automatic reconciliation of acts;
— Implemented a master account, made it easier to set up access rights and manage users;
- Updated the technology stack, switched to the REST API, optimized the back-end. The personal account has become faster and safer.

Текущая доступность работы

Внутренняя система, доступна только зарегистрированным пользователям.

Скриншоты

Share
Серебро
• Лучший дизайн интранета
Tagline Awards 2022

Номинации

Интранеты и личные кабинеты → Личный кабинет
Интранеты и личные кабинеты → Дизайн / юзабилити

Дата запуска

1 декабря 2021 года

Авторы

Аккаунт менеджер — Павел Мелдажис
Проект-менеджер — Мария Шестакова
Дизайнеры — Виктория Самохвалова, Дмитрий Баршев
Арт-директор — Максим Щенников
Тимлид — Владислав Афанасьев
Команда разработки — Иван Плюснин, Михаил Шатилов, Владислав Рухлов, Роман Рачеев.
Проектировщик — Ирина Казанская

Ссылки

arealidea.ru