Интернет-магазин спортивного питания
SportPitSale
Заказчик
Интернет-магазин спортивного питания для бодибилдинга.
Задача
Разработать адаптивный интернет-магазин с заполненным каталогом товаров и торговыми предложениями.
прототипирование
Аналитика и проектирование
Совместно с заказчиком просмотрены и проанализированы конкурентные сайты, рассмотрены плюсы и минусы дизайна/функциональной части сайтов, выявлены потребности целевой аудитории. На основе собранной информации, проведенного анализа и пожеланий заказчика составили предварительное ТЗ. На протяжении всего процесса разработки велось плотное общение с заказчиком, отчетность в виде демонстраций промежуточных результатов.
При разработке архитектуры и функционала сайта учитывалась: скорость работы сайта, удобство поиска товара, удобство дальнейшего администрирования сайта с большим количеством товаров, фильтров, характеристик и опций.
Для реализации функциональных возможностей сайта была выбрана платформа 1С-Битрикс «Бизнес».
Дизайн страниц
Визуализация проекта
Основные требования заказчика к дизайну сайта – черно-оранжевая цветовая гамма, элементы на сайте не должны иметь острых углов, а кнопки должны быть выпуклыми. Также у заказчика было свое видение в расположении элементов страниц.
На основании данных пожеланий было разработано 3 варианта главной страницы с различной компоновкой цветов и расположением блоков. Заказчиком не был выбран ни один вариант, однако наглядные макеты позволили заказчику более детально сформировать свои предпочтения, а нам, в свою очередь, визуализировать «хотелки» заказчика.
После недельной работы над дизайном главной страницы (общение с заказчиком 24/7) заказчику был представлен еще один вариант главной страницы, который в итоге стал конечным (на словах), на деле – правки, правки и еще раз правки. Но мы были заинтересованы в том, чтобы сделать проект как можно лучше, как и во всех других проектах. Поэтому учитывалось и обсуждалось каждое пожелание заказчика (при том, что дизайн адаптивный и правка в одном разрешении макета влечет за собой правку в других разрешениях). В итоге трехнедельной работы над дизайном сайта был разработан конечный вариант с учетом всех «хотелок» заказчика, скорректированные нами в пользу удобства и понятного интерфейса. Проработке каталога и детальной страницы товара было уделено большое количество времени: вывод необходимой информации о товаре для пользователя, удобство выбора товара, анимация пересчета цены в зависимости от выбора характеристик, анимация окна корзины при добавлении товара в корзину.
bootstrap
Адаптивная верстка
При верстке сайта использовался фреймворк Bootstrap для реализации адаптивности страниц под разные размеры экранов устройств. В процессе верстки выявились некоторые моменты, которые не были учтены в дизайне. Дорабатывали, изменяли, переносили. Каждая корректировка согласовывалась с заказчиком. На выходе получили улучшенную версию дизайна.
программирование
настройка и отладка
Сайт собирался на редакции «Бизнес» с расширенными возможностями для интернет-магазина. Удобная система работы с заказами, неограниченное количество складов, веб-аналитика, email-маркетинг и куча других плюшек, упрощающих ведение продаж.
Сайт собирался «дружной» командой программистов из 4 человек. Продвижение в сборке измерялось количеством выпитого кофе, съеденных печенюшек и восклицательных знаков в сообщениях заказчика.
Даже на этапе сборки мы были лояльны к непрекращающимся пожеланиям заказчика и на ходу добавляли некоторые функции на сайте.
Реализован функционал по добавлению выбранного торгового предложения в Отложенные. Для администратора настроен вывод на детальной странице остатка товара на складе/маржинальность. Детально проработан фильтр по товарам в каталоге. Реализовано 2 варианта представления товаров в каталоге: списком и карточками.
По пожеланию заказчика реализованы 2 разных зафиксированных меню: меню на детальной странице и меню на всех остальных страницах.
Каталог товаров перенесли с другого сайта путем написанного скрипта выгрузки товаров.
На этапе сборки сайта параллельно проводились тестирование/доработка функционала, тестировалось поведение элементов на странице, устранялись недочеты.
Отдельной задачей стояла возможность заполнения состава продукта по свойствам для дальнейшего включения свойств в фильтр по товарам. Реализовали сгруппированный состав продукта с гибкой и удобной возможностью группировать/добавлять/заполнять/удалять/редактировать свойства продукта с занесением подсостава свойства и единицы измерения.
Реализовали второй фильтр по брендам в шапке сайта для ускорения и удобного поиска необходимого товара.
проект в числах
Результат
Как-то так получилось
Александр
Программист
Интернет-магазин с понятным интерфейсом и выдержанным дизайном, не отвлекающий пользователя от главной цели – покупки товара. Детальная страница наглядно отображает информацию о товаре, которая может быть полезна покупателю в выборе. Различный функционал такой, как фильтр по брендам, добавить в Отложенные, плавающее меню, помогает пользователю быстрее справиться с покупкой и составит приятное впечатление о компании.
