Для магазина выбрана светлая стилистическая основа, акцентный цвет — красный (взят из брендбука компании). Шрифты строгие и рубленные с множеством начертаний.


 

Главная страница

 

Главная страница с большим ярким блоком банеров: рекламный, статья из блога или новостей, товар или категория товара. Также, среди карточек товара размещены  банеры-категории.

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

 

Листинг каталога на главной странице

Каталог

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

Навигационное меню и фильтры

У карточек товара есть подробный предпросмотр, в котором учтены все условия для покупки, избавляя пользователя от перехода. Всего разработано 5 версий: горизонтальные блоки для главной, горизонтальные мини для меню, вертикальные 2-х размеров и вертикальная для мобильной версии. Внутренняя карта товара и функционал вокруг неё в 3-х версиях: под 2 размера экрана и мобильная версия. В целом множество незаметных для пользователя, но очень важных для аккуратности и функциональности, решений. 

 

Превью и предпросмотр товара 

Карточка товара

 

Текстовым страницам (Блог, Рецепты, Советы, Новости, Оплата, Доставка, Возврат и пр.) уделено немало внимания после завершения работы над основным функционалом. Мы внимательно подготавливали и перерабатывали контент, чтобы каждая страница могла работать как на SEO, контекстную рекламу, так и на социальные сети. Старались оформлять их так, чтобы их действительно было приятно читать с любого устройства. Теперь между покупками можно посмотреть обзоры, почитать рецепты, а искать инструкции по эксплуатации стало проще простого! Завершили мы все разработкой модальных окон, предусматривающих самые быстрые и удобные способы регистрации, входа и оповещений. 

 

Личный кабинет

Личный кабинет с широким набором возможностей для пользователя. Мои заказы, просмотренные и отложенные товары, возможность добавлять несколько адресов для упрощения заказа, возможность выбора пунктов доставки разных транспортных компаний, персональные скидки, детали доставки и оплаты. 

 

Мобильная версия 

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

 

 

Сохранили абсолютно все возможности личного кабинета, фильтров подбора и корзины.

 

 

Также были разработаны специальные гайдлайны (инструкции) по оформлению контента на сайт для заказчика. 

 

 

Заключение

 

«Нам удалось создать полноценный интернет-магазин. Сложный, но удобный в использовании, адаптивный и отзывчивый. Процесс разработки дизайна уложен в 4 этапа. На этапе прототипирования и на этапе интеграции мы возвращались к доработкам, советовались, улучшали свои решения коллективно. В целом, на протяжении работы, каждые 2 недели мы согласовывали работу каждого отдела с соседними и с клиентом. И невероятно слаженная работа дала потрясающий результат!»

Техническая реализация

«Все механизмы, которые были спроектированы и учтены в дизайне, реализованы и запущены в продакшн: 

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

— Система заказа и доставки интегрирована с транспортными компаниями Почта России, Boxberry и СДЭК, что позволяет выводить автоматический расчет стоимости и сроки доставки. Пользователь имеет возможность выбрать способ онлайн-оплаты с помощью эквайринга Сбера или платежного агрегатора Robokassa.    

 — В личном кабинете пользователя отражается необходимая информация: профиль с контактами и адреса доставки, избранные товары и подписки на продукции, которых нет в наличии, история заказов, отзывы на продукцию. 

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

— Специальная маркетинговая панель позволяет заказчику внедрять и управлять промо-кодами, скидочной системой и купонами на покупку.»