Интернет-магазин «Marks & Spencer»
Marks & Spencer — компания с более чем вековой историей и безусловный синоним стиля в современном мире. Команда Morizo провела для заказчика исследование пользовательского опыта, разработала интернет-магазин, где сочетались мировые тренды и специфика российского рынка, и вывела бренд в интернет-пространство России.
задачи
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
Регистрация при оформлении заказа, сведенная до указания электронного
адреса и пароля.
Вход
Лендинг
Каталог
Регистрация
Корзина
Карточка товара
Регистрация
Корзина
Цена на товары с учетом акций и персональных скидок отображаются в выпадающей плашке без перехода в корзину. Так пользователь остается на интересной ему странице и получает дополнительный стимул для совершения покупки.
На самой странице корзины можно ввести купон (например, на бесплатную доставку) и скорректировать параметры выбранного товара, не возвращаясь в каталог.
Внедрили функцию «отложенная корзина». Если товар внезапно закончился, он переместится в отложенную корзину, и пользователь сможет приобрести его как только предложение появится на стоке.
Совершенно новая функция — отложенная
корзина. Если кто-то внезапно перекупил понравившийся пользователю товар, это не станет
неприятным сюрпризом на последнем шаге оформления заказа — товар переместится в
отложенную корзину,
и пользователь
сможет приобрести его как только предложение появится
на стоке.
Отзывы
Отзывы на сайте часто продают лучше, чем описание товара. Команда Morizo интегрировала пятибалльную шкалу оценок по важнейшим параметрам товара. Потенциальный покупатель может либо погрузиться в детали комментария, либо быстро сориентироваться по средним баллам оценки.
Потребитель может оценить вещь
по различным параметрам качества.
Блог
Раздел «Блог» оформили в стилистике бренд-медиа или модного журнала, где можно узнать о трендах сезона, прочитать интервью знаменитостей, оценить стильный лук и тут же положить в корзину понравившуюся вещь. Такой формат помогает работать с лояльностью пользователей, увеличивает время пребывания на сайте и становится еще одним поводом вернуться на портал.
На сайте можно в полной мере погрузиться в
мир бренда 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
Склады в 34 розничных магазинах в 11 городах
4
Сервис доставки в постаматы PickPoint
5
Система электронных платежей PayU
6
Почта России
конструктор акций
Позволяет настраивать персональные спецпредложения с гибкими параметрами: (на каждый N-й товар, при покупке N единиц товаров или на всю группу купленных товаров). Система поддерживает настройку по любым характеристикам: на определенный товар или н товарную группу), а также по свойствам товаров (цвет, размер и тд.).
БЕЗОПАСНОСТЬ
Тестирование безопасности сайта на разных этапах разработки производилось международной командой специалистов. Выполнен статический анализ кода и тесты на проникновение по случайным алгоритмам. Использование платформы 1С-Битрикс в разы сократило время проверки.
конструктор страниц блога
Можно собрать любую страницу статьи из 15 готовых блоков для работы с текстовым и фотоконтентом. На создание одной страницы уходит от 2 до 10 минут в зависимости от сложности идеи.
триггерные рассылки
Автоматические рассылки с бонусными купонами в ответ на определенные действия пользователя: покупка нескольких товаров, покупка на определенную сумму и т.д.
Итог
3 тыс. часов
непрерывной работы 11-ти лучших специалистов студии
ну ладно-ладно,
мы отвлекались на 5 o’clock
мы отвлекались на 5 o’clock
1,32 %
средний коэффициент конверсии
по итогам
3-х месяцев работы
30 %
покупок было совершено
с мобильных
устройств
< 20 %
cредний показатель
отказов
отказов
5-7 страниц
пользователь посещает
за 1 сеанс
за 1 сеанс
5-6 минут
среднее время, проведенное пользователем на сайте
Мы разработали интернет-магазин, который одинаково удобен как для начинающих пользователей, так и для опытных покупателей. Критически важным было создать систему с точной информацией о наличии товаров, синхронизированную с 34 магазинами по всей России. При этом необходимо было сохранить идентичность европейского бренда в каждой детали.
Определенно, нам удалось достигнуть поставленных целей.
Определенно, нам удалось достигнуть поставленных целей.
