МК Магна

Главное о кейсе

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

Как проект изменил жизнь пользователей

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

Бизнес-задача и ее решение

Отличие заказчика от конкурентов — в полном цикле:
–– для производства реактивов — свое производство и налаженные связи с крупнейшими заводами-производителями химических веществ в России;
–– для розлива по тарам — нужные сертификаты на руках, заработанные честным трудом и компетенциями сотрудников компании;
–– для транспортировки — своя производственная база, собственный транспорт под любое вещество, за счет чего закрывается сложная логистика (например, поставки в далекую Якутию);
–– для клиентов — работа по заявкам: в «Магне» поставляют не только позиции из каталога, но и работают по ТЗ — могут сделать состав с нужным процентным содержанием любого вещества по заявке клиента.

Для проекта эти особенности превратились в задачи-вызовы:
1. Полный цикл, тара и логистика — как компактно и понятно рассказать про это на сайте?
2. Специфические товары — как выводить в каталоге жидкости и порошки, да ещё и с очень разными характеристиками?
3. Работа по заявкам по некоторым товарам — как реализовать ее в каталоге?
4. Множество поставщиков и налаженная логистика — как сделать так, чтобы заказчик выглядел не перепродажником и не траспортной компанией, а серьезным игроком рынка с полным циклом?

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

Крафт (мастерство), реализация, технические детали

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

На этом проекте мы испольщовали Spline. Это бесплатный и довольно свежий редактор для 3D-моделирования с набором функций, с которыми легко создавать 3D-сцены, моделировать 3D-объекты и редактировать их. Причем, сразу в браузере. Иными словами, здесь можно быстро донастроить модель так, чтобы забрать её на вёрстку.

По крайней мере, на сайте Spline так было написано. А на деле возникли проблемы:
–– не слишком очевидно, как выставлять свет;
–– требуется подгонка сцены, чтобы модель не искажалась;
необходимость уменьшать размер модели (она получается слишком тяжелой — на сайте бы не загрузилась);
–– изначально модель была черно-белой, нам нужно было как-то добавить цвета;
–– сама модель в Spline супер-чувствительная к движению мышки: при любом лишнем усилии её вертит, как космонавта на центрифуге.

Для более реалистичного освещения пришлось поработать с настройками источников света. Сделали 4 источника: 2 источника давали реалистичную тень, а другие 2 — выполняли роль подсветки.

На готовой модели в промо-блоке планировались пины — точки, по клику на которые появлялся бы попап с подробностями о каждом объекте на схеме. Встал вопрос, как добавить их внутри Spline.

При переносе модели из Spline на сайт не обошлось без интересностей — например, API оказалось довольно ограниченным и работающим «через одно место». Задачкой со звездочкой оказались и пины с их всплывающими окошками по клику.

Возникла сложность с тем, что на модели есть тултипы (те самые пины и всплывашки к ним), содержимое которых должно редактироваться из админки. А это значит, что внутри Spline их разместить не получится. Да, @splinetool/runtime даёт возможности для взаимодействия JavaScript на сайте с моделью, но там не всё так гладко, как хотелось бы. Пришлось повозиться. Но в итоге получилась красотишка.

Пины пришлось размещать прямо в сцене — для этого дизайнер добавил в Spline геометрические объекты в виде кругов с точкой по центру. Одна беда — изначально они были 3D-шными и смотрели в сторону, как и вся модель.

Чтобы объекты выглядели как 2D-элементы, мы убарли взаимодействие со светом и тенью, задали чистый цвет и выставили параметр «Смотреть в камеру». Благодаря этому при любом ракурсе пины направлены в сторону зрителя.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Скриншоты