«Нова Пошта» — Личный кабинет

https://new.novaposhta.ua/

«Нова пошта» — украинская компания, которая за 16 лет стала лидером рынка доставки и драйвером его развития. Компания активно работает над разработкой и совершенствованием удобных для клиентов онлайн-сервисов. Сотрудничество «Нова пошта» и stfalcon.com было направлено на то, чтобы существенно улучшить текущий Личный кабинет и вывести пользовательский опыт на новый уровень.

Задачи, которые необходимо было реализовать в рамках этого проекта:

  1. Спроектировать новый интерфейс Личного кабинета
  2. Разработать веб-приложение
  3. Интегрировать frontend с API «Нова пошта»

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

Старт нового проекта начинается с исследования предметной области, анализа текущих проблем и обсуждения их с заказчиком. В случае Личного кабинета «Нова пошта» нам были предоставлены пользовательские истории, портрет посетителей сайта, отчет по опросу пользователей и результатам тестирования, которые здорово помогли в разработке интерфейса.

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

Material Design + Angular

Для ускорения разработки пользовательского интерфейса и создания высокопроизводительного веб-приложения было принято решение использовать библиотеку Material Design от Google, реализованную на фреймворке Angular. Такой подход к реализации интерфейса позволил сосредоточиться на бизнес-логике, продумать дизайн взаимодействия до мелочей, избежав написания с нуля UI и контролов ввода.

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

Авторизация пользователей

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

Список накладных

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

  • Те которые были созданы, но ещё не оформлены в отделении или курьером
  • Входящие отправления
  • Исходящие отправления
  • Шаблоны-заготовки
  • Архивированные
  • Корзина с возможностью восстановления накладных

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

Кнопка быстрого доступа

Пожалуй, самый узнаваемый элемент Material Design — это так называемая Float Action Button. Этот элемент используется для быстрого доступа к самым важным функциям и всегда находится в одном месте на странице. Это отличный способ совершить необходимое действие с любого экрана приложения.

Создание накладной

Большое внимание при разработке дизайна было уделено окну создания накладной. Для упрощения ввода данных и запоминания расположения полей мы выстроили элементы по Z-паттерну — данные сгруппированы по рядам, заполнение каждого ряда слева направо. Так как создание накладной — это повторяющийся процесс, мы постарались максимально полно заполнить данные по умолчанию. Например, объявленная стоимость посылки указана как минимально возможная. При этом, если указана обратная доставка денег, то объявленная стоимость автоматически повышается.

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

Трекинг посылки

Все исходящие и входящие отправления отображаются в интерфейсе Личного кабинета с общей информацией и историей движения посылки.

Шаблоны, реестры

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

Контакты и адреса

Система хранит базу контактов пользователя с возможностью быстрого поиска по имени или номеру телефона. У каждого контрагента может быть несколько адресов получения — это может быть как отделение «Нова пошта», так и личный адрес. Для удобства контакты можно объединять в списки.

Статистика

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

Особености фронтэнд-архитектуры

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

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

Adapter pattern

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

Библиотека Angular-Translation помогла в реализации мультиязычности. Язык приложения определяется по языку браузера пользователя или по языку операционной системы. Язык загружается всего раз и сохраняется локально в браузере, а затем обновляется при обновлении версии приложения.

Наша миссия — упрощать жизнь людей, создавая полезное и удобное программное обеспечение
Свяжитесь с нами, и мы поможем решить ваши задачи

Над проектом работали:

  • Владимир Сутовский Владимир Сутовский

    Руководитель проектов

  • Максим Нестерук Максим Нестерук

    Дизайнер

  • Руслан Хомяк Руслан Хомяк

    Front-end разработчик

  • Андрей Сягровский Андрей Сягровский

    Front-end разработчик

  • Миша Гасюк Миша Гасюк

    QA-менеджер

  • Евгений Гуринович Евгений Гуринович

    Системный администратор