Разработали калькулятор, мобильное приложение, сайт и бота для промышленного 3D-производства

Все началось одним дождливым утром. К нам пришел клиент и заказал калькулятор для подсчёта съеденных пицц...

Шутка конечно же. На самом деле, это был бот для общения с котом по душам. Сначала мы… Да нет, это снова шутка. Простите.

Но если серьезно, то мы сейчас недалеко ушли от правды. Клиент, который к нам обратился, занимается промышленным 3D-производством. А с помощью него сегодня можно напечатать почти что угодно: калькуляторы, котов, людей и мечты.

Клиент заказал у нас онлайн-калькулятор для расчета стоимости 3D-моделей. Ему понравилась наша работа, и он не остановился на достигнутом, а заказал еще мобильное приложение, лендинг и бота.

Что получилось, и как это работает — рассказываем в статье.

Наш заказчик в этом кейсе — научно-производственная компания Protocon. Она печатает 3D-модели сутками напролет в промышленных масштабах. Нужны лопасти для самолета? Вот, пожалуйста. Приборная панель для авиатренажера? Protocon сделает в лучшем виде!

Осталось дождаться, когда появится 3D-печать кофе с утра, вот тогда заживем!

Наш заказчик решил упростить жизнь себе и своим клиентам, и поэтому заказал у нас разработку онлайн-калькулятора. Для значительного ускорения обработки заказов. Сейчас все объясним.

Как было до калькулятора. Для того, чтобы заказать 3D-модель клиент сначала отправлял в Protocon файл с макетом своей модели. Компания получала файл и связывалась с клиентом, чтобы уточнить детали заказа. Затем передавала информацию о заказе инженеру.

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

Как стало с калькулятором. Клиент заходит на сайт, загружает на него свой файл с 3D-моделью и происходит волшебство! Все размеры и цена модели уже на экране. Там же автоматически появляется загруженный макет, его можно покрутить и полюбоваться со всех сторон. И все происходит быстрее, чем если сказать «3D-печать».

Тестирование. Перед тем, как выпихнуть калькулятор из гнезда, точнее… перед запуском его рабочей версии в сеть мы провели… ИСПЫТАНИЯ! На них убедились, что калькулятор исправно работает. Ведь мы не хотим, чтобы он строил козни будущим пользователям.

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

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

Интерактивные элементы: все, что можно нажать, открыть, повертеть или покрутить — работают исправно. А пользователю удобно со всем этим взаимодействовать.

Итого, этапы проекта:

Стек технологий: React, TypeScript, PHP, Laravel, Blender

Сроки проекта: 3 недели

Теперь переходим ко второму проекту.

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

Что мы и сделали. Теперь можно загрузить макет 3D-модели в приложение Protocon и прямо в смартфоне увидеть цену её печати, параметры и рассмотреть с разных сторон.

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

А для того, чтобы сократить бюджет, мы не создавали мобильное приложение с нуля, как это часто делают в it-проектах. Мы взяли начинку (backend) от десктопной версии калькулятора и немного доработали её под мобильные устройства. А остальные силы и время потратили на мобильный пользовательский интерфейс (frontend).

Этапы проекта

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

Мобильное приложение мы тоже знатно протестировали! Еще хлеще, чем десктопную версию, да-да. Провели все те же тесты и сделали еще два дополнительных:

Итого, мы провели:

Все это позволило нам своевременно определить ошибки в работе it-продукта перед его релизом и устранить их. После чего, мы загрузили приложение в google play и app store.

Стек: React Native, Redux

Сроки проекта: 1,5 месяца

Protocon заказали у нас также и сайт. Для своих текущих клиентов и для завоевания сердец новых.

Визуальная концепция и структура сайта

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

Так мы оформили сайт в темных цветах, ведь, как известно, чем темнее сайт, тем он серьезнее. Снова шутим, простите. На самом деле дизайн сайта Protocon вдохновлен интерфейсом программ по работе с 3D-моделями. В нем также, как и в программах вся информация на одном экране и присутствует минимальный скроллинг. Даже координаты основного цвета сайта выглядят, как #3D3D3D — отсылка к деятельности компании.

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

Только здесь есть и другая, более важная цель. Прежние клиенты и так всё знают про Protocon и 3D-печать, им на сайте нужен только калькулятор и возможность сделать заказ. Для них эти кнопки мы и подсветили, чтобы они могли быстро их найти.

Для главного экрана сайта мы разработали 3D-модель логотипа компании. Её можно вращать также, как бармен вращает бутылки, при этом она будет менять цвет и оттенок. Это наш способ показать продукт «лицом», рассказать о том, что тут могут создать нужную 3D-модель с разными текстурами и в любом цвете.

При этом 3D-логотип не то, чем кажется. Если вы посмотрите на него, то скорее всего подумаете, что это 3D-модель, но на самом деле это не так. Дело в том, что мы не могли разместить на сайте просто файл с 3D-моделью, как это сделано в калькуляторе. В 99% браузеров и устройств такое изображение бы зависало.

Поэтому для демонстрации 3D-логотипа на главной странице мы использовали другой подход: разместили интерактивный слайдер с множеством изображений логотипа. Когда пользователь взаимодействует с фигурой, то ему кажется, что он крутит трехмерную модель, но на самом деле он листает слайдер из картинок.

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

Также мы учли, что пользователями сайта будут профессионалы в области промышленной 3D-печати — инженеры и сотрудники отделов снабжения. Это очень серьёзная и вдумчивая публика, её доверие не так-то просто заслужить. Но если сделать на сайте акцент на описании технологий, оборудования и материалов, то может получиться. Что мы и сделали.

Мы рассказали на сайте о том, что Protocon изготавливает единичные экземпляры 3D-моделей и партии. Упомянули о том, что в компании есть инженеры для решения сложных технических вопросов. Также добавили раздел с примерами работ, описанием технологий и оборудования. Все страницы сайта сообщаются между собой, так что пользователь всегда может вернуться на самую первую страницу сайта с любой из других страниц.

Разработали UI-kit — набор готовых решений для пользовательского интерфейса. В нем мы показывали принципы, рекомендации и требования для размещения и изменения элементов на сайте. Будь то кнопки, шрифт или крупные графические элементы.

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

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

В этом проекте в нашу базовую настройку SEO вошло: сбор основной семантики, проектирование структуры сайта, настройка ЧПУ, создание файлов robots.txt и sitemap.xml, заполнение title и description основных разделов. Сразу добавили счетчик Метрики, добавили сайт в Яндекс вебмастер и Яндекс бизнес.

Этапы разработки сайта

Стек технологий: HTML, CSS, JS.

Сроки проекта: 1 месяц.

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

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

Если администратор занят, не на рабочем месте или ушел пить кофе, то заказ к менеджерам попадал с задержкой и мог «протухнуть». А очень неприятно, когда у заявки истекает срок годности.

Теперь все быстрее — клиенты попадают напрямую к менеджерам. Для этого они заходят на сайт, оставляют заявку и бот отправляет её в общий чат отдела продаж. Все менеджеры видят заявку, кто-то из них жмет кнопку «Принять» и забирает заказ в работу. С этого момента менеджер закрепляется за клиентом.

Сроки проекта: 3 недели

Над проектами работали

Руководитель студии, проект-менеджер, it-разработчики, QA-инженер (тестировщик), дизайнер, seo-специалист и UX-копирайтер.

#диджитал #разработка #it