Как мы верстали и собирали сайт по чужому дизайну
Результат Процесс
Корпорация EMS
Сибирикс
Корпорация EMS
Как мы верстали и собирали сайт по чужому дизайну


Корпорация EMS
Как мы верстали и собирали сайт по чужому дизайну
Корпорация EMS — лидер на рынке комплексного оснащения салонов красоты. Это не только объединение передовых европейских, азиатских и российских производителей, но и несколько собственных производств, а также филиалы и бренд-секции по всей России.

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

А вот дизайн, наоборот, был очень подробным — заказчик отдал нам почти 2 гигабайта макетов (против наших стандартных 300−400 мегабайт). Но, когда мы начали верстку, все равно всплыла масса вещей, которые подрядчик не отрисовал. Это стало проблемой, потому что, когда дизайнеры и программисты не в одной студии, и нужно попросить что-то дорисовать, схема «пнул менеджера — менеджер пнул дизайнера» не работает. Коммуникация превращается в глухой телефон: программист — менеджеру, менеджер — менеджеру на стороне клиента, менеджер на стороне клиента — подрядчику-дизайнеру, и потом обратно тем же путем. В итоге, на согласование правок тратится очень много времени. Зато мы поняли специфику работы в такой эстафете.
Этот проект — особенный, потому что мы шли от обратного. Не изучали компанию, а потом делали сайт, а сразу стали делать сайт, и уже в процессе этой работы составляли впечатление о компании. Вот только несколько выводов, которые мы сделали, и несколько технических решений, которые нас к ним привели.
Гордость за ассортимент
Пока верстали и собирали каталог и детальные страницы, стало понятно, насколько заказчик гордится своим ассортиментом. Как его широтой — потому что требовалась иерархия каталога не только по категориям (раз), но и по странам-производителям (два), по брендам (три), по направлениям бизнеса (четыре). Так и его качеством — потому что обязательно нужна была 3d визуализация, чтобы товар можно было рассмотреть со всех сторон и убедиться, что он идеален на все 360 градусов и все 100 процентов.
Иерархия каталога
Кресло Don Bandito — это не кресло, а мечта. Но об этом знают только те, кто его уже видел. Им легче — можно использовать поиск. Остальным придется как-то наткнуться на Don Bandito в огромном каталоге. Если бы на сайте было просто обычное дерево разделов (когда товары делятся на кресла, мойки, тележки, лампы и т. д.), это было бы непросто. Но мы в административном разделе сайта для каждого товара сделали возможность указать направление бизнеса, страну производства и бренд и реализовали дополнительную иерархию.

Теперь на Don Bandito можно выйти разными путями. Если у вас барбершоп и вам нужно что-то брутальное — открываете «Направления бизнеса», выбираете «Барбершоп», «Парикмахерские кресла», и вот он, Don Bandito. Если вы признаете только итальянское качество и русские цены — кликаете по «Странам», потом по «Италии/России», и вот он, Don Bandito. Если вы уже покупали мойку бренда Manzano и остались очень довольны — идете в «Бренды», выбираете «Manzano», и вот он, Don Bandito!
3d-визуализация
Теперь, когда вы уже захотели кресло «Don Bandito», вы переходите на его детальную страницу и начинаете хотеть его на 360. Чтобы на сайте была 3d-визуализация, мы интегрировались со сторонним сервисом. На этот сервис заказчик загружает фотографии товаров и на стороне сервиса из них создается 3d-визуализация. Сервис предоставил нам javascript (файл со скриптами), мы его подключили и в административном разделе сайта для каждого товара добавили поле, в котором администратор указывает, какой файл из этого сервиса отображать.
Кстати, наши выводы по поводу гордости заказчика своим ассортиментом подтвердились. Как оказалось, внутри компании ассортимент любовно называется «коллекцией», потому что все позиции — хиты.
Внимание к каждому клиенту
Когда настраивали SEO-оптимизацию и собирали правую панель сайта, многое поняли и о клиентах Корпорации EMS. В первую очередь то, что их очень много — потому что компания, которая не готова к большому наплыву клиентов, не станет так подробно прописывать требования к SEO. Второе — то, что они из совершенно разных регионов, часовых поясов и к каждому из них компания ищет индивидуальный подход. Об этом говорили разные условия вывода блоков в правой панели сайта, которые нам нужно было реализовать.
SEO-оптимизация
Помимо метаинформации (title, description, keywords) и разметки схемы org, заказчик требовал, чтобы в разметке всех без исключения страниц использовался заголовок Last-Modified. Поисковики, когда индексируют контент, смотрят на этот заголовок и понимают, когда было внесено последнее изменение на странице. Но если контент страницы собирается из множества инфоблоков, не всегда понятно, из какого инфоблока брать Last-Modified. Мы сделали так, чтобы каждый компонент выставлял свой Last-Modified, и при индексации поисковиком, выбирался самый новый из них и подставлялся уже в HTTP-заголовок страницы.

