Разработка интернет-магазина женской одежды Mezzatorre

Клиент: “Mezzatorre”— бренд модной женской одежды в сегменте middle+, у которого более 20 магазинов в России.

Бренд является клиентом агентства довольно давно. Мы разработали для них первоначальную версию сайта и в течение нескольких лет оказывали техническое сопровождение.

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

Перед агентством стояли задачи:

- Продумать концепт новой версии интернет-магазина

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

- Улучшить мобильную версию сайта

- Оптмизировать загрузку сайта

- Улучшить пользовательский опыт

На начальном этапе мы разработали новую структуру сайта. 

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

После обсуждения и утверждения структуры с клиентом мы принялись за создание прототипов для страниц сайта. 

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

Бренд проводит в сезон несколько креативных съемок, и эти материалы хотелось отразить на сайте в полном объеме, а не только в качестве иллюстраций для категорий магазина на главной странице. Для этого был создан специальный раздел Stories, в котором контент-менеджер может, как в конструкторе, собирать страницу из разных элементов, добавляя фото разного формата и дополняя съемку видеоматериалами.

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

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

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

Цветовая палитра была намеренно выбрана базовая, с минимальными цветовыми акцентами. Это позволило выгодно выделить товары и создать сдержанный и стильный общий внешний вид. Мы также подобрали пару контрастных шрифтов: элегантный Playfair Display с засечками и лаконичный Matahari. Вместе они передают настроение бренда, подчеркивая его утонченность, современность, мобильность и хороший вкус.

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

После выбора дизайна, который в большей мере отражал суть бренда, мы принялись за создание полного комплекта дизайн-макетов.  

Версткой сайта наша команда занималась совместно с компанией «Лига А», специализирующейся на фронтенд-разработке. Их специалисты подготовили базовый комплект шаблонов, а все дальнейшие работы, включая интеграцию верстки с 1С:Битрикс проводились уже инхаус. Ключевой задачей было сохранить изначальный внешний вид и структуру макета, а также обеспечить его правильное отображение на всех типах устройств и разрешениях экранов.

Подготовка шаблонов осуществлялась с учетом последующей интеграции с платформой 1С:Битрикс. Как и любая CMS, 1С:Битрикс имеет свои нюансы и требования, поэтому важно было учесть специфику этой системы.

После того, как был подготовлен полный комплект HTML-шаблонов, мы провели тестирование на различных экранных разрешениях, внимательно контролируя отображение каждого элемента.

В процессе подключения верстки к 1С:Битрикс мы отдельно уделили внимание внедрению требований SEO-специалистов, включая интеграцию микроформатов и оптимизацию скорости загрузки шаблонов, что в конечном счете значительно улучшило видимость сайта в поисковых системах.

Мы проделали много работы по внедрению новых функций на сайт, которые призваны упростить процесс покупки и в целом улучшить впечатление от взаимодействия с онлайн-магазином, сделать его более удобным и современным. Вот что и как мы сделали:

1.  Дали клиентам возможность найти то, что им действительно нужно, добавив фильтрацию товаров по различным категориям и поиск по каталогу: можно искать товары по артикулам, названиям и ключевым словам

2. Детальнее проработали наполнение карточек товара:

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

- добавили функцию «Купить готовый образ», которая позволяет клиентам добавить все товары из образа  в корзину в один клик (дополнительные вещи мы заносим в карточку как сопутствующие товары) 

- добавили функцию «Купить в один клик»: клиенту достаточно указать свой размер и оставить контактные данные, чтобы с ним связался менеджер, который оформит заказ по телефону.

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

3. Существенно оптимизировали процесс выгрузки товаров и контента на сайт:

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

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

- создали специальные бейджики для привлечения внимания к товарам с дисконтом. Выразительные значки привлекают внимание покупателей и указывают на товары с выгодными акционными предложениями.

- для эффективного управления акциями был разработан специальный модуль, который позволяет легко вносить текстовые данные, такие как описания акций в верхней полосе сайта, а также обновлять баннеры сразу в десктопной и мобильной версии.

4. Поработали с разделом «Блог», увеличив взаимодействие с магазином и сделав его еще больше похожим на настоящее СМИ.

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

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

- добавили возможность делать подборки товаров внутри статьи: когда в материале упоминаются конкретные товары, мы можем автоматически выводить небольшие карточки этих товаров в виде слайдера.

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

- добавили тематическую подборку материалов по теме в конце каждой статьи. Таким образом после прочтения пользователи могут легко перейти к другим текстам на смежные темы.

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

Реализовали полноценную интеграцию с 1С: теперь каталог сайта и 1С синхронизированы, как и товарные остатки. В карточке товара пользователи сразу видят актуальную информацию по наличию размеров в онлайн- и офлайн-магазинах. Также была сделана интеграция с CRM клиента и с приложениями на iOS и Android, в разработке которых наша команда участвовала ранее.

Результат: современный интернет-магазин модной одежды с актуальным дизайном, удобным интерфейсом и интересным контентом.