Поделились опытом редизайна мебельного бренда и внедрили инновационные технологические решения, которые позволили быстро масштабировать компанию на международный рынок. Благодаря нашим решениям, просмотры сайта выросли в 2,4 раза. Подробности в статье.
О компании
Dantone Home — российский бренд мебели и предметов интерьера. В каталогах компании можно найти образцы современной классики, mid-century, ар-деко и contemporary, но выбор не ограничивается готовыми вариантами. У Dantone Home своё производство, поэтому покупатели могут кастомизировать выбранные модели, заказать индивидуально разработанные для них кухни или гардеробные.
В эко-систему бренда также входят Dantone Design Buro и B2B направление Dantone Contract, предлагающее решения по комплектации жилых домов и коммерческих пространств — офисов, ресторанов, отелей, апартаментов. Среди партнёров бренда — Hilton, Ibis, Holiday Inn, Mercure.
Шоурумы компании расположены в восьми городах России, а в 2022 году Dantone Home вышли на международный рынок и открыли шоурум в Дубае. Компания выросла и трансформировалась — прежний сайт перестал отражать стиль бренда, поэтому команда Dantone Home обратилась к нам за аудитом и редизайном интернет-магазина.
Какие задачи решали
Бренд Dantone Home — синтез классики и contemporary, дизайнерских элементов и уюта. У компании уже был сформирован фирменный стиль. Нашей задачей было придать современный вид сайту, поддерживая целостность бренда.
Кроме этого, нужно было обновить техническую часть. Архитектура интернет-магазина не позволяла масштабировать его под новые задачи, а контент не отражал всех особенностей бренда.
До сотрудничества с ONY у нас был неплохо работающий интернет-магазин с ограниченным функционалом. Он не был адаптирован для дальнейшего масштабирования, нельзя было выбрать товар в конкретном цвете. Все проекты и лендинги отличались по дизайну и управлялись в разных админках, а раздел «Новости» был очень примитивным по функционалу и визуальному оформлению.
Вместе с командой Dantone Home мы провели дизайн-аудит бренда, чтобы выделить основные направления работы:
- Сделать современный дизайн, сохранив фирменный стиль, особенности и дух бренда.
- Расширить функциональность сайта: сделать гибкую архитектуру и удобную навигацию по направлениям, а также добавить конструктор, который поможет клиенту менять сайт под свои задачи.
Как доработали визуальную часть
Работу над дизайном мы начали с самого большого направления Home – мебель и аксессуары для дома. Так как стиль Dantone Home — традиционный и респектабельный, в первом варианте дизайна мы ушли в журнальную концепцию. Однако она не отражала ещё одну важную черту бренда — уют. Несмотря на то, что интерьеры компании сдержанные, они не кажутся холодными и бездушными.
Тогда мы решили сместить акцент на продуманные и красивые фотографии интерьеров, которые уже были у Dantone Home. Они наглядно демонстрируют, как строгие формы могут гармонично вписываться в уютное жилое пространство.
Чтобы не зашумлять фотографии, текст на баннерах сделали кратким и ёмким. В итоге получилась слегка швейцарская вёрстка, разбавленная большим количеством изображений, которые отражают особенность бренда.
Чтобы подчеркнуть ноты нео-классики, выбрали антиквенный шрифт William в паре с рубленным Futura New.
Особое внимание мы уделили карточкам товара. Так как Dantone Home продают мебель в премиальном ценовом сегменте, клиенты часто приезжают в шоурумы, чтобы посмотреть образцы.
Задача была оформить карточку товара так, чтобы через сайт человек мог в подробностях рассмотреть все аспекты мебели: ткань, фурнитуру, материалы, размер. Нам было сложно понять, на что целевая аудитория обращает внимание больше, а на что — меньше, поэтому мы провели интервью с покупателями. В том числе, с дизайнерами, которые часто покупают мебель под заказ.
В первую очередь целевой аудитории было важно видеть:
- мебель на белом, изолированном фоне, чтобы можно было быстро вырезать объект и добавить в свой проект;
- размеры мебели и ткань;
- сроки доставки.
А ещё у компании есть два способа доставки и четыре способа оплаты, о которых тоже нужно было рассказать.
Было сложно собрать все особенности и не перегрузить карточку, поэтому сначала у нас получился очень громоздкий макет. Чтобы его облегчить, мы изучили подходы разных маркетплейсов. В итоге разделили информацию на слои, стало намного проще и лаконичнее.
Блоки про доставку, оплату, гарантию и рассрочку оформили модальными окнами. Они позволяют быстро просмотреть важную информацию, не переключаясь между страницами. Когда пользователь добавляет товар в корзину, она также открывается в формате модального окна. Там покупателю предлагаются сопутствующие товары, которые он может добавить к своему заказу.
Большая доля коммуникации бренда с клиентами происходит через блог, который Dantone Home активно ведут. На прежнем сайте уже была большая база статей. Мы разобрали их и упаковали в современный вид.
Оформление блога получилось простым, но визуально насыщенным. Мы добавили теги и страницу подписки, а внутрь статей — конструктор, чтобы клиент мог сам выстраивать структуру. Например, дополнять текст галереей фотографий или блоком с разделами товаров.
Конструктор есть не только в блоге, но и в других разделах. С помощью него клиент может добавлять страницы на сайт без помощи разработчиков, например, создавать лендинги для новых услуг.
Кроме направления Home, у компании есть ещё три: Kitchen — мебель для кухни, Contract — мебель для бизнеса, Buro — дизайн-проекты. Мы структурировали эти направления в единое меню, чтобы пользователь мог легко переключаться между ними.
Что сделали в технической части
Мы сразу выбрали сложный технологический стек — фреймворк Laravel и отдельный фронтенд, который может работать на другом сервере и взаимодействовать с бэкендом через API. Благодаря этому мы к бэкенду можем наращивать большое количество контента. Это позволяет компании масштабироваться — в короткий срок запустить дополнительный сайт в другом регионе. Например, благодаря такому стеку мы быстро создали англоязычную версию сайта для шоурума в Дубае.
А ещё такая архитектура открывает возможность для подключения других фронтендов. Например, если компания решит запустить мобильное приложение, то сможет сделать его в связке с интернет-магазином и какой-нибудь программой лояльности — всё это будет работать на одном и том же бэкенде.
Такой подход экономит бюджет компании. Нужно поддерживать только один бэкенд (вместо четырёх), который работает со всеми необходимыми ему фронтендами.
Технические элементы, которые добавили на сайт:
- Единую админ-панель на основе CMS Laravel Nova для всех направлений компании: русскоязычной и англоязычной версий сайта по продажам мебели для дома, страницы по продаже кухонь, сайта по комплектации отелей и ресторанов. Благодаря этому управлять контентом стало быстрее и проще. Также сделали разделение ролей в бэк-офисе на администратора и менеджера магазина.
- Конструктор лендингов. Сейчас Dantone Home используют его только для блога, но при необходимости могут создавать новые посадочные страницы внутри сайта без привлечения разработчиков. Это поможет компании сэкономить бюджет на дизайне и разработке.
- 3D-модели мебели в карточки товаров. Они передаются на сайт посредством технологии CDN. Файлы с моделями весят много, а CDN позволяет им быстро загружаться и отображаться в карточке.
- Авторесайз. Размер видео, изображений и картинок автоматически подстраивается под экран устройства.
- Интеграция с Битрикс24. Когда покупатель оставляет заявку на сайте, формируется лид в Битрикс24. Это помогает отделу продаж быстро обрабатывать заявки с сайта.
Какой результат у нас получился
После проделанной работы мы получили современный сайт с обновленным дизайном. Теперь мы можем самостоятельно и оперативно создавать лендинги под разные задачи. Раздел «Новости» превратился в полноценный блог с интересным оформлением и продвинутыми возможностями конструктора.
Что дальше
Мы продолжаем сотрудничать с брендом и внедрять новый функционал. Например, в планах:
- добавить возможность кастомизации мебели в карточку: выбор материалов, фурнитуры, комплектации;
- сделать интеграцию с сервисами доставки и сервисом по работе с программой лояльности;
- настроить геозависимый контент — когда компьютер автоматически определяет местоположение пользователя, и в зависимости от локации показывает определённый контент, например, разный ассортимент товаров по регионам.
С самого начала работы с Dantone Home мы придерживались подхода MVP с последующим масштабированием. Было придумано и отрисовано множество деталей и функций, на реализацию которых требуется время. Чтобы не растягивать релиз на много лет, год назад мы запустили первую версию сайта, а сейчас продолжаем доделывать крупные блоки и работаем над масштабированием компании в формате техподдержки.
