Интернет-магазин «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 минут
среднее время, проведенное пользователем на сайте
Мы стремились создать магазин, удобный каждому:
опытному пользователю и тому, кто только привыкает совершать
покупки через интернет. Надеемся, нам это удалось.
опытному пользователю и тому, кто только привыкает совершать
покупки через интернет. Надеемся, нам это удалось.
Над проектом работали
-
Ольга Солтанруководитель
проекта - Антон Филинпроектировщик
-
Светлана Солдатовастарший back-end
разработчик - Олеся Близнец руководитель отдела управления проектами
- Антон Ларинарт-директор
-
Татьяна Лапшинаback-end
разработчик -
Андрей Свинцовтехнический
директор - Александр Федотовдизайнер
-
Михаил Карпельback-end
разработчик - Наталья Козинаконтент-менеджер
-
Александр Захаровстарший front-end
разработчик