Также заказчик требовал, чтобы в заголовке страницы (Н1) и в метазаголовках (title, description, keywords) выводился текущий регион пользователя. Для этого мы реализовали возможность указывать в SEO-шаблонах макрос #регион, который при выводе заменяется на тот регион, в котором находится пользователь.
Правая панель
Если двух пользователей (одного из Санкт-Петербурга, а другого из Нижнего Новгорода) попросить описать правую панель на сайте, возникнет ощущение, что описываются панели на совершенно разных сайтах. Такое же ощущение возникнет, если дать ту же задачу двум пользователям из Нижнего Новгорода, но одному — авторизованному, а другому — нет. Или одному во вторник, а другому — в четверг.

Правая панель состоит из нескольких блоков — «Как открыть салон», «Ищем дилеров», «О компании», блоки с новинками, хитами продаж, товарами со скидкой и т. д. Для каждого из этих блоков можно настроить условия, когда он должен выводиться. Вывод блоков зависит от региона, который выбран у пользователя, страницы, на которой находится пользователь, даты и времени, когда активен блок, авторизации пользователя, приоритетов блоков и ряда других факторов. Аналогичную логику прописали и для попапов.
Штат профессионалов
Когда мы реализовывали распределение заказов между менеджерами, стало понятно, что в Корпорации EMS работают менеджеры высокого уровня, которых компания ценит и создает для них соответствующие условия. А когда настраивали импорт купонов, поняли, что и маркетологи здесь не дремлют, и компания давно и широко взаимодействует с клиентами и в оффлайне. Забегая наперед, скажем, что наши выводы подтвердились — конкурс на позицию менеджера в Корпорации EMS 1:50, то есть, чтобы взять одного менеджера, проводят собеседования с 50 кандидатами. Также Корпорация EMS, действительно, активно участвует во всех крупнейших специализированных выставках России и СНГ.
Распределение заказов между менеджерами
У каждого менеджера на сайте есть свой порядковый номер: № 1, № 2, № 3, № 4. Когда пользователь впервые делает заказ на сайте, ему назначается тот менеджер, чья очередь подошла — пусть, например, это будет менеджер № 3. Следующему пользователю, который сделает заказ, будет назначен, соответственно, менеджер № 4. За каждым пользователем менеджер закрепляется и в дальнейшем все обращения пользователя через сайт отправляются ему.

Но даже самые крутые менеджеры периодически болеют или уходят в отпуск. В этом случае в административном разделе сайта у такого менеджера выбирается чекбокс «Отпуск/больничный» и он не участвует в распределении. Мы добавили соответствующие поля в админку и написали сам механизм распределения. Чтобы каждый раз, когда делается заказ, проверялось, какой менеджер последним получил заказ, кто следующий в очереди, активен ли он, не ушел ли в отпуск, не на больничном ли он, и, если все в порядке, ему назначался этот заказ.
Импорт купонов
У заказчика была сгенерированная в формате xls база купонов, которые Корпорация EMS предоставляет клиентам в рамках своей маркетинговой стратегии. Необходимо было сделать так, чтобы эти купоны администратор мог активировать на сайте, и спустя определенное время они автоматически деактивировались. Для этого мы настроили импорт купонов и прописали логику их активации и деактивации.
Проект получился супер масштабный. Мы вместе с заказчиком приоритезировали задачи, вели разработку спринтами и после каждого были готовы к релизу. Но заказчик принял решение не спешить и открыть пользователю полный функционал с хорошо проработанным контентом.
Это был очень интересный опыт! Масштаб компании-заказчика и задуманного проекта обязывал к слаженной работе больших команд как с нашей стороны, так и со стороны заказчика. В зависимости от задачи, мы подключали к проекту экспертов на каждом этапе: аналитика, который превратил идеи в четкие инструкции, и технических специалистов, которые предложили оптимальные пути их воплощения. А были моменты, когда все в один голос отговаривали от реализации функционала с сомнительной продуктивностью и все эти вопросы мы обсуждали с заказчиком, чтобы у него на руках были все карты для принятия взвешенного решения. В итоге мы получили мощный инструмент онлайн-продаж, который будет радовать команду EMS.

Анастасия
Руководитель проекта
Итоговый проект