Обновление интернет-магазина Dantone Home: редизайн и выход на международный рынок

1. Вводная задача от заказчика, проблематика, цели

О компании

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, дизайнерских элементов и уюта. У компании уже был сформирован фирменный стиль. Нашей задачей было придать современный вид сайту, поддерживая целостность бренда.

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

Марат Михтифидинов

Руководитель интернет-магазина, Dantone Home

До сотрудничества с ONY у нас был неплохо работающий интернет-магазин с ограниченным функционалом. Он не был адаптирован для дальнейшего масштабирования, нельзя было выбрать товар в конкретном цвете. Все проекты и лендинги отличались по дизайну и управлялись в разных админках, а раздел «Новости» был очень примитивным по функционалу и визуальному оформлению.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Этап подготовки

Вместе с командой 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. Это помогает отделу продаж быстро обрабатывать заявки с сайта.

Саша Бородин

Digital Designer, ONY

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

3. Результаты сотрудничества

В новом дизайне сайта Dantone Home получилось отразить стиль бренда — синтез классики и contemporary, дизайнерских элементов и уюта.

Марат Михтифидинов

Руководитель интернет-магазина, Dantone Home

После проделанной работы мы получили современный сайт с обновленным дизайном. Теперь мы можем самостоятельно и оперативно создавать лендинги под разные задачи. Раздел «Новости» превратился в полноценный блог с интересным оформлением и продвинутыми возможностями конструктора.

4. Заключение

Мы продолжаем сотрудничать с брендом и внедрять новый функционал. Например, в планах:

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

С самого начала работы с Dantone Home мы придерживались подхода MVP с последующим масштабированием. Было придумано и отрисовано множество деталей и функций, на реализацию которых требуется время. Чтобы не растягивать релиз на много лет, год назад мы запустили первую версию сайта, а сейчас продолжаем доделывать крупные блоки и работаем над масштабированием компании в формате техподдержки.

Награды

На платформе Ruward сайт Dantone Home завоевал "Кейс дня".

Digital-кейс дня на Ruward