Один сайт трех ТРЦ сразу? Легко! Кейс нашей разработки для группы XL

Главный приоритет проекта — юзабилити для посетителей и контент-менеджеров

Заказчик пришел с деловым, адекватным настроем — он хотел получить онлайн-ресурс, который будет:

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

В группу XL входят три московских торговых центра — Дмитровка, Family Outlet и Home. Тем не менее, сайт нужен один, общий. Причем посетителю важно дать возможность сфокусироваться на выборе магазинов и дополнительных услуг в пределах одного конкретного торгового центра, другими не отвлекая.

Помимо покупателей есть вторая важная группа пользователей — контент-менеджеры. Они не просто просматривают контент, еще добавляют и редактируют. Исходные материалы поступают от арендаторов. Значит, сайт должен «понимать» разные форматы файлов. Кроме того, нужно упростить и облегчить манипулирование графическими объектами. Это важно как для предотвращения ошибок, так и для ускорения операций с сайтом.

Третья группа — арендаторы. Им нужно предоставить контент в несколько ином формате, удобном для предпринимателей. Разумеется, все также должно быть понятно и удобно. А еще «просто» нравиться (что бывает непросто, но об этом чуть позже).

Пользователи видят только «витрину» сайта — то, что показывает браузер. Для разработчиков это прежде всего «админка», в которой редактируется структура и контент. Заказчики часто начинают с пользовательского ракурса, а по ходу проекта учатся видеть онлайн-ресурс системно. Так было и в этот раз. Мы настояли на платформе Битрикс. Поначалу это вызвало небольшие споры, но потом мнение изменилось: «Как же все логично. Очень рады, что прислушались к вам!» Удобная «админка» — большой плюс, поэтому мы всегда уделяем ей особое внимание.

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

Как и планировалось, упростили добавление и обработку графических изображений. В «админку» можно импортировать картинки всех распространенных форматов. И их не придется редактировать вручную. Даже для карты ТРЦ мы разработали специальный модуль.

Можно сказать, что карта ТРЦ — это парадный вход в конверсию сайта, потому что именно она помогает людям составить план шопинга. Да и вообще решить, куда именно поехать за покупками.

Однако, чем эффектнее выглядит карта, тем сложнее ее редактировать. Это становится проблемой при обслуживании сайта. Добавление нового арендатора или изменение геометрии торговой точки требуют от контент-менеджеров владения графическими редакторами, знакомства с тонкими настройками «админки». Точнее, так бывает, когда разработчик сайта «сдает проект» вместо того, чтобы подумать об удобстве его использования. Разумеется, мы пошли другим путем — разработали специальный модуль для работы с картой.

Получилось отлично! Контент-менеджеру достаточно загрузить картинку, и покликать по ней мышкой, обозначая углы помещения. Даже если контур сложный, модуль самостоятельно подсветит нужную конфигурацию, а потом отобразит красивую объемную визуализацию. Это полностью автоматизировано. Для завершения редактирования нужно только проверить, что выбрана правильная иконка, загружен логотип и описание. Любой справится с такой задачей, она не требует ни специальных знаний, ни дополнительного программного обеспечения.

ГИФКА ИЗ ВИДЕО О модуле

На добавление нового арендатора требуется всего несколько минут!

«Парадный вход» в ТРЦ решили выполнить в виде огромного, во весь экран меню-баннера. Мимо такого не пройдешь. Посетитель сайта сразу выбирает, какой именно центр его интересует.

Сразу после клика открывается соответствующий подсайт, и дальше вся навигация идет по нему. Даже клик по логотипу в шапке ведет не на общую «главную», а на заглавную страницу выбранного ТРЦ.

Конечно, возможность поменять подсайт сохраняется. Для этого нужно кликнуть по иконке-«аккордеону» в левом верхнем углу экрана. И опять переход полностью переключит все управление ресурсом на один конкретный торговый центр.

Далее, мы тщательно просмотрели и ранжировали весь возможный контент. Оставили для отображения на страницах только самое необходимое. Отбор элементов управления был еще более жестким. Результат — аскетичная, наглядная система управления. Ничего лишнего, все важное на виду, доступ к информации в 1-2 клика.

Очевидный факт современной web-разработки — сайт адаптивный. То есть одинаково хорошо работает на устройствах с разными экранами, от маленьких смартфонов до огромных настольных мониторов.

Современный сайт обязан быть адаптивным

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

Сдача интерактивного прототипа прошла без заминок. Используя прежний опыт и новые разработки, мы подготовили модель навигации будущего сайта. Демо-версия наглядно показывала, что и как именно будет работать. Здесь разногласий с заказчиком не возникло.

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

Теперь все согласовано, отлично. Только пришлось потратить больше времени там, где не ожидали. Не только на дизайн, еще при заполнении сайта контентом. Очень много материала, все нужно сортировать и «причесывать». Подключили своего контент-менеджера, чтобы быстро навести порядок.

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

Перенос на основной домен, запуск. Все работает как и должно — четко, быстро, понятно. Продуманная структура, удобная «админка» для контент-менеджеров. Несмотря на интуитивно понятный интерфейс, мы разработали полный комплект документации. И дополнили его наглядными инструкциями с картинками, даже небольшим видео-курсом.

Все готово. Наша работа здесь закончена. Хотя подождите, что эт… Новые договора, теперь на SEO? Пожалуй, задержимся в XL. Тем более что за время разработки мы хорошо изучили эти торговые центры, и их не стыдно будет продвигать. Офлайн-версия ТРЦ тоже хороша.

P.s. Сайт сдан и запущен в 2018 году. Он до сих пор работает без каких-либо доработок и переделок. Несмотря на то, что мы всегда готовы помочь, контент-менеджеры XL прекрасно справляются самостоятельно. Значит, разработка выполнена как следует, и теперь мы с легким сердцем занимаемся продвижением.