Один сайт трех ТРЦ сразу? Легко! Кейс нашей разработки для группы XL
- Заказчик
- Группа XL- три московских торговых центра: Дмитровка, Family Outlet и Home
- Задача
- Создать один, общий сайт для трех торговых центров с продуманной структурой и удобной системой управления.
Главный приоритет проекта — юзабилити для посетителей и контент-менеджеров.
В группе XL три торговых центра Заказчик пришел с деловым, адекватным настроем — он хотел получить онлайн-ресурс, который будет:
- Удобен
- Красив
Приоритеты в такой последовательности, с юзабилити на первом месте, встречаются довольно редко. Обычно все зациклены на фирменной айдентике и оформительских изысках. Ну что же, отличное начало.
Задача подробнее
В группу XL входят три московских торговых центра — Дмитровка, Family Outlet и Home. Тем не менее, сайт нужен один, общий. Причем посетителю важно дать возможность сфокусироваться на выборе магазинов и дополнительных услуг в пределах одного конкретного торгового центра, другими не отвлекая.
Помимо покупателей есть вторая важная группа пользователей — контент-менеджеры. Они не просто просматривают контент, еще добавляют и редактируют. Исходные материалы поступают от арендаторов. Значит, сайт должен «понимать» разные форматы файлов. Кроме того, нужно упростить и облегчить манипулирование графическими объектами. Это важно как для предотвращения ошибок, так и для ускорения операций с сайтом.
Третья группа — арендаторы. Им нужно предоставить контент в несколько ином формате, удобном для предпринимателей. Разумеется, все также должно быть понятно и удобно. А еще «просто» нравиться (что бывает непросто, но об этом чуть позже).
«Админка»
Пользователи видят только «витрину» сайта — то, что показывает браузер. Для разработчиков это прежде всего «админка», в которой редактируется структура и контент. Заказчики часто начинают с пользовательского ракурса, а по ходу проекта учатся видеть онлайн-ресурс системно. Так было и в этот раз. Мы настояли на платформе Битрикс. Поначалу это вызвало небольшие споры, но потом мнение изменилось: «Как же все логично. Очень рады, что прислушались к вам!» Удобная «админка» — большой плюс, поэтому мы всегда уделяем ей особое внимание.
Вся контентная база внутри общая, любая информация вносится в систему только один раз. Это исключает дублирование, ошибки актуализации, а также сильно упрощает работу контент-менеджеров. Им достаточно расставить «галочки» напротив нужных блоков и значений. После чего сайт сам отобразит данные на выбранных страницах.
Как и планировалось, упростили добавление и обработку графических изображений. В «админку» можно импортировать картинки всех распространенных форматов. И их не придется редактировать вручную. Даже для карты ТРЦ мы разработали специальный модуль.
Карта дает информацию обо всех магазинах и заведениях ТРЦМодуль карты ТРЦ
Можно сказать, что карта ТРЦ — это парадный вход в конверсию сайта, потому что именно она помогает людям составить план шопинга. Да и вообще решить, куда именно поехать за покупками.
Однако, чем эффектнее выглядит карта, тем сложнее ее редактировать. Это становится проблемой при обслуживании сайта. Добавление нового арендатора или изменение геометрии торговой точки требуют от контент-менеджеров владения графическими редакторами, знакомства с тонкими настройками «админки». Точнее, так бывает, когда разработчик сайта «сдает проект» вместо того, чтобы подумать об удобстве его использования. Разумеется, мы пошли другим путем — разработали специальный модуль для работы с картой.
Получилось отлично! Контент-менеджеру достаточно загрузить картинку, и покликать по ней мышкой, обозначая углы помещения. Даже если контур сложный, модуль самостоятельно подсветит нужную конфигурацию, а потом отобразит красивую объемную визуализацию. Это полностью автоматизировано. Для завершения редактирования нужно только проверить, что выбрана правильная иконка, загружен логотип и описание. Любой справится с такой задачей, она не требует ни специальных знаний, ни дополнительного программного обеспечения.
ГИФКА ИЗ ВИДЕО О модуле
На добавление нового арендатора требуется всего несколько минут!
Навигация
«Парадный вход» в ТРЦ решили выполнить в виде огромного, во весь экран меню-баннера. Мимо такого не пройдешь. Посетитель сайта сразу выбирает, какой именно центр его интересует.
Выбор одного из трех торговых центров XL
Сразу после клика открывается соответствующий подсайт, и дальше вся навигация идет по нему. Даже клик по логотипу в шапке ведет не на общую «главную», а на заглавную страницу выбранного ТРЦ.
Конечно, возможность поменять подсайт сохраняется. Для этого нужно кликнуть по иконке-«аккордеону» в левом верхнем углу экрана. И опять переход полностью переключит все управление ресурсом на один конкретный торговый центр.
Повторный выбор торгового центра уже не такой громкий, потому что пользователь точно знает, что сейчас делает — он ведь сам открыл это меню
Далее, мы тщательно просмотрели и ранжировали весь возможный контент. Оставили для отображения на страницах только самое необходимое. Отбор элементов управления был еще более жестким. Результат — аскетичная, наглядная система управления. Ничего лишнего, все важное на виду, доступ к информации в 1-2 клика.
Два режима просмотра — в виде сетки баннеров или по алфавиту
Очевидный факт современной web-разработки — сайт адаптивный. То есть одинаково хорошо работает на устройствах с разными экранами, от маленьких смартфонов до огромных настольных мониторов.
Современный сайт обязан быть адаптивным.
Наконец, навигация не должна ограничиваться самим сайтом. Мы предусмотрели все вопросы, которые могут возникнуть у покупателей — и постарались ответить на них упреждающе, не вынуждая людей звонить с расспросами или озираться на месте. Карта прохода, проезда, парковки, время работы. Полный комплект актуальной информации.
Последние штрихи, контактная информация и маршруты проезда
Прототипирование и дизайн
Сдача интерактивного прототипа прошла без заминок. Используя прежний опыт и новые разработки, мы подготовили модель навигации будущего сайта. Демо-версия наглядно показывала, что и как именно будет работать. Здесь разногласий с заказчиком не возникло.
С визуализацией оказалось сложнее. Первый графический концепт заказчику не понравился. Для того, чтобы разобраться в разногласиях, мы расширили группу дизайнеров, работающих над проектом. После обсуждения предложили другой вариант — и он принят. Вы и сейчас можете его посмотреть на сайте XL.
Выглядит просто, правда? Чтобы добиться такого эффекта, нужно постараться
Сборка и запуск сайта
Теперь все согласовано, отлично. Только пришлось потратить больше времени там, где не ожидали. Не только на дизайн, еще при заполнении сайта контентом. Очень много материала, все нужно сортировать и «причесывать». Подключили своего контент-менеджера, чтобы быстро навести порядок.
Верстку и программирование завершили параллельно, контент начали обрабатывать тоже упреждающе. Соблюдение сроков — важный симптом качества всей работы в целом. Главный секрет обращения с дедлайнами в том, чтобы держать внутреннюю маржу и вести свой собственный график еще более жестко, чем настаивают клиенты.
Вот как выглядела наша диаграмма Ганта, чтобы успеть все вовремя:
И это только заголовки проектных задач!
Перенос на основной домен, запуск. Все работает как и должно — четко, быстро, понятно. Продуманная структура, удобная «админка» для контент-менеджеров. Несмотря на интуитивно понятный интерфейс, мы разработали полный комплект документации. И дополнили его наглядными инструкциями с картинками, даже небольшим видео-курсом.
Все готово. Наша работа здесь закончена. Хотя подождите, что эт… Новые договора, теперь на SEO? Пожалуй, задержимся в XL. Тем более что за время разработки мы хорошо изучили эти торговые центры, и их не стыдно будет продвигать. Офлайн-версия ТРЦ тоже хороша.
P.s. Сайт сдан и запущен в 2018 году. Он до сих пор работает без каких-либо доработок и переделок. Несмотря на то, что мы всегда готовы помочь, контент-менеджеры XL прекрасно справляются самостоятельно. Значит, разработка выполнена как следует, и теперь мы с легким сердцем занимаемся продвижением.