О проекте
BebeStore — интернет-магазин товаров для будущих мам, новорождённых и детей. Перед командой Iris Digital стояла задача разработать современный интернет-гипермаркет с удобной навигацией, понятным оформлением заказа и интеграцией с системой управления сайтом и учётом товаров.
Дизайн и визуальная концепция
На первом этапе мы подготовили первоначальный вариант дизайна сайта. Затем проанализировали основные пользовательские сценарии и внесли ряд изменений, которые сделали интерфейс более понятным и заметным.
Основные изменения
- выровняли декоративные кубики с логотипом BebeStore, чтобы они полностью отображались в первом экране;
- выделили целевые действия пользователя — кнопки «Купить» и «Оформить заказ» — жёлтым цветом;
- изменили цвет фона с голубого на мягкий жёлтый, чтобы поддержать фирменную стилистику магазина;
- добавили в блоки специальных предложений таймеры обратного отсчёта с отображением часов, минут и секунд;
- привели формы и элементы интерфейса к единому визуальному стилю;
- выделили все элементы, связанные с корзиной, жёлтым цветом;
- разработали внутренние страницы сайта в единой стилистике с главной страницей.
Структура и основные страницы
В рамках проекта мы разработали и адаптировали дизайн ключевых разделов интернет-магазина:
- главной страницы;
- каталога товаров;
- карточки товара;
- раздела новостей;
- корзины;
- страниц оформления заказа;
- внутренних информационных страниц.
Корзина и оформление заказа
Особое внимание уделили сценарию покупки. Мы визуально выделили корзину и связанные с ней элементы, чтобы пользователь мог быстро перейти к оформлению заказа и проверить состав покупки.
Для этого были проработаны:
- отображение добавленных товаров;
- изменение количества товаров;
- удаление позиций из корзины;
- расчёт итоговой стоимости;
- переход к оформлению заказа;
- формы ввода контактных и доставочных данных.
Адаптивная верстка
Сайт получил адаптивную верстку для корректного отображения на компьютерах, планшетах и мобильных устройствах. Мы адаптировали основные элементы интерфейса, включая:
- меню и навигацию;
- каталог и карточки товаров;
- фильтры;
- баннеры;
- формы;
- корзину;
- страницы оформления заказа.
Баннеры и специальные предложения
Для главной страницы разработали рекламные баннеры, которые позволяют выделять сезонные акции, специальные предложения и популярные категории товаров.
В акционных блоках реализовали таймеры обратного отсчёта до секунды: часы, минуты и секунды. Это помогает подчеркнуть ограниченность предложения и привлечь внимание пользователей к акциям.
Интеграция и разработка функционала
После утверждения дизайна мы выполнили монтаж свёрстанных страниц на UMI.CMS и интегрировали сайт с системой 1С.
В рамках технической части проекта реализовали и доработали следующие возможности:
- синхронизацию каталога товаров с 1С;
- отображение просмотренных товаров;
- «умный фильтр» по параметрам товаров;
- акционные предложения с обратным отсчётом времени;
- работу каталога и карточек товаров;
- функциональность корзины;
- оформление заказа;
- адаптивное отображение сайта на различных устройствах.
Для реализации расширенного фильтра мы использовали собственное решение «Фасетный поиск UMI.CMS на базе Sphinx». Оно позволяет быстро находить товары и отбирать их по нескольким характеристикам.
Результат
В результате BebeStore получил современный адаптивный интернет-гипермаркет с единым визуальным стилем, удобной навигацией и понятным сценарием покупки.
Мы объединили в одном проекте:
- проработанный дизайн;
- адаптивную верстку;
- интеграцию с 1С и UMI.CMS;
- быстрый фильтр товаров на базе Sphinx;
- функциональную корзину;
- просмотренные товары;
- акционные предложения с таймерами обратного отсчёта;
- удобное оформление заказа.
