UX/UI дизайн Осьминожка

Агрокомплекс

крупнейший аграрный
холдинг России.

о компании

«Агрокомплекс» им. Н.И. Ткачёва с 1993 года прошёл путь от небольшой фирмы до одного из крупнейших аграрных холдингов страны.Наш дом Юг России — удивительные места, где воздух чистый, солнце ласковое, а почва плодородная, где веками трудились душевные, гостеприимные люди, настоящие хозяева на своей земле. Мы чувствуем за собой поколения предков и знаем, как использовать богатства природы с благодарностью — так, чтобы её дары становились только щедрее.

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

dev-colors

проблема

Партнёры компании через сайт заказывают продукцию для своих магазинов. Основная нагрузка по обработке заказов лежит на менеджерах. При этом многие инструменты работы — связь по телефону, подтверждение заказа через e-mail, ручная обработка заказов — уже устарели. Нам нужно было решить проблему нагрузки менеджеров «Агрокомплекса» и перевести оформление заказов полностью в автоматизированный режим.

задачи

1 task-1

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

2 task-1

Создание личного кабинета с учётом особенностей сферы бизнеса.

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

автоматизированная система для оптовиков и менеджеров компании

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

cabinet-lg
cabinet-sm

К этому мы пришли с помощью реализации следующего функционала:

cabinet-arrow
идея №1
Мы разделили всех посетителей портала на две группы —
авторизованные и неавторизованные пользователи.
Неавторизованные пользователи видят полный каталог продукции, но с ограниченным
функционалом. У них есть возможность запросить цену и оставить заявку на регистрацию.
idea-1
Авторизованные пользователи видят полный каталог продукции, цену, возможность
редактировать количество
idea-2
chicks
идея №2
Разделение всех пользователей на
суперпользователей и просто пользователей.
Попробуем на словах представить вам непростую
схему взаимодействия «Агрокомплекса» с дилерами.
У компании существуют точки отгрузки продукции и дилеры по всей России.
idea-1
Дилеры могут находиться в разных регионах и иметь несколько магазинов. Для того, чтобы
одному заказать нужный товар для своего магазина, существует личный кабинет. bean
idea-2
Разные пользователи одного дилера будут объединены одним суперпользователем, который
сможет контролировать процессы по каждой области и торговой точке. mashroom
idea-2
mashroom

таким образом,
суперпользователь:

tick

Создаётся автоматически, по факту отработки скрипта, работающего с результатами обмена 1С с базой сайта. Если контрагент новый, то проверяется наличие пользователя с указанными данными (электронной почтой, телефоном и ФИО).

Если пользователя нет в системе, тогда он создаётся автоматически, а есть есть, в личном кабинете добавляется связь с новым контрагентом.

tick

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

super

Как это реализовано
на практике

1 этап:

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

practice-1 practice-1
2 этап:

Содержание корзины комплектуется исходя из перечня доступных товаров для каждой торговой точки на основании условий договора контрагента (определяется доступным складом, ассортиментом, ценами).

practice-1 practice-1
3 этап:

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

practice-1 practice-1
way

наш подход
к работе

Не всегда мы работаем только лишь на основании информации, которую предоставляет заказчик. Часто мы погружаемся в бизнес-процессы компании, для того, чтобы создать продукт, который эффективно будет решать поставленные перед бизнесом задачи. В случае с «Агрокомплексом» мы проводили продуктовую аналитику, основываясь на коммуникации с сотрудниками разных подразделений холдинга.

Так, к разработке у нас добавляется ещё несколько этапов:

аудит

аналитика полученных данных

Выработка решений и их отработка с клиентом

  • Прототипирование и проектирование
  • Дизайн
  • Программирование
  • Ввод в эксплуатацию

особенности проекта:

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

Документооборот

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

3

автоматизация

«Агрокомплекс» может выдать доступ партнёру, у которого есть несколько торговых точек по всей стране. Так формируется суперпользователь. Суперпользователь создаёт одного или несколько дополнительных пользователей для своих менеджеров, выделяет им договоры для оформления покупки. Это позволяет автоматизировать деятельность компании и распределить нагрузку менеджеров по своим сотрудникам и сотрудникам клиента.

4

Использование NUXT.js

Решение написано с использованием библиотек NUXT.js. Это позволит нам в будущем использовать сайт через установку иконки на рабочем столе смартфона. Технология также позволит в кратчайшие сроки сделать приложение для системы Android, а затем IOS. Такое масштабирование проекта обусловлено особенностями работы его целевой аудитории. Менеджерам небольших торговых точек проще пользоваться телефоном для оформления заказа.

tipo-bg

дизайн-система

Мы провели исследование, начав с анализа текущего дизайна магазина. Команда пообщалась с представителями компании, чтобы понять, какие требования и ограничения у них есть в отношении дизайна. На основе исследования мы разработали концепцию дизайн-системы.
Цветовая схема

elements

#8BC63E

texts

#141716

texts2

#999999

lines

#bebebe

lines2

#E6E6E6

background

#e5e5e5

label, price

#EA4B48

Типографика
circe Regular _ Book _ Bold _ Italic
Иконки
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Следующим шагом было создание дизайн системы на основе разработанной концепции. Мы начали с разработки набора компонентов, которые могут быть использованы в различных частях магазина. Это позволило снизить время на создание новых страниц и ускорило разработку.
components
components components components components components

внутренние
страницы

После создания набора компонентов мы начали работу над дизайном отдельных страниц. В процессе использовали созданные компоненты и применяли их в соответствии с разработанной концепцией. Мы также обратили внимание на юзабилити и создали интуитивно понятный интерфейс для пользователей.
В процессе работы арт-директор тесно сотрудничал с командой разработчиков, чтобы убедиться, что дизайн система легко интегрируется в существующую архитектуру и не замедляет работу магазина. Дизайн-система позволяет быстро и эффективно создавать новые страницы и обеспечивает легкую навигацию для пользователей.
pages1 pages2 pages1 pages2
Background_Complete
технологический стэк
Java
nuxt
1c
vue-logo