Onemoda

Мульти-брендовый интернет магазин одежды в США

Ссылка на проект

Цель

Разработка интернет магазина брендовой одежды Onemoda

Задачи

  • разработка дизайна интернет магазина
  • адаптивная верстка страниц сайта
  • разработка функционала интернет магазина
  • перенос данных из старого сайта
  • добавление платежных систем: Stripe, Affirm, PayPal, AmazonPay
  • переработка административной панели CMS под требования клиента

История проекта

Ввиду успешной работы в течении длительного времени над предыдущими проектами, клиент обратился к нам с задачей по редизайну интернет магазина брендовой одежды в США. Было предоставлено техническое задание и пожелания по дизайну для нового интернет магазина, которые мы обсудили нашей командой с клиентом и его представителем.

Основной проблемой старой версии сайта было отсутствие современного дизайна, вызывающего доверие, которое влияет на процент конверсий. Вторым аспектом по важности была мобильная версия, поскольку 80% трафика – мобильный.

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

Еще одним требованием был перенос всех данных сайта и адресов существующих страниц.

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

Главная страница

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

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

В рамках проекта были разработаны дополнительные элементы для отображения скидок и акционных предложений, например:

  • полоса в шапке сайта;
  • информация про купоны на карточке товара на странице категории и на странице товара;
  • отдельная страница с перечнем акционных предложений.

Главная страница интернет магазина одежды Onemoda

Шапка сайта и меню

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

В блоке меню второго уровня размещены небольшие рекламные баннера, которые позволяют акцентировать внимание пользователя на необходимых разделах интернет магазина.

Поле поиска реализовано с выпадающим меню-подсказками, которые «на лету» подгружают товары, соответствующие вводимому поисковому запросу.

Страница каталога

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

Страница категории

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

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

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

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

Страница товара

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

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

Страница корзины

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

Страница корзины интернет магазина одежды Onemoda

Страница оформления заказа

Страница оформления заказа интернет магазина одежды Onemoda

Страница благодарности за заказ

Страница благодарности за заказ интернет магазина одежды Onemoda

Страница избранного

Страница часто задаваемых вопросов

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

  • страница часто задаваемых вопросов;
  • страница контактов;
  • страница «О компании».

Страница часто задаваемых вопросов интернет магазина одежды Onemoda

Страница контактов

Страница контактов интернет магазина одежды Onemoda

Страница "О компании"

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

Страница ошибки 404

Страница ошибки 404 интернет магазина одежды Onemoda

Мобильная версия

Хочу похожий сайт

Обсудить проект

    Google Rating 5.0 Based on 28 reviews
    Telegram Viber messenger email