Babyswag. Интернет-магазин детской одежды

1. Вводная задача от заказчика, проблематика, цели

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Ключевые изменения главной страницы:

• Баннеры пустили на всю ширину сайта, но при этом дали рекомендации Заказчику по его высоте: не более 600px, чтобы на первом экране баннер помещался целиком.
• Добавили карусели товарных позиций, последние статьи из блога, форму подписки, инстаграм карусель.

Ключевые изменения каталожной страницы:

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

Ключевые изменения в карточку товара:

• Увеличили область визуализации товара.
• Добавили удобный вариант выбора свойства товара: прямоугольники или изображения варианта.
• Добавили удобные вкладки полного описания, параметров, комментирования товара (отзывы).
• Внедрили карусели с сопутствующими и аналогичными товарами.

Общие ключевые изменения сайта:

• От старого логотипа было решено отказаться.
• Ширина контента 940px + по 52px с каждой стороны контейнера. Ширину увеличили до 1200px + по 15px с каждой стороны контейнера.
• Фон сайта был составлен из повторяющегося jpg. Такое решение плохо тем, что визуально сужает и так узкий контент сайта. Заменили его на самый белый цвет: #fff.
• Фирменные цвета было решено заменить и добавить, чтобы сайт стал более ярким, праздничным и поднимал настроение

3. Результаты сотрудничества

У Заказчика в два раза поднялась конверсия. Объясняется это крайне просто:

• удобная навигация;
• отлаженная мобильная версия;
• простота в поиске товарных позиций (иногда и без поиска, все есть на главной странице);
• ! Не влияет на конверсию, но улучшена индексация в поисковых системах.

Ссылка на новый дизайн