Интернет-магазин спортивного питания

SportPitSale

выполненная работа
  • Проектирование
  • Дизайн
  • Вёрстка
  • Адаптив
  • Программирование
  • Тестирование
  • Техподдержка
Заказчик
Mагазин спортивного питания в городе Санкт-Петербурге. В магазине представлен широкий ассортимент спортивного питания от ведущих производителей и поставщиков.
Задача
Создание сайта с «нуля» (старт бизнеса), в условиях высокой конкуренции в регионе.
Разработать и запустить полноценный, адаптивный интернет-магазин с заполненным каталогом товаров с торговыми предложениями за 3 месяца.

прототипирование

Аналитика и проектирование

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

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

Для реализации функциональных возможностей сайта была выбрана платформа 1С-Битрикс «Бизнес».

Дизайн страниц

Визуализация проекта

website design

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

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

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

bootstrap

Адаптивная верстка

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

программирование

настройка и отладка

back end

Сайт собирался на редакции «Бизнес» с расширенными возможностями для интернет-магазина. Удобная система работы с заказами, неограниченное количество складов, веб-аналитика, email-маркетинг и куча других плюшек, упрощающих ведение продаж.

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

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

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

По пожеланию заказчика реализованы 2 разных зафиксированных меню: меню на детальной странице и меню на всех остальных страницах.

Каталог товаров перенесли с другого сайта путем написанного скрипта выгрузки товаров.

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

Нестандартные решения

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

Реализовали второй фильтр по брендам в шапке сайта для ускорения и удобного поиска необходимого товара.

Команда разработки

кто это сделал ?!

techsupport
Владимир
Руководитель проекта
Асият
Верстка
Контроль
Ольга
Рекламма
Продвижение
Надежда
Дизайн
Игорь
Хорошая компания

проект в числах

recommend
50%
  • Переговоры
  • Консультирование
  • Согласование
30%
  • Прототипирование
  • Дизайн-Концепция
  • Отрисовка страниц
29%
  • Адаптивная верстка
31%
  • Программирование
  • Отладка
  • Отрисованно иконок
    Обработанно фотографий
  • Переработано страниц
    текстов
  • Работало специалистов
    над проектом

Результат

Как-то так получилось

Асият
Руководитель
проекта

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

Заказать проект

Согласен на передачу личных данных ФЗ РФ №152 «О защите персональных данных»