Перезвоните мне
ГлавнаяПортфолиоВеб-конструктор контейнеров

Разработка конструктора для поставщика складских контейнеров

Сократили путь пользователя до покупки и разгрузили отдел продаж клиента

Отрасль

Строительство

Регион

США

Год

2024

Услуги
Бэкенд
Фронтенд
Технологии
Canvas
JavaScript
Laravel
Next.js
PHP
Сложность
Обложка конструктора контейнеров
Время разработки

10 месяцев

Команда

1 TM, 1 PM, 1 Frontend, 1 Backend , 1 QA

Статус проекта

Проект продолжает развиваться и масштабироваться

О клиенте

Компания из США, которая специализируется на кастомизации морских контейнеров. Компания трансформирует контейнеры под различные нужды: для транспортировки, под офисы, под складские и другие помещения. 

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

Ситуация, в которой обратился

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

Задача

Усовершенствовать текущий конструктор контейнеров. 

Требования к конструктору от клиента: 

1) визуально приятный и понятный пользовательский интерфейс; 

2) легкое управление элементами и их вариативность;

3) быстрота и оперативность; 

4) масштабируемость системы для развития в дальнейшем.

Изображение проекта

Баннер конструктора контейнеров

Решение

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

Артем Беляков
Артем Беляков
Техлид проекта

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

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

Читать полностью

Возможности конструктора

Личный кабинет конструктора

Экраны личного кабинета

Управление проектами из личного кабинета

Пользователь может создать личный кабинет. Возможности личного кабинета: 

  • создание новых проектов;
  • управление личными данными и настройками безопасности;
  • редактирование проектов: можно сделать копию, чтобы поэкспериментировать с настройками, или просто удалить лишние проекты;
  • отслеживание статуса проекта.
Создание проекта в конструкторе

Экраны создания проекта

Создание проекта с нуля или на основе шаблона

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

Далее нужно выбрать параметры контейнера: новый или б/у, его размер.

Эти настройки также можно менять в процессе работы над проектом.

Рабочая область конструктора

Рабочий интерфейс для создания проекта

Сбор проекта в рабочей области

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

Проект контейнера можно посмотреть с 5 ракурсов, а также снаружи и внутри.

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

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

Многообразие элементов

Элементы для контейнеров

Конструктор элементов

Благодаря технологии Canvas в конструкторе можно взаимодействовать с широким спектром элементов. Конструктор позволяет:

  • выбрать вид окон;
  • выбрать вид дверей;
  • выбрать оснащение: вентиляцию, кондиционер, 
осветительные приборы, электрику;
  • выбрать цвет для покраски контейнера из палитры 63 цветов; 
  • разместить на контейнере логотип компании или текст.
Разметка при перемещении элементов контейнера

Разметка при перемещении элементов контейнера

Добавление и перемещение элементов

Элементы можно легко добавить или передвинуть по рабочей области контейнера. 

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

Если пользователь захочет расположить элемент не верно по отношению к другому (слишком близко, ассиметрично и пр.), система не позволит это сделать и вернет элемент на первоначальное место.

Экраны настроек элементов

Экраны настроек элементов

Изменение настроек элементов

При добавлении на контейнер, каждый элемент получает свой номер. Все добавленные элементы отображаются в правой части экрана по слоям — каждый элемент = отдельный слой. 

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

Перейти к настройкам можно из правого меню или выбрать элемент и нажать “шестеренку”, которая откроет настройки.

Изменения в конструкторе сохраняются автоматически, но у пользователя есть также опция сохранить их самому.

Окно с комментариями

Окно с комментариями

Комментарии к элементам

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

Комментарий будет отображаться под элементом, его можно отредактировать или удалить.

Интеграция с CRM-системой

Отправка проекта из личного кабинета в CRM-систему

Для конструктора настроена интеграция с CRM-системой клиента, в которой работают менеджеры по продажам.

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

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

Экран создания ссылки на проект

Отправка проекта другим пользователями

Пользователь может поделиться ссылкой на свой проект по email или через мессенджеры. 

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

Этапы работы

1

Сбор требований и дизайн

Этот этап сформулировал основу для разработки веб-конструктора. Главной задачей было разработать удобный и легкий в использовании продукт, который упростит покупателю выбор контейнера и дополнительных опций к нему. 

Чтобы определить требования для проекта, мы проанализировали бизнес-задачи клиента, изучили потребности целевой аудитории через отзывы, проанализировали рынок контейнеров. 

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

Для высокой производительности продукта, мы выбрали Canvas, и с учетом этого сформировали технические требования для проекта.  

2

Фронтенд

Для фронтенд-разработки использовали фреймворк Next.js с технологией Canvas. Next.js позволил создать реактивное веб-приложение, а Canvas — интерактивный конструктор контейнеров. 

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

3

Бэкенд

Бэкенд разрабатывали на Laravel, чтобы создать удобный и многофункциональный личный кабинет. 

4

Тестирование

Мы протестировали функционал на ошибки и баги. Обнаруженные ошибки сразу исправили. 

Также на этой стадии мы оптимизировали основные функции Builder, чтобы улучшить производительность и обеспечить более стабильную работу проекта.

Результаты

1. Уникальность и актуальность идеи создания веб-конструктора для контейнеров с использованием технологии Canvas привлекли внимание и завоевали интерес у пользователей;

2. Положительные отзывы и реакции пользователей на использование веб-конструктора послужили показателем успешной реализации проекта;

3. Проект продолжает развиваться, добавляются новые функции, элементы и возможности масштабирования.

Понравился кейс?

Обсудить мой проект

Ознакомьтесь с другими нашими проектами

Мобильное приложение спортивного издания «ПЛЕЙМЕЙКЕР»

Превью кейса Playmeyker

Лендинг услуги по внедрению платформы Optimacros компанией Атомс-Консалтинг

Миниатюра портфолио Optimacros

Приложение для сбора данных о качестве мобильной связи в зданиях

Превью кейса Network Analitics

Интернет-магазин БАДов и витаминов

Превью кейса Nature's Sunshine

Каталог индийских фильмов Somindram

Превью кейса Somindram

Сайт крупнейшей в Петербурге компании водного туризма

Превью кейса Нева Тревел

Этот сайт использует cookies.

Этот сайт использует файлы cookie для хранения информации на вашем устройстве.