Кейсы

Продающая страница с онлайн-калькулятором
для «Стелла-техник»

Разработали крутой онлайн калькулятор
для складских стоек.
2020
Маркетинг
Дизайн
Frontend
3D-моделирование
Одностраничный магазин
Продающая страница с онлайн-калькулятором <span><br>для «Стелла-техник»</span>
«Стелла-техник» работает на Российском рынке с 1991 года, занимается поставками складского оборудования. Один из товаров — сборные складские стойки, которые востребованы клиентами компании. Перед нашей командой стояла задача разработать онлайн-калькулятор, который позволит клиентам на сайте спроектировать и рассчитать стоимость собственного варианта складской стойки. Как выяснилось во время работы: задача нетривиальная и интересная.

Задача, поставленная заказчиком

Разработать калькулятор по расчету сборных складских стоек

Резюме проекта

Подготовка к запуску страницы:
2 месяца
Сдача работ:
июнь 2020

Какими инструментами пользовались

Проект калькулятора делали в Excel, прототип и дизайн в Figma, использовали 3D max для моделирования, HTML/CSS и очень много JS. Много часов провели в Skype, обсуждая принцип работы и согласовывая результат.
Сайт разработан на mod-x. Мы подключили к сайту готовый модуль и верстку страницы: калькулятор передает список id номенклатуры для интернет-магазина, отправляет собранные стойки в корзину — сразу с ценой.

Изучили бизнес-процесс, разработали концепцию решения

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

Сделали прототип интерфейса

Мы описали все возможные варианты действий пользователя для заказа. Среди них: выбор размера стойки и варианта ее установки, добавление возможности внутрискладского перемещения. Покупателям важно выбрать размер основания и определить цвета ящиков, из которых собрана система.
Много информации получили у менеджеров по продажам: самые популярные размеры и типы стоек заказывают 87% клиентов. Эти типы сделали выбором по умолчанию при начале работы с калькулятором.
Интересно: с точки зрения интерфейса оказалось логично собирать стойку снизу вверх, а по технологии необходимо действовать в обратном порядке.
Коллеги из компании «Стелла-техник» согласились: такая логика страницы для конечного пользователя удобнее. Для избежания путаницы мы, вместе с компанией, разработали специальную инструкцию по сборке складских стоек. Для создания прототипа нам очень пригодился Excel.
Брендирование и айдентика

Сделали 3D-модели
и рендеры элементов стойки

Перед нашей командой стоял выбор: отснять фотографии всех исходных частей и использовать их, либо сделать 3D-модель. Фотографии (включая работу фотографа и последующую ретушь) обходились примерно в 3 раза дороже. К тому же существовал риск того, что потребуются изменения, а это дополнительные съемки.
Мы выбрали разработку фото-реалистичных рендеров 3D-моделей. Это стало хорошим решением: мы уменьшили бюджет на разработку и легко вносили изменения, когда это требовалось.
3d

Разработали дизайн

При разработке дизайна страницы нас практически ничего не ограничивало, кроме заданных фирменных цветов и цветов комплектующих, и у нас был простор для творчества.
Использовали сетку на 12 широких столбцов по 90px: для создания ощущения устойчивости. Шрифт — Montserrat. Во время работы над дизайном подготовили все необходимые визуализации для работы калькулятора: ряды из ящиков всех цветов и комплектующие.
Позднее у нас появилась задача подготовить дизайн страницы для ее интеграции в сайты контрагентов компании — наши дизайн-решения позволили справиться с задачей с минимальными трудозатратами.
Дизайн

Разработали и сверстали пользовательскую инструкцию по сборке

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

Разработали JS-модуль
для сборки, визуализации
и расчета стоимости

Мы немного переживали: наш отдел frontend-разработки имеет мало опыта работы с mod-x. При подключении столкнулись лишь с одной проблемой: собранная стойка в корзине выглядела набором комплектующих, и пользователь мог уже в корзине изменить состав.
Эту часть успешно решили: стали объединять стойку в товарную единицу со спецификацией. Получили первый позитивный опыт от работы с mod-x.
JS-модуль
Интернет-магазин
Сверстали и подключили страницу к интернет-магазину
Весь интерфейс работает исключительно в браузере: при выборе типа стоек мы задаем размеры и количество необходимых комплектующих. К ним добавляем визуализацию, которую видит пользователь, а затем формируем список номенклатуры, необходимой для создания стойки, и её стоимость.
Мы сделали возможность создать неограниченное количество складских стоек на одной странице, чтобы пользователи могли сделать выбор и сравнить то, что у них получилось.
Вот посмотрите:
Интернет-магазин

