Продающая страница с онлайн-калькулятором
для «Стелла-техник»
«Стелла-техник» работает на Российском рынке с 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 г. в следующих целях:
- Осуществление клиентской поддержки
- Получения Пользователем информации о маркетинговых событиях
- Проведения аудита и прочих внутренних исследований с целью повышения качества предоставляемых услуг.
Под персональными данными подразумевается любая информация личного характера, позволяющая установить личность Пользователя/Покупателя такая как:
- Фамилия, Имя, Отчество
- Контактный телефон
- Адрес электронной почты
Персональные данные Пользователей хранятся исключительно на электронных носителях и обрабатываются с использованием автоматизированных систем, за исключением случаев, когда неавтоматизированная обработка персональных данных необходима в связи с исполнением требований законодательства.
Компания обязуется не передавать полученные персональные данные третьим лицам, за исключением следующих случаев:
- По запросам уполномоченных органов государственной власти РФ только по основаниям и в порядке, установленным законодательством РФ
- Стратегическим партнерам, которые работают с Компанией для предоставления продуктов и услуг, или тем из них, которые помогают Компании реализовывать продукты и услуги потребителям. Мы предоставляем третьим лицам минимальный объем персональных данных, необходимый только для оказания требуемой услуги или проведения необходимой транзакции.
Компания оставляет за собой право вносить изменения в одностороннем порядке в настоящие правила, при условии, что изменения не противоречат действующему законодательству РФ. Изменения условий настоящих правил вступают в силу после их публикации на Сайте.
Дата обновления соглашения: 18 января 2020 г.
Оставить заявку
Отправьте вопрос и в ближайшее рабочее
время с вами свяжется менеджер