Для сайта мебельной фабрики «Сокол» мы создали интерактивный конструктор, помогающий посетителям составлять и покупать любые комбинации шкафов. Это первый в России конструктор такого рода, работающий в том числе на мобильных устройствах семейства Apple.
Задача
С ребятами из Сокола мы общались давно. Как и мы, создатели фабрики придерживаются клиентоориентированного подхода и активно используют самые современные IT-технологии в своей работе. Мы знаем это наверняка, так как долгие годы и сами регулярно покупаем у них мебель для Студии.
В конце 2012 года мы пригласили CTO «Сокол-мебели» Дмитрия Кузнецова выступить на одном из наших мероприятий и поделиться уникальными наработками в области электронной коммерции. Тогда-то ребята и рассказали нам о проблеме, которую они пытались решить.

К тому времени на рынке существовало уже несколько отличных интерактивных конструкторов, позволявших выбрать нужную конфигурацию шкафа. Однако у всех были два характерных недостатка: во-первых, они концентрировались на единственном шкафе, не позволяя создать набор из нескольких шкафов; и, во-вторых, созданные с помощью технологии Adobe Flash, они не работали на устройствах семейства Apple.
Если бы кто-нибудь взялся создать решение, позволяющее также легко и наглядно конструировать целые комбинации шкафов и работающее даже на мобильных платформах, — это не только увеличило бы продажи шкафов отдельно взятой мебельной фабрики, но и совершило бы настоящую революцию на всем мебельном рынке.
Мы любим сложные задачи и просто обожаем создавать революционные продукты. Поэтому уже весной 2013-го года мы с большим энтузиазмом взялись за этот проект.
Решение
Для того чтобы помочь нам быстрее разобраться в ассортименте, Дима Кузнецов собственноручно создал уникальную инфографику, наглядно и доступно объясняющую структуру текущего ассортимента.
На ее основе мы подготовили полный классификатор всех возможных комбинаций комплектующих, из которых составлялись конечные конструкции шкафов. В результате выполнения этой работы мы смогли сгруппировать комплектующие в несколько групп, таких как «габариты», «вариант наполнения», «цвет и вариант отделки фасада», «ориентация и механизм открывания дверей» и так далее.

В своих первых прототипах мы отвели большую часть площади экрана под визуализацию текущей конфигурации шкафа. Справа от визуализации мы поместили панель e-commerce, отражавшую стоимость выбранного шкафа и позволяющую перейти к дальнейшим действиям (покупке, добавлению следующего шкафа и так далее). Меню с выбором доступных комплектующих, сгруппированных в итоге в несколько категорий, компактно разместились наверху.
Размещение панели комплектующих сверху казалось хорошим решением. Однако в процессе тестирования выяснилось, что выпадающие списки и дополнительные диалоговые окна, открывающиеся в процессе работы, закрывают обзор итоговой визуализации. Мы же хотели добиться компактного и удобного интерфейса, позволяющего выполнять большинство операций в рамках единого окна, поэтому в итоговом макете мы использовали четырехколоночную сетку, позволяющую последовательно выбрать комплектующие, насладиться результатом и перейти к дальнейшим действиям.

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