Как мы сократили время работы сотрудников, доделав макеты в Битрикс24

Про клиента. Наш клиент занимается производством мерча на заказ. Работа выстроена так:

  1. приходит заказ на создание мерча;
  2. компания закупает оптом необходимые товары;
  3. передает на свое производство, чтобы нанести брендированный рисунок.

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

Как выглядел интерфейс Макеты до изменений.
Как выглядел интерфейс Макеты до изменений.

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

Задачу разделили на подзадачи:

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

Разработка. Возможно, читая процесс создания доработки, знатоки скажут: «Но ведь проблему можно было легко решить, создав смарт-процесс!» Согласны. Сейчас мы бы сделали именно так, но в то время, когда мы работали над проектом, этого функционала в Битрикс24 не было. И это, по нашему мнению, придает доработке особый интерес.

Первый этап: Создаем первую версию прототипа

Вместе с заказчиком мы набросали прототип. Выслушали пожелания и предложили свои решения. Доработка начала обретать форму. Стало понятно, что конкретно хочет видеть клиент. Как можно трансформировать функционал прежних Макетов.

Второй этап: Дизайнер создает прототип

Дизайнер получил черновой вариант прототипа и принялся за работу. Получившийся прототип отправили клиенту, и он оставил комментарии. В итоге мы получили такой вариант:

Прототип интерфейса, сделанный дизайнером нашего агентства bambit.ru
Прототип интерфейса, сделанный дизайнером нашего агентства bambit.ru

Третий этап: Прототип утвержден, отрисовываем интерфейс

Мы трансформировали прототип в тот вид, в котором Макеты будут отображаться в Битрикс24.

Отрисованный интерфейс.
Отрисованный интерфейс.
Всплывающее окно удаления файла.
Всплывающее окно удаления файла.
Новый интерфейс отображения товаров.
Новый интерфейс отображения товаров.

Попутно переделали дизайн «Статуса закупки», чтобы сделать отображение стадий и статусов визуально приятным. Стадии видны сверху так, как привык пользователь, а статусы указываются в окошке (все статусы можно увидеть, развернув список).

Новый дизайн «Статуса закупки».
Новый дизайн «Статуса закупки».

Четвертый этап: Программируем

Итоговый прототип мы передали в отдел программирования.

Пятый этап: Тестируем

Тестировщик нашел мелкие ошибки, и после этого программист отшлифовал доработку.

С какими трудностями мы столкнулись?

  • Проблема 1: PDF-файлы не подгружаются. В карточке заказа не видно картинку, а только иконку PDF-файла, нажав на которую можно перейти по ссылке и увидеть ее. Решение: эту проблему можно решить, подключив серверного разработчика. Только он может помочь решить проблему. Сейчас мы над этим работаем.
  • Проблема 2: При редактировании поля нет кнопки «Сохранить». Информация автоматически сохраняется в облако. Но это не работает в том случае, если элемент содержит PDF-файл. Чуть отвлекся, и файл исчез. Решение: мы создали костыль — бизнес-процесс с параметрами к данному элементу, чтобы PDF-файлы сохранялись. Клиент отправляет нам файл и информацию о нем, а мы сохраняем его в новых Макетах.

Вот так это выглядит.

Схема бизнес-процесса.
Схема бизнес-процесса.
Параметры запуска бизнес-процесса.
Параметры запуска бизнес-процесса.

Сравним макеты до доработки и после

Макеты. Макеты поступают в производство. У них есть статусы, файлы и т. п. Производство ведется в отдельной воронке сделки. Одна товарная позиция имеет свою воронку. Её можно посмотреть, если перейти в Бланк заказа. Здесь также рассчитывается себестоимость продукции. Еще в Макетах можно увидеть, на каком этапе работы сейчас находится заказ.

«Макеты» до доработки нашим дизайнером.
«Макеты» до доработки нашим дизайнером.

Макеты+ Новый интерфейс, удобный для менеджеров. Поля шире, вся нужная информация на одном экране.

Интерфейс разработанный нашим дизайнером.
Интерфейс разработанный нашим дизайнером.

Кликаем на товар. Его карточка открывается сразу, тогда как в обычных Макетах нужно было нажимать на бургер. Потом «редактировать».

Обновленный дизайн карточки товара.
Обновленный дизайн карточки товара.

Также в Макетах+ изменен интерфейс карточки товара. Если раньше нужно было долго листать, то сейчас вся карточка помещается на экран.

Обновленный интерфейс карточки товара.
Обновленный интерфейс карточки товара.

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

С помощью Макетов+ стало возможно формировать очередь на производство, а также получать информацию о том, когда примерно заказ будет готов.

Итог

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

Это временно. Вскоре останутся только Макеты+.

В будущем мы планируем запускать бизнес-процессы из Макетов+. Уже добавили кнопку как задел на будущее.

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

Ссылка на наши услуги по разработке:

Кейс подготовлен при поддержке гильдии интеграторов

Трудозатраты:

Бизнес-аналитик: 10 часов.

Дизайнер: 15 часов.

Разработчик: 70 часов.

Начать дискуссию