Продающая страница с онлайн-калькулятором
для «Стелла-техник»
«Стелла-техник» работает на Российском рынке с 1991 года, занимается поставками складского оборудования. Один из товаров — сборные складские стойки, которые востребованы клиентами компании. Перед нашей командой стояла задача разработать онлайн-калькулятор, который позволит клиентам на сайте спроектировать и рассчитать стоимость собственного варианта складской стойки. Как выяснилось во время работы: задача нетривиальная и интересная.
Задача, поставленная компанией «Стелла-техник»
- Разработать калькулятор по расчету сборных складских стоек
Резюме проекта
- Подготовка к запуску страницы: 2 месяца
- Сдача работ: июнь 2020
Какие задачи мы решали при разработке онлайн-калькулятора для «Стелла-техник»
- Изучили бизнес-процесс и придумали идею продукта
- Сделали прототип интерфейса онлайн-калькулятора
- Сделали 3D-модели и рендеры элементов стойки
- Разработали дизайн страницы
- Разработали JS-модуль для сборки, визуализации и расчета стоимости
- Сверстали и запустили страницу
- Разработали пользовательскую инструкцию по сборке
- Подключили страницу к интернет-магазину
Какими инструментами
пользовались
Проект калькулятора делали в Excel, прототип и дизайн в Figma, использовали 3D max для моделирования, HTML/CSS и очень много JS. Много часов провели в Skype, обсуждая принцип работы и согласовывая результат.
Сайт разработан на mod-x. Мы подключили к сайту готовый модуль и верстку страницы: калькулятор передает список id номенклатуры для интернет-магазина, отправляет собранные стойки в корзину — сразу с ценой.
Изучили бизнес-процесс, разработали концепцию решения
Перед началом работы мы внимательно изучили технические характеристики стоек и их конструкции. Затем подробно описали, какие задачи в какой последовательности решает для заказчика менеджер по продажам. Выяснили, какие данные и в каком формате могут дать заказчики, а где им требуются подсказки и помощь.
Сделали прототип интерфейса
Мы описали все возможные варианты действий пользователя для заказа. Среди них: выбор размера стойки и варианта ее установки, добавление возможности внутрискладского перемещения. Покупателям важно выбрать размер основания и определить цвета ящиков, из которых собрана система.
Много информации получили у менеджеров по продажам: самые популярные размеры и типы стоек заказывают 87% клиентов. Эти типы сделали выбором по умолчанию при начале работы с калькулятором.
Интересно: с точки зрения интерфейса оказалось логично собирать стойку снизу вверх, а по технологии необходимо действовать в обратном порядке.
Коллеги из компании «Стелла-техник» согласились: такая логика страницы для конечного пользователя удобнее. Для избежания путаницы мы, вместе с компанией, разработали специальную инструкцию по сборке складских стоек. Для создания прототипа нам очень пригодился Excel.
Сделали 3D-модели и рендеры элементов стойки
Перед нашей командой стоял выбор: отснять фотографии всех исходных частей и использовать их, либо сделать 3D-модель. Фотографии (включая работу фотографа и последующую ретушь) обходились примерно в 3 раза дороже. К тому же существовал риск того, что потребуются изменения, а это дополнительные съемки.
Мы выбрали разработку фото-реалистичных рендеров 3D-моделей. Это стало хорошим решением: мы уменьшили бюджет на разработку и легко вносили изменения, когда это требовалось.
Разработали дизайн
При разработке дизайна страницы нас практически ничего не ограничивало, кроме заданных фирменных цветов и цветов комплектующих, и у нас был простор для творчества.
Использовали сетку на 12 широких столбцов по 90px: для создания ощущения устойчивости. Шрифт — Montserrat. Во время работы над дизайном подготовили все необходимые визуализации для работы калькулятора: ряды из ящиков всех цветов и комплектующие.
Позднее у нас появилась задача подготовить дизайн страницы для ее интеграции в сайты контрагентов компании — наши дизайн-решения позволили справиться с задачей с минимальными трудозатратами.
Разработали и сверстали пользовательскую инструкцию по сборке
Для удобства клиентов компании совместно с сотрудниками «Стелла-техник» мы разработали подробную инструкцию по сборке любого варианта стойки. Инструкция размещена на сайте в формате pdf и подходит для печати на А4.
Кроме того, мы подготовили файл для печати в типографии, в цвете, на качественной бумаге, для отправки покупателям вместе с заказом. Нашим дизайнерам было непросто адаптироваться к разработке технической документации: чаще они сталкиваются с задачами по рекламной полиграфии. Посмотрите, что у нас получилось:
Разработали JS-модуль для сборки, визуализации и расчета стоимости
Мы немного переживали: наш отдел frontend-разработки имеет мало опыта работы с mod-x. При подключении столкнулись лишь с одной проблемой: собранная стойка в корзине выглядела набором комплектующих, и пользователь мог уже в корзине изменить состав.
Эту часть успешно решили: стали объединять стойку в товарную единицу со спецификацией. Получили первый позитивный опыт от работы с mod-x.
Сверстали и подключили страницу к интернет-магазину
Весь интерфейс работает исключительно в браузере:
при выборе типа стоек мы задаем размеры и количество необходимых комплектующих. К ним добавляем визуализацию, которую видит пользователь, а затем формируем список номенклатуры, необходимой
для создания стойки, и её стоимость.
Мы сделали возможность создать неограниченное количество складских стоек на одной странице,
чтобы пользователи могли сделать выбор и сравнить то, что у них получилось.
Результат работы
Продающая страница с калькулятором для компании, интегрированная во внутренние системы
Спасибо за заявку
Мы вам перезвоним
Соглашение на обработку персональных данных
Предоставляя свои персональные данные ИП Тихомирова посредством сайта 3owls.ru, Пользователь даёт согласие на обработку, хранение и использование своих персональных данных на основании ФЗ № 152-ФЗ «О персональных данных» от 27.07.2006 г. в следующих целях:
- Осуществление клиентской поддержки
- Получения Пользователем информации о маркетинговых событиях
- Проведения аудита и прочих внутренних исследований с целью повышения качества предоставляемых услуг.
Под персональными данными подразумевается любая информация личного характера, позволяющая установить личность Пользователя/Покупателя такая как:
- Фамилия, Имя, Отчество
- Контактный телефон
- Адрес электронной почты
Персональные данные Пользователей хранятся исключительно на электронных носителях и обрабатываются с использованием автоматизированных систем, за исключением случаев, когда неавтоматизированная обработка персональных данных необходима в связи с исполнением требований законодательства.
Компания обязуется не передавать полученные персональные данные третьим лицам, за исключением следующих случаев:
- По запросам уполномоченных органов государственной власти РФ только по основаниям и в порядке, установленным законодательством РФ
- Стратегическим партнерам, которые работают с Компанией для предоставления продуктов и услуг, или тем из них, которые помогают Компании реализовывать продукты и услуги потребителям. Мы предоставляем третьим лицам минимальный объем персональных данных, необходимый только для оказания требуемой услуги или проведения необходимой транзакции.
Компания оставляет за собой право вносить изменения в одностороннем порядке в настоящие правила, при условии, что изменения не противоречат действующему законодательству РФ. Изменения условий настоящих правил вступают в силу после их публикации на Сайте.
Дата обновления соглашения: 19 октября 2018г.
Оставить заявку
Отправьте вопрос и в ближайшее рабочее
время с вами свяжется менеджер