О проекте
Zacaz.ru — интернет-магазин товаров для дома, здоровья, красоты и отдыха. Компания стремится сделать процесс покупки максимально простым и удобным. Сегодня Zacaz.ru является надёжным поставщиком и официальным дистрибьютором ведущих производителей.
Задачи проекта
Перед командой Iris Digital стояли следующие задачи:
- обновить устаревший дизайн сайта;
- упростить управление интернет-магазином;
- повысить удобство навигации и поиска товаров;
- оптимизировать пользовательский путь от выбора товара до оформления заказа;
- создать основу для дальнейшего развития и доработки функциональности;
- интегрировать сайт с учётными, платёжными и логистическими сервисами.
Разработка прототипа
На первом этапе команда разработала прототип нового сайта. За основу взяли существующую структуру Zacaz.ru и сохранили привычное расположение основных блоков, изменив его только там, где это было необходимо для улучшения пользовательского опыта.
В ходе работы были подготовлены несколько вариантов прототипа. В результате команда остановилась на первом варианте и доработала его с учётом дополнительных требований.
Первый вариант прототипа:
Второй вариант прототипа:
Основные изменения в структуре и интерфейсе
Упрощение навигации
- Корзину разместили в верхней части сайта.
- Предусмотрели фиксированную верхнюю панель, чтобы пользователь мог быстро перейти к корзине в любой момент.
- Боковое меню с разделами и подразделами заменили на выпадающее. Это позволило освободить пространство страницы и сократить количество действий при выборе нужного раздела.
- Основное меню продублировали в подвале сайта — для быстрого доступа к разделам после прокрутки страницы вниз.
- В подвале также разместили ссылку на корзину.
- В шапку добавили ссылки на Skype и ICQ.
- Предусмотрели блок «Задать вопрос».
Улучшение работы с корзиной
- Добавили визуализацию корзины, доступную на всех страницах магазина.
- Реализовали возможность показать или скрыть корзину.
- Зафиксировали блок корзины в левой верхней части экрана.
- Пользователь может просматривать состав заказа и корректировать его без перехода на отдельную страницу.
- Реализовали быстрый заказ выбранного товара.
Работа с товарами
- Убрали артикул из основного блока товара и перенесли его в карточку товара.
- Удалили лишнюю ссылку «Подробнее».
- Добавили блок «Просмотренные товары».
- Реализовали вкладки для товарных подборок:
- «Новинки»;
- «Скидки»;
- «Спецпредложения»;
- «Популярные».
- Протестировали разные варианты сетки каталога — по три и четыре товара в ряд.
- Добавили подсказки по товарам в поисковой строке.
- Реализовали маркетинговые метки для товаров.
Контентные и рекламные блоки
- Добавили рекламный баннер.
- Увеличили высоту рекламной области.
- Разместили рекламный баннер под боковым меню.
- Добавили видеоролики.
- Вывели на главную страницу последние новости.
- Сократили объём новостного блока.
- Разместили блок с новинками под новостями.
- Вынесли варианты оплаты в подвал сайта.
- Добавили блоки регистрации и авторизации в верхнюю фиксированную панель.
Дизайн
После утверждения прототипа разработали несколько вариантов визуального оформления сайта. Основное различие заключалось в цвете фона шапки: были представлены варианты со светлым и тёмным оформлением.
В итоге утвердили дизайн с тёмно-серым фоном в шапке.
Маркетинговые метки для товаров:
Разработанные страницы
- главная страница;
- каталог товаров с фильтрами поиска;
- карточка товара;
- текстовые страницы;
- раздел новостей;
- страницы оформления заказа;
- элементы интерфейса корзины и быстрого заказа.
Адаптивная вёрстка и front-end
Для сайта разработали адаптивную вёрстку на базе Bootstrap 2.3.2.
В рамках front-end-разработки реализовали интерактивные элементы:
- увеличение изображения товара при наведении;
- анимацию перемещения изображения товара в корзину после нажатия кнопки «Купить»;
- отображение и скрытие визуализации корзины;
- подсказки в поисковой строке;
- работу блока просмотренных товаров;
- адаптацию интерфейса под разные размеры экранов.
Интеграция с UMI.CMS
Сверстанный дизайн интегрировали с платформой UMI.CMS. На её базе настроили работу интернет-магазина и подключили разработанные функциональные модули.
Дополнительный функционал и интеграции
Для Zacaz.ru реализовали интеграции с внешними сервисами:
- 1С:Управление торговлей 8 — синхронизация данных интернет-магазина и учётной системы;
- СДЭК — расчёт и оформление доставки;
- Interkassa — приём онлайн-платежей;
- интернет-эквайринг банка «Авангард»;
- КЛАДР в облаке (kladr-api.ru) — подсказки при вводе адреса доставки;
- PostIndexAPI.ru — определение адреса по почтовому индексу;
- postcalc.ru — расчёт стоимости доставки Почтой России;
- API Почты России — отслеживание регистрируемых почтовых отправлений.
Также разработали новые типы скидок на основе купонов.
Результат
В результате Zacaz.ru получил обновлённый интернет-магазин с:
- современной структурой и визуальным оформлением;
- адаптивным интерфейсом;
- более удобной навигацией по каталогу;
- быстрым доступом к корзине;
- улучшенным поиском и фильтрацией товаров;
- функционалом быстрого заказа;
- интеграциями с учётной системой, службами доставки и платёжными сервисами;
- возможностью дальнейшего развития и масштабирования проекта.