Результат работы

Продающая страница с калькулятором для компании, интегрированная во внутренние системы
5 недель
Заняла разработка страницы, включая моделирование и создание калькулятора
1,2 сек.
Скорость загрузки страницы с работающей Яндекс.Метрикой
3 человека
Проектная команда, необходимая для реализации такого решения
Заказать проект

У вас есть похожая задача? Напишите нам и мы поделимся опытом и поможем с реализацией!

Написать
Заказать проект
Кейсы
Cмотрите
похожие кейсы
Web-AR для GaussWeb-AR для Gauss
Web-AR
3D-моделирование
Сайт-визитка
Web-AR для Gauss
Сделали небольшой промо-сайт и решение с дополненной реальностью на web-ar для компании Вартон
2022
AmarylisAmarylis
Дизайн
Маркетинг
Брендинг
Bitrix
еще ...
Интернет-магазин
Интеграции
Amarylis
В 2019 году компания перезапускала интернет-магазин, и, столкнувшись с задачей проектирования интерфейса и создания дизайна обратилась
к нам за помощью.
2020
B.Billionaire / OpiumB.Billionaire / Opium
Фото
Реклама
B.Billionaire / Opium
Фотосопровождение
магазинов люкс сегмента.
2019
Pro-CosmetikPro-Cosmetik
Маркетинг
Брендинг
Дизайн
еще ...
Bitrix
SMM
Реклама
Полиграфия
Интернет-магазин
Интеграции
Pro-Cosmetik
Интернет-магазин для сети
магазинов профессиональной
косметики.
2018
Стелла ТехникСтелла Техник
Фото
Стелла Техник
Фотосопровождение наших друзей
из компании Стелла Техник
2020
NoirotNoirot
Фото
Реклама
Noirot
Совместно с компанией ООО Нуаро наша команда провела предметную фотосъёмку для каталога и рекламы.
2019
CronwoodCronwood
Дизайн
Frontend
Одностраничный магазин
Quiz
еще ...
Cronwood
Краткий экскурс в мебельный мир Севастополя
2019
Страус-ХаусСтраус-Хаус
Маркетинг
Дизайн
Bitrix
еще ...
Фото
SMM
Сайт-визитка
Полиграфия
Интернет-магазин
Страус-Хаус
Маркетинг и позиционирование услуг
2018
Panam PizzaPanam Pizza
Дизайн
Верстка
Frontend
еще ...
Создание презентаций
Panam Pizza
Разработали набор промо-материалов для франшизы сети пиццерий Панам.


2022
Premium TechnologiesPremium Technologies
Интеграции
Реклама
Одностраничный магазин
еще ...
Промо-страница
Разработка
Маркетинг
Дизайн
Верстка
Landing page
Premium Technologies
Разработали промо-сайт и рекламные кампании для продвижения розничных и мелкооптовых продаж продукции Schüco и дополнительных услуг компании Премиум Технолоджис.
2021
АНО ДПО РИПКиПМРАНО ДПО РИПКиПМР
Маркетинг
Брендинг
Дизайн
Bitrix
еще ...
Реклама
Интернет-магазин
Сквозная аналитика
АНО ДПО РИПКиПМР
Создали интернет-магазин учебных программ для медицинских работников и рекламную кампанию на федеральном уровне.
2018
ПельменикиПельменики
Маркетинг
Дизайн
Промо-страница
Фото
еще ...
Полиграфия
Интернет-магазин
Пельменики
Креативное и маркетинговое
сопровождение проекта Пельменики.
2020
Oscar-Et-ValentineOscar-Et-Valentine
Маркетинг
Дизайн
Интеграции
еще ...
Bitrix
Oscar-Et-Valentine
Случается, что после запуска сайта сразу же требуется его редизайн. С сайтом Oscar Et Valentine произошла именно такая история.
2020
Показать еще