Интернет-магазин мебельной фабрики «Витра»
Масштабный проект для мебельной фабрики, в котором мы объединили сайт производителя, портал для дилеров и интернет-магазин для конечных потребителей
«ФМ Витра» — бренд, объединяющий томских производителей. Они делает мебель для тех, кому хочется чего-то более изысканного, чем предлагает Икея. В их каталоге под товарным знаком DaVita вы найдёте вместительный шкаф со стразами Swarovski и компактную кухню с древнегреческими мотивами. И сможете заказать доставку и сборку, или самостоятельно приехать, посмотреть и пощупать их в ближайшем отделении представителей «ФМ Витра». Ехать, скорее всего, не придётся далеко, потому что их тысячи по всей России.
Задачи
Старый сайт «ФМ Витра» был простым и традиционным для производителей: информация для дилеров, конечных покупателей и каталог продукции, на который можно только любоваться. А если захотел купить мебель, посмотреть её модификации, поиграться с цветами — топай ножками к представителю.
Новым сайтом «ФМ Витра» решила вылечить боли всех стейкхолдеров. Поэтому задачи у нас стояли глобальные.
Новым сайтом «ФМ Витра» решила вылечить боли всех стейкхолдеров. Поэтому задачи у нас стояли глобальные.
- Сделать современный и удобный сайт DaVita-mebel с максимально гибким контентом. При этом акцент должен быть не на фабрике, а на конкретном бренде мебели — DaVita.
- Добавить функционал интернет-магазина, чтобы конечный покупатель смог оформить заказ прямо с сайта.
- Позволить не просто покупать отдельные предметы мебели, но и комплекты (кухни).
- Разработать личный кабинет для представителей бренда, где они смогут создавать заявки производителю и работать с теми, которые нападали с сайта.
Дизайн
Всякий ecommerce начинается со слайдера. Но в этот раз мы решили сделать его необычным, достойным быть фишкой проекта. Мы задумали поставить вместо привычных перелистывающихся фотографий панораму в 360 градусов, на которой показаны различные зоны (спальня, кухня, детская, гостиная), обставленные мебелью «ФМ Витра». На ней закрепить маячки, которые при наведении показывают название модели, цену, и по клику сразу ведут в каталог.
Прототип сайта
Планировалось, что заказчик сделает съемку для панорамы в специально обставленном павильоне. Мы даже схему нарисовали, как себе это представляем.
Скетч дизайнера: как проводить съёмки панорамы
Но не вышло — идея не выдержала столкновения с суровой реальностью. Зато вместо этого заказчик сделал качественные рендеры, мы их запараллаксили, и тоже здорово получилось.
Дизайн, который мы предложили заказчику в самом начале, был попроще, чем финальный.
Дизайн, который мы предложили заказчику в самом начале, был попроще, чем финальный.
Сначала был вариант с другим логотипом (заказчик разрешил его менять, но потом передумал), без деревянных шапки и футера и без второго слайдера. Но клиент чётко знал, что ему нужно, поэтому после незначительных правок всё это появилось.
Евгений
Арт-директор
Первая и финальная версии макета
Заказчик был заинтересован в проекте и принимал активное участие, предлагал идеи.
Заказчик специально попросил сделать на первом слайдере слой с гифкой, чтобы мебель сверкала. В DaVita на самом деле используются стразы — и заказчик хотел подчеркнуть это.
Дина
Руководитель проекта
Но главная — только верхушка айсберга. Ещё многие часы работы двух дизайнеров ушли на то, чтобы отрисовать десятки внутренних страниц.
Масштабную работу по внутрякам мы делили вместе с ещё одним дизайнером, с Тамарой. Рисовали параллельно, сверяя стили чуть ли не ежеминутно :)
Больше всего времени ушло на отрисовку и правки страниц каталога — много товаров, большой подробный фильтр.
А еще мы замутили клевую 404 со стульями.
Больше всего времени ушло на отрисовку и правки страниц каталога — много товаров, большой подробный фильтр.
А еще мы замутили клевую 404 со стульями.
Любовь
Дизайнер
У нас был вариант простой и клёвой страницы 404. И победил тот, за который мы болели — с мини-игрой, в которой можно почувствовать себя Остапом Бендером :)
Мы предложили «Витре» сделать на странице 404 что-нибудь игровое, и Люба придумала штуку с «12 стульев». Тут когда-нибудь можно найти сокровище. Этот интерактивчик понравился заказчику. В будущем его планируем использовать в акциях использовать, например, «Найди сокровище — получи скидку».
Дина
Руководитель проекта
Разработка
Дизайн — ещё цветочки. А здесь, в разработке, работы было на целых 6 спринтов.
Как было понятно из задач, «ФМ Витра» решила реализовать новую схему работы с дилерами.
Как было понятно из задач, «ФМ Витра» решила реализовать новую схему работы с дилерами.
Раньше дилеры производили закупки через 1С «ФМ Витра», что для фабрики было не очень удобно. Заказчику хотелось сервис, который объединит и конечников, и представителей бренда. Цель была сделать интернет-магазин, в котором покупают конечники, но заказы обрабатывает не «ФМ Витра», а её представители. А «ФМ Витра» за всем этим следит, проверяет, сверяет цены, чтобы все было правильно.
Дина
Руководитель проекта
Теперь «ФМ Витра» получила более удобный сервис для контроля за работой предствителей. Он помогает им собирать статистику и следить, чтобы те не портили имидж фабрики — не продавали мебель втридорога и соблюдали стандарты качества сборки. Так что на сайте зарыт большой личный кабинет для дилеров, где они могут обрабатывать заказы с сайта, создавать их за покупателя. Там даже есть иерархия менеджеров — в общем, множество полезных фич.
Личный кабинет дилера
В каталоге «ФМ Витра» есть два вида товаров: товары-товары (неделимые; например, стол или пуфик) и товары-комплекты (кухни). Кухня состоит из нескольких модулей, которые можно купить и по отдельности. Но изначально она продаётся комплектом, и при желании пользователь может добавить к нему модуль — например, островок. Всё это импортируется из 1С «ФМ Витра».
У «ФМ Витра» сильно закастомлена 1С. И специалисты, которые с ней работают, очень рукастые. Им даешь задачку — они делают. Поэтому «ФМ Витра», хоть и технически сложная интеграция, прошла довольно легко за счёт слаженной работы у нас и у заказчика. Разработчики на стороне заказчика понимали всё, о чём мы их просили, поправляли и очень въедливо тестировали. Мы даже завели сэндбокс, где они методично гоняли импорт за импортом, смотрели изменения, проверяли заказы.
Дина
Руководитель проекта
Ещё одна немаловажная деталь бизнеса «ФМ Витра» — цена на некоторые товары меняется в зависимости от региона. Чтобы реализовать это, штатных возможностей Битрикса не хватало, поэтому пришлось его немного «взломать» :)
Карточка товара
«ФМ Витра» повезло с разработчиком, которому она досталась. По совместительству он техлид Сибирикса и очень принципиальный человек с собственным взглядом на то, как сайт должен отображаться на мобилках.
Я просто очень не люблю бутстрап с его фиксированными точками излома и тем, как он загоняет дизайн в жёсткие рамки. Поэтому всегда делаю адаптив так, что точек излома много и они разные. Если в шапку что-то перестаёт входить при ширине 860 px, то на 860 px я и ставлю точку излома.
Иван
Разработчик
Поэтому сайт DaVita получился скорее отзывчивым, чем адаптивным (вот наглядная инструкция, как их различать).
Но главное, что теперь сайт решает боли всех стейкхолдеров и бенефициаров. Покупатель может не вставая с кроватки оформить заказ на новую. Дилерам теперь проще обрабатывать и создавать заявки. А у «ФМ Витра» — появились официальные продажи онлайн, увеличилось время пребывания пользователя на сайте и визиты.
Готовый сайт