Внимание мебель! Как разрабатывался сайт для розничной продажи (кейс)

Автор мебельных решений - интернет магазин премиальной, дизайнерской мебели, процесс разработки которого получился очень интересным. Рассказываем как это было!

"М-Профиль" - это компания, специализирующаяся на производстве мебели, и фурнитуры высокого качества и ее дальнейшей продаже. С момента своего основания в 2000 году, компания стала одним из лидеров сибири в отрасли изготовления мебельных изделий, а благодаря своему стремлению к инновациям, осваивает и рынок интернет-магазинов. Компания так же недавно построила свой шоурум в котором клиенты могут рассмотреть широкий ассортимент мебельной фурнитуры, от классических до современных дизайнов, и найти вдохновение для создания уютного и стильного интерьера. Однако! У компании уже был сайт, ориентированный на B2B продажи, но для привлечения клиентов - физических лиц, такие платформы не подходят, поскольку важнейшим аспектом становится - именно подача! Так компания и пришла к идее - создания отдельного направления “Автор мебельных решений”, который имел бы спрос именно у физ лиц.

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

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

P.S. Компания долго выбирала себе подрядчика для разработки и выбор в конце-концов пал на нас, чему мы безусловно рады.

При проведении брифа, очевидно обсуждались даже самые минорные вопросы. В следствии чего стало ясно какое виденье у заказчика по поводу сайта, какая должна быть структура, прошлись по целевой аудитории в сегменте цен (средний ++), обсуждении, заказчик выразил желание разработать красивый сайт в формате - интернет магазина. На котором можно было бы: покупать товары, заказывать доставку, смотреть каталог, в общем всё ему присущее. Но ключевым моментом был запрос - ВЫДЕЛИТЬСЯ, показать максимальную эстетичность, и разумеется, в ходе командного анализа и генерации идей, были выявлены лучшие для этого решения.

Первоочередное - это всегда внешний вид! То как человек видит сайт заходя на него, сразу выдаёт все козыри. Если дизайн разработан с целью - “показать ассортимент, с доп функцией покупки”, то никакого “ВАУ” можете и не ждать - это очевидно. В нашем же случае исходя из концепции и ключевого запроса, какой-то другой формат - ну просто не получилось бы сделать, даже если бы мы намерено старались)

Сочетание фотореалистичных рендеров в постельных тонах и грубых форм с пестрыми оттенками, было бы просто грехом - заслуживающим все девять кругов ада…

Разумеется всё получилось так, как и должно было получиться. Минимализм, приятные глазу оттенки, скруглённые фигуры - не оставляли правкам даже надежду, и случилось так, что дизайн согласовали ещё на этапе пресейла. И после этого начала вырисовываться общая картина, с уникальными идеями.

В самой шапке сайта навели максимальный минимализм. Если обратите внимание тут нет привычных всем разделов: “О нас”, ”Контакты”, ”Оплата” и т.д. Они локанично скрыты в меню - бургере справа, дабы не отвлекать пользователя от целевого действия.

Так же, дизайн и сама вёрстка выполнены в адаптивном формате. Исходя из анализа целевой аудитории, стало ясно - что большинство пользователей/клиентов это девушки разных возрастов, а так же дизайнеры. То есть 2 противоположных лагеря. Для одних, основным устройством поиска был телефон, для вторых компьютер. И тут было важно максимизировать удобство и для одних и для вторых, с чем мы и справились (по умолчанию входит адаптивность под все типы устройств).

В статьях у заказчика есть определённая рубрика - “Проекты”. В которой отображаются созданные коллекции. Например весь комплект мебели в определённом стиле.

И тут пришла мысль: - “А давайте добавим интерактивные ссылки?”

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

Посидев подумав над реализацией, решили что идея подходящая и достаточно удобная для пользователя, поэтому теперь, заходя на страницу “Блог” - вы будете замечать подсказки о ценах товаров, не отрываясь от изучения коллекции.

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

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

Решение с отображением статуса в личном кабинете - является по факту и оптимизацией процесса и сохранением бюджета.

Размышляя над задумкой пришли к тому, что - документация с отчётами, внутри компании ведётся в любом случае. Исходя из того, что клиент уже продаёт фурнитуру, значит - что у него у же скорее всего есть какая-то CRM и это оказалось правдой.

Отталкиваясь начали реализовывать следующий механизм:

• Клиент выбирая одно из предложений добавляет понравившийся товар в корзину и оплачивает его. (Размеры, компановка, материалы, фурнитура - это много информации)
• Заказ со всей этой информацией приходит в Битрикс менеджеру.
• Менеджер связавшись с клиентом подтверждает заказ, и меняет статус на “оплачено” и так далее, от оплаты - до доставки.
• И теперь клиент тоже может - видеть этот статус.

Вот и получается, что менеджер который уже и так выполняет свою работу в компании работая с CRM - обеспечивает информацией о статусе заказа клиента, не прибегая к дополнительным расходам. Многие вещи, которые раньше отнимали время, сейчас решаются по клику. Удобно? Однозначно!

И так, самое интересное! То, чем заказчику и было предложено ВЫДЕЛИТЬСЯ.

Являясь по сути производственной компанией, которая может реализовать любую дизайнерскую идею, не пользоваться этим - глупо! Идея пришла сама по себе, исходя из банальных размышлений по типу: -“Раз компания предлагает подобрать материал, то как это будет реализовано?”, ответ снимаю с языка: -“Конструктор!”. Но как его сделать?

Конструктор должен иметь возможность менять материалы из которых состоит мебель находящаяся внутри композиции.

Например:

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

Как УТП идея супер, даже в формате прямого общения. (Клиент пришёл в шоурум, захотел изменить материал, менеджер тут же на сайте его и собирает.)

Из вводных данных мы имели информацию о том, что фото на сайте это всё-таки фотореалистичные рендеры, которыми у заказчика занимаются 2 дизайнера.

Исходя из вышеперечисленного…

• Рендерить все вариации композиций, и подгружать как фото. Из плюсов - скорость, простота, не нагружает сервер.Из минусов - огромнейшая работа для дизайнера (каждую позицию рендерить).Например есть композиция кухни в неё включены столешница, шкафчики, стол, стулья и островок. Каждую вариацию нужно делать отдельно т.е.У одной кухни может быть только 5 вариаций столешницы, её нужно отрисовать с гранитной кухней, но если в кухне меняется ещё какой-то элемент - то все вариации столешницы, нужно отрисовывать и с ним.В купе получалось более 2000 вариаций, а это время рендеринга и время загрузки всех фалов на сайт. + Они в высоком разрешении и с большим весом. И это только кухня!
• Высоконагруженный конструктор, что-бы фото рендерились так-же в фотореалистичном формате. Из плюсов - качество в автоматическом режиме.Но рендер в этом случае задействует мощности компьютера.И тут тоже два решения: либо делать его нативным, либо арендовать GPU чипы - видеокарты, а это стоит приличных денег в формате подписки.В противном случае человек заходя на сайт будет грузить картинки - мощностями своего компьютера, но не каждый имеет настолько мощный ПК, что-бы комфортно пользоваться таким конструктором. Да и браузер вряд-ли с таким справится.
• Библиотека Three.js. Принцип работы следующий: Дизайнер предоставляет выгрузки (в общей сложности было около 100), которые в дальнейшем загружаются в админ-панель, бекенд конвертирует это в формат текстуры и применяется на определённую область.Плюсы: простота, универсальность, не требует ресурсов и интерактивность.Минусы: всё реализуется силами браузера.

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

В угоду правде нельзя не упомянуть и о трудностях с которыми команда сталкивалась

• Процесс получения выгрузок, в связи с занятостью дизайнеров, занял порядка двух месяцев. К сожалению на момент начала разработки и на её этапах, идея узнать о том: “Где же всё таки работает дизайнер, в штате или на фрилансе?” к нам не пришла, мы не поинтересовались? Нам не сказали? Проблема коммуникаций! А это огромный провал с точки зрения сроков. Стоило сильно заранее придти к дизайнерам, спросить хотя-бы: “А как? А что?”. И вероятно тогда, ситуация сложилась бы лучше.
• Внешний вид конструктора. Отдельная тема для разговора) Как уже было описано ранее на этапе пресейла были разработаны прототипы, которые очень понравились заказчику, однако в процессе разработки был согласован третий вариант разработки, а из-за смены менеджеров в компании заказчика, информация о том, что конструктор на данный момент не сможет выдавать фотореалистичные картинки - донесена не была. Проблема та же что, что и с дизайнерами - коммуникации.
• В купе с тем что, ожидание выгрузок заняло больше месяца времени, на проекте появилась сильная спешка, все старались изо всех сил, однако давление - есть давление, спешка явно не лучший союзник при разработке. Подобное конечно случается со всеми, но от того и грустно, что не весь материал (конструктор) вошёл в финальную версию.

Однако мы ещё не закончили, а значит нам предстоит вновь побороться с реализацией “сборки мебели онлайн”, и мы к этому готовы! Возможно даже будет отдельная статейка по этому поводу. (Подписывайтесь 🙂)

Именно так и появился сайт “Автор Мебельных Решений”. Не беря в учет последнее, команда довольна результатом. Проект получился именно таким, каким его видел заказчик, а так же в нем можно собрать всю подходящую по вкусу мебель, за один раз.

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

Делитесь впечатлениями и задавайте интересующие вас вопросы!