Интернет-магазин «Marks & Spencer»
«London is a capital of Great Britain», — это знает каждый школьник, но даже великолепное владение английским не сделает нас настоящими британцами. А если очень хочется почувствовать себя жителем туманного Альбиона, что стоит предпринять?
Все очень просто: достаточно добраться до ближайшего магазина Marks & Spencer и
приобрести себе идеальные брюки со стрелками или, скажем, платье-футляр от
знаменитого бренда, ведь, если ты настоящий британец, ты можешь не знать наизусть
имена всех жён Генриха VIII,
задачи
1
Адаптировать существующий
в Британии
интернет-магазин под российский рынок e-commerce
2
Обеспечить полное соответствие бизнес-процессов на сайте
и в магазинах
3
Наладить диалог между компанией
и покупателем
через Интернет
маркетинговое исследование
Мы решили со всей английской педантичностью
подойти к поставленным задачами и начали разработку магазина с небольшого маркетингового
исследования. Получив данные по целевой аудитории компании, мы расширили их мнением
лояльных потребителей бренда.
Возраст
< 20
20 - 29
30 - 39
40 - 49
50+
0
5 000
10 000
15 000
20 000
чел.
Пол
80%
женщины
20%
мужчины
прототипирование
Специалисты проделали огромную работу по
созданию адаптивных сценариев для магазина: каждая страница, представленная
пользователю, была продумана проектировщиком и дизайнером в 3-х разрешениях экрана с
учетом принципов юзабилити. На мобильных разрешениях мы постарались сохранить полный
функционал магазина, убрав лишь переход к некоторым информационным страницам в футере, и
акцентировать внимание на каталоге.
30% транзакций, совершенных на сайте, были
проведены
с мобильных
устройств.
Основное меню и меню категорий
В меню, кроме привычных категорий «Женское»,
«Мужское», «Детское», мы вынесли категории, в которых встречаются товары, позволяющие
компании выделиться среди конкурентов: «Белье» и «Большие размеры».
Типовые сценарии поведения пользователя
Для пользователя регистрация на незнакомом ресурсе
без видимых на то причин всегда довольно болезненный процесс, поэтому у нас существует 2 пути зарегистрироваться:
без видимых на то причин всегда довольно болезненный процесс, поэтому у нас существует 2 пути зарегистрироваться:
Пользователь переходит в каталог как напрямую из меню, так и
через лендинги категорий, которые знакомят его
с главными акциями и трендами. Товар легко добавить в корзину со страницы каталога, используя «Быстрый просмотр»,также можно узнать подробнее о понравившейся модели на её детальной странице, и лишь затем принять решение о покупке.
с главными акциями и трендами. Товар легко добавить в корзину со страницы каталога, используя «Быстрый просмотр»,также можно узнать подробнее о понравившейся модели на её детальной странице, и лишь затем принять решение о покупке.
Существует 2 способа оформить заказ: положив товар в корзину и
заполнив форму заказа или зарезервировав товар
в розничном магазине, указав лишь контактный телефон. Основная страница оформления заказа предоставляет 5 способов доставки товара на выбор (от Почты России до постаматов) с обозначением сроков и стоимости доставки и 2 способа оплаты заказа.
в розничном магазине, указав лишь контактный телефон. Основная страница оформления заказа предоставляет 5 способов доставки товара на выбор (от Почты России до постаматов) с обозначением сроков и стоимости доставки и 2 способа оплаты заказа.
Через личный кабинет пользователь может осуществлять подписку на
новости компании, как по e-mail, так и по смс, отслеживать путь своего заказа по
присвоенным статусам, просматривать избранные товары.
На новости компании можно подписаться, введя e-mail
в поле футера, а также в один клик в настройках личного кабинета. Приятным дополнением к подписке является генерируемый сайтом бонусный купон, который высылается на почту.
в поле футера, а также в один клик в настройках личного кабинета. Приятным дополнением к подписке является генерируемый сайтом бонусный купон, который высылается на почту.
1
Намеренная регистрация через форму с расширенным набором полей
Главная
2
Регистрация при оформлении заказа, сведенная до указания электронного
адреса и пароля.
Вход
Лендинг
Каталог
Регистрация
Корзина
Карточка товара
Регистрация
Корзина
Не переходя на страницу
корзины, пользователь может увидеть цены товаров с учетом акций в выпадающей плашке.
На самой странице корзины
можно ввести купон (например, на бесплатную доставку) и скорректировать параметры
выбранного товара, не возвращаясь
в каталог.
Совершенно новая функция — отложенная
корзина. Если кто-то внезапно перекупил понравившийся пользователю товар, это не станет
неприятным сюрпризом на последнем шаге оформления заказа — товар переместится в
отложенную корзину,
и пользователь
сможет приобрести его как только предложение появится
на стоке.
Отзывы
Отзывы на сайте заслуживают отдельного внимания. Сложно напрямую влиять на потребителя в
момент принятия решения, но доступ к сети имеют равноправные пользователи, которые,
безусловно, влияют друг на друга.
Потребитель может оценить вещь
по различным параметрам качества.
Блог
В разделе «Блог» привычный магазин предстает перед нами в виде модного журнала, где
можно почерпнуть советы по уходу за одеждой, узнать о трендах сезона, прочитать интервью
знаменитостей, оценить стильный лук и тут же положить в корзину понравившуюся вещь.
На сайте можно в полной мере погрузиться в
мир бренда Marks & Spencer.
Вакансии
Тем, кто после посещения магазина захочет стать частью международной команды Marks &
Spencer, стоит заглянуть в раздел «Вакансии», где подробно описаны предложения компании
и есть возможность разместить свое резюме.
Инновации
Компания Marks & Spencer всегда была новатором в области технологии.
В 1934
году они впервые в истории ритейла основала собственные исследовательские лаборатории
для разработки новых типов тканей.
И обо всем
этом также можно узнать на страницах сайта в разделе «Инновации».
Front-end
Это первый адаптивный интернет-магазин, разработанный студией. Удобство работы с ним
можно оценить, являясь пользователем гаджета любого формата.
1280 px
768 px
320 px
Александр захаров
старший front-end разработчик проекта
При переходе от десктопа к
смартфону изменяются сценарии работы пользователей. Пагинация преобразуется в бесконечный
список подгружаемых позиций. Фильтр также значительно изменяет механику работы от десктопа
к мобильной версии
, что обеспечивает удобство его использования на смартфоне. На смартфоне всплывающие окна не
накладываются на основной контент,
а показываются
как полноценные страницы. И особую гордость вызывает сложная работа «Избранного» — все
данные раздела динамически обновляются во всех вкладках пользователя.
Меняйте размеры этого виртуального
браузерадля демонстрации
адаптивности сайта
↔
браузера
↔
Back-end
Cложнее всего всегда сделать что-то очень простое и удобное, не правда ли? Кажется, в
этот раз нам удалось. Специально для заказчика была разработана система управления
информацией о товарах – M&S Content Editor.
Андрей Свинцов
технический директор
Content
Editor является связующим мостом между глобальной системой хранения данных о товарах в
Англии и локальным представительством магазина в России.
В нашей
системе контент-редакторы переводят информацию об английских товарах, а затем передают
данные о номенклатуре на сайт и в систему складского хранения. В рамках данного проекта
Content Editor заменяет так популярную
в России1С-Склад.
в России
Светлана Гущина
старший программист проекта
Мы
проделали действительно грандиозную работу по интеграции. Множество направлений по обмену
данными для реализации полезного и нового функционала
на этом
проекте — наше главное достижение. Более того, уже после запуска сайт планирует подключить
еще несколько сервисов — работа продолжается.
Среди направлений интеграции можно выделить
1
Сервис, осуществляющий хранение стока с интернет-магазина и доставку
товаров по всей России
2
СRM – система заказчика
для обеспечения
единой базы пользователей с присвоением уникальных идентификаторов
3
Розничный склад заказчика и cклады 34 розничных магазинов в 11 городах
4
Сервис доставки в постаматы PickPoint
5
Система электронных платежей PayU
6
Почта России
конструктор акций
Для воспроизведения всех акций компании на сайте, помимо простых
скидочных предложений, разработан конструктор акций, позволяющих настраивать
спецпредложения с любой кратностью применения
(на каждую
N-ую вещь, при покупке N вещей на всю группу купленных товаров); любым охватом (как на
конкретный товар, так и на целую товарную группу), любыми свойствами товаров (товары
определенного цвета
и размера
и тд.).
БЕЗОПАСНОСТЬ
Тестирование безопасности сайта на разных этапах разработки производилось
международной командой специалистов. В ходе тестирования были выполнены статический
анализ кода и тесты на проникновение
по случайным
алгоритмам. Использование платформы 1С-Битрикс, в качестве основы для разработки
интернет-магазина, позволило существенно сократить время
на этом
этапе.
конструктор страниц блога
В административном разделе сайта реализован конструктор страниц блога,
который позволяет спроектировать страницу статьи, используя порядка 15
запрограммированных блоков разнообразного вывода
и представления
контента.
триггерные рассылки
Новшеством стал функционал триггерных рассылок купонов с сайта: при
выполнении определенных условий
в поведении
пользователя, через сайт можно осуществлять почтовую рассылку
с запрограммированными
бонусными купонами.
Итог
3 тыс. часов
непрерывной работы 11-ти лучших специалистов студии
ну ладно-ладно,
мы отвлекались на 5 o’clock
мы отвлекались на 5 o’clock
1,32 %
средний коэффициент конверсии
по итогам
3-х месяцев работы
30 %
покупок было совершено
с мобильных
устройств
< 20 %
cредний показатель
отказов
отказов
5-7 страниц
пользователь посещает
за 1 сеанс
за 1 сеанс
5-6 минут
среднее время, проведенное пользователем на сайте
Мы стремились создать магазин, удобный каждому:
опытному пользователю и тому, кто только привыкает совершать
покупки через интернет. Надеемся, нам это удалось.
опытному пользователю и тому, кто только привыкает совершать
покупки через интернет. Надеемся, нам это удалось.
