Интернет-магазин мебельной фабрики «Витра»
Масштабный проект для мебельной фабрики, в котором мы объединили сайт производителя, портал для дилеров и интернет-магазин для конечных потребителей
«ФМ Витра» — бренд, объединяющий томских производителей. Они делает мебель для тех, кому хочется чего-то более изысканного, чем предлагает Икея. В их каталоге под товарным знаком DaVita вы найдёте вместительный шкаф со стразами Swarovski и компактную кухню с древнегреческими мотивами. И сможете заказать доставку и сборку, или самостоятельно приехать, посмотреть и пощупать их в ближайшем отделении представителей «ФМ Витра». Ехать, скорее всего, не придётся далеко, потому что их тысячи по всей России.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3363-3263-4533-a139-356561653036__-__empty__mac_1080p1.png)
Задачи
Старый сайт «ФМ Витра» был простым и традиционным для производителей: информация для дилеров, конечных покупателей и каталог продукции, на который можно только любоваться. А если захотел купить мебель, посмотреть её модификации, поиграться с цветами — топай ножками к представителю.
Новым сайтом «ФМ Витра» решила вылечить боли всех стейкхолдеров. Поэтому задачи у нас стояли глобальные.
Новым сайтом «ФМ Витра» решила вылечить боли всех стейкхолдеров. Поэтому задачи у нас стояли глобальные.
- Сделать современный и удобный сайт DaVita-mebel с максимально гибким контентом. При этом акцент должен быть не на фабрике, а на конкретном бренде мебели — DaVita.
- Добавить функционал интернет-магазина, чтобы конечный покупатель смог оформить заказ прямо с сайта.
- Позволить не просто покупать отдельные предметы мебели, но и комплекты (кухни).
- Разработать личный кабинет для представителей бренда, где они смогут создавать заявки производителю и работать с теми, которые нападали с сайта.
Дизайн
Всякий ecommerce начинается со слайдера. Но в этот раз мы решили сделать его необычным, достойным быть фишкой проекта. Мы задумали поставить вместо привычных перелистывающихся фотографий панораму в 360 градусов, на которой показаны различные зоны (спальня, кухня, детская, гостиная), обставленные мебелью «ФМ Витра». На ней закрепить маячки, которые при наведении показывают название модели, цену, и по клику сразу ведут в каталог.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3130-3462-4937-a639-303930303431__-__empty__jncgf.png)
Прототип сайта
Планировалось, что заказчик сделает съемку для панорамы в специально обставленном павильоне. Мы даже схему нарисовали, как себе это представляем.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3833-3735-4635-b038-316639376464__-__empty__noroot.png)
Скетч дизайнера: как проводить съёмки панорамы
Но не вышло — идея не выдержала столкновения с суровой реальностью. Зато вместо этого заказчик сделал качественные рендеры, мы их запараллаксили, и тоже здорово получилось.
Дизайн, который мы предложили заказчику в самом начале, был попроще, чем финальный.
Дизайн, который мы предложили заказчику в самом начале, был попроще, чем финальный.
Сначала был вариант с другим логотипом (заказчик разрешил его менять, но потом передумал), без деревянных шапки и футера и без второго слайдера. Но клиент чётко знал, что ему нужно, поэтому после незначительных правок всё это появилось.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3335-3933-4665-b831-636461393262__-__empty__akulov.png)
Евгений
Арт-директор
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild6132-3636-4430-b265-356663626337__-__empty__poi.png)
Первая и финальная версии макета
Заказчик был заинтересован в проекте и принимал активное участие, предлагал идеи.
Заказчик специально попросил сделать на первом слайдере слой с гифкой, чтобы мебель сверкала. В DaVita на самом деле используются стразы — и заказчик хотел подчеркнуть это.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild6265-6533-4363-b130-646665353439__-__empty__Dina.jpg)
Дина
Руководитель проекта
Но главная — только верхушка айсберга. Ещё многие часы работы двух дизайнеров ушли на то, чтобы отрисовать десятки внутренних страниц.
Масштабную работу по внутрякам мы делили вместе с ещё одним дизайнером, с Тамарой. Рисовали параллельно, сверяя стили чуть ли не ежеминутно :)
Больше всего времени ушло на отрисовку и правки страниц каталога — много товаров, большой подробный фильтр.
А еще мы замутили клевую 404 со стульями.
Больше всего времени ушло на отрисовку и правки страниц каталога — много товаров, большой подробный фильтр.
А еще мы замутили клевую 404 со стульями.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3537-3030-4266-a363-386236646632__-__empty__lubamorozevskaya.png)
Любовь
Дизайнер
У нас был вариант простой и клёвой страницы 404. И победил тот, за который мы болели — с мини-игрой, в которой можно почувствовать себя Остапом Бендером :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3530-3339-4761-b535-636338303061__-__empty__noroot.png)
Мы предложили «Витре» сделать на странице 404 что-нибудь игровое, и Люба придумала штуку с «12 стульев». Тут когда-нибудь можно найти сокровище. Этот интерактивчик понравился заказчику. В будущем его планируем использовать в акциях использовать, например, «Найди сокровище — получи скидку».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3530-6139-4537-b861-373333396466__-__empty__Dina.jpg)
Дина
Руководитель проекта
Разработка
Дизайн — ещё цветочки. А здесь, в разработке, работы было на целых 6 спринтов.
Как было понятно из задач, «ФМ Витра» решила реализовать новую схему работы с дилерами.
Как было понятно из задач, «ФМ Витра» решила реализовать новую схему работы с дилерами.
Раньше дилеры производили закупки через 1С «ФМ Витра», что для фабрики было не очень удобно. Заказчику хотелось сервис, который объединит и конечников, и представителей бренда. Цель была сделать интернет-магазин, в котором покупают конечники, но заказы обрабатывает не «ФМ Витра», а её представители. А «ФМ Витра» за всем этим следит, проверяет, сверяет цены, чтобы все было правильно.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3835-3731-4163-b938-646234306166__-__empty__Dina.jpg)
Дина
Руководитель проекта
Теперь «ФМ Витра» получила более удобный сервис для контроля за работой предствителей. Он помогает им собирать статистику и следить, чтобы те не портили имидж фабрики — не продавали мебель втридорога и соблюдали стандарты качества сборки. Так что на сайте зарыт большой личный кабинет для дилеров, где они могут обрабатывать заказы с сайта, создавать их за покупателя. Там даже есть иерархия менеджеров — в общем, множество полезных фич.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild6264-6333-4235-a266-336138333063__-__empty__noroot.png)
Личный кабинет дилера
В каталоге «ФМ Витра» есть два вида товаров: товары-товары (неделимые; например, стол или пуфик) и товары-комплекты (кухни). Кухня состоит из нескольких модулей, которые можно купить и по отдельности. Но изначально она продаётся комплектом, и при желании пользователь может добавить к нему модуль — например, островок. Всё это импортируется из 1С «ФМ Витра».
У «ФМ Витра» сильно закастомлена 1С. И специалисты, которые с ней работают, очень рукастые. Им даешь задачку — они делают. Поэтому «ФМ Витра», хоть и технически сложная интеграция, прошла довольно легко за счёт слаженной работы у нас и у заказчика. Разработчики на стороне заказчика понимали всё, о чём мы их просили, поправляли и очень въедливо тестировали. Мы даже завели сэндбокс, где они методично гоняли импорт за импортом, смотрели изменения, проверяли заказы.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3436-6437-4764-b165-353035366438__-__empty__Dina.jpg)
Дина
Руководитель проекта
Ещё одна немаловажная деталь бизнеса «ФМ Витра» — цена на некоторые товары меняется в зависимости от региона. Чтобы реализовать это, штатных возможностей Битрикса не хватало, поэтому пришлось его немного «взломать» :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3530-3561-4931-b835-636463306337__-__empty__ujhrse.png)
Карточка товара
«ФМ Витра» повезло с разработчиком, которому она досталась. По совместительству он техлид Сибирикса и очень принципиальный человек с собственным взглядом на то, как сайт должен отображаться на мобилках.
Я просто очень не люблю бутстрап с его фиксированными точками излома и тем, как он загоняет дизайн в жёсткие рамки. Поэтому всегда делаю адаптив так, что точек излома много и они разные. Если в шапку что-то перестаёт входить при ширине 860 px, то на 860 px я и ставлю точку излома.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3961-3838-4135-b161-666339333762__-__empty__ivan.png)
Иван
Разработчик
Поэтому сайт DaVita получился скорее отзывчивым, чем адаптивным (вот наглядная инструкция, как их различать).
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3262-6635-4266-a535-346531323835__-__empty__bxfs.png)
Но главное, что теперь сайт решает боли всех стейкхолдеров и бенефициаров. Покупатель может не вставая с кроватки оформить заказ на новую. Дилерам теперь проще обрабатывать и создавать заявки. А у «ФМ Витра» — появились официальные продажи онлайн, увеличилось время пребывания пользователя на сайте и визиты.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild6135-6333-4165-b766-316364363836__-__empty__noroot.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3937-6637-4062-b834-363531366162__-__empty__noroot.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1498644203/tild3764-3236-4737-b530-373662626164__-__empty__noroot.png)
Готовый сайт