Создание интернет-магазина спортивной одежды sp24.me

автор Егор Добрынин, 30 июля 2013, рубрика Работы. нет комментариев

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

Интернет-магазин СпортПункт24 успешно занимается реализацией оригинальной одежды, обуви и аксессуаров из Великобритании.  В магазине представлен широкий спектр брендов от самых демократичных до премиум-сегмента: Adidas, Canterbury, Brookhaven, Speedo, Fred Perry, Duffer of St George, McKenzie и многие другие.

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

Создание интернет-магазина

  • Анализ структуры каталога
  • Анализ механизмов подтверждения, оплаты и доставки заказов, составление ТЗ
  • Дизайн
  • Верстка и программирование
  • Тестирование
  • Наполнение каталога товаров
  • Запуск сайта

Анализ структуры товарного каталога интернет-магазина спортивной одежды

До разработки дизайна определяемся с основными товарными группами магазина. Создаем список категорий и mind map.

 

Анализ механизмов подтверждения заказов и техническое задание

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

 

Дизайн интернет-магазина

На момент начала работ по дизайну утвержден разработанный нашим агентством логотип магазина, выбран основной домен sportpunkt24.ru и короткий — sp24.me, в ТЗ описаны особенности каталога. Основная задача на пером этапе — найти стилистику и грамотно скомпоновать страницы.

Начинаем работу со страницы общего вывода категории каталога.

создание интернет-магазина

 
Каждая ячейка товара содержит характеристики:
  • цена
  • цена со скидкой
  • название, включая бренд
  • категория
  • торговые предложения (расцветки) — показываются при наведении

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

 

Выбор бренда реализован в модальном окне с CSS3 эффектом

Решение о покупке пользователь принимает на странице товара — и это ключевой момент в дизайне интернет-магазина.

Мы уделили большое внимание общей компоновке страницы и продающей кнопке. Продублировали в ней цену, сделали сочный дизайн и завершили подписью о скидке (если есть)

В дизайн сайта входят не только графические элементы, но и то как сайт реагирует на действия пользователя. Например, что именно будет происходить при нажатии кнопки «купить» (ниже анимация).

 

Главная страница вопреки распространенному мнению не является «главной» при разработке продающего дизайна интернет-магазина. Основное внимание скорее должно быть уделено сквозным блокам в дизайне: шапке сайта, меню, подвалу и т.п.

В шапке следует пояснить основную идею или конкурентное преимущество (УТП).

После подписания основных дизайн-макетов переходим к дополнительным

 

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

 

Визуализируем этапы оформления заказа (подтвердить, указать данные, оплатить)

Оплатить заказ можно только после подтверждения менеджером.

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

В тоге было подписано 12 уникальных дизайн-макетов интернет-магазина. Параллельно этому не прошли внутреннее согласование порядка 50 макетов от нашего дизайнера-стажера (ниже анимация).

 

Верстка и программирование интернет-магазина на XSLT-based CMS Symphony

В процессе верстки шаблонов страниц сайта использована методология БЭМ, созданная компанией Яндекс. 

Внутренний контроль на данном этапе осуществляется благодаря использованию системы ведения проекта Мегаплан.

* в данный момент все проекты агентства переведены в систему Битрикс24

 

Тестирование

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

Наполнение каталога товаров

Для данного проекта разработан механизм полу-автоматизированного переноса товаров с сайта поставщика. В итоге на момент запуска в интернет-магазине можно купить:

27 279 товаров (включая комбинации цвет/размер)

которые распределены по 121 категории.

Каждое торговое предложение имеет характеристику вес, которая позволяет рассчитать стоимость доставки заказа.

Запуск сайта

После важного этапа наполнения и дополнительного тестирования сайта мы переносим сайт на финальный хостинг. Создание интернет-магазина завершено.

 

Работа по созданию интернет-магазина выполнена в интерактивном агентстве Ремарк в 2012 году.

Посетите сайт sp24.me

Оставайтесь в курсе наших событий — подписывайтесь на рассылку блога