Разработка интернет-магазина для гипермаркета освещения Люмерон

Люмерон — онлайн-гипермаркет декоративного и технического освещения с большим ассортиментом товаров. Для такого проекта сайт должен одновременно решать несколько задач: показывать широкий каталог, помогать покупателю разобраться в ассортименте, быстро находить подходящий товар и доводить его до оформления заказа.

На момент разработки перед нами стояла задача создать полноценный интернет-магазин на 1С-Битрикс, в котором каталог, поиск, фильтрация, сравнение, корзина, оплата и доставка работают как единая система.

Особое внимание уделили пользовательскому сценарию: чем больше ассортимент, тем важнее дать человеку инструменты для быстрого выбора. Сегодня в каталоге Люмерона представлены люстры, светильники, бра, споты, лампы, торшеры, уличное и офисное освещение, комплектующие и другие категории. 

Люмерон — онлайн-гипермаркет освещения, работающий с декоративным и техническим светом. В ассортименте представлены товары различных категорий и производителей, поэтому ключевой особенностью проекта стал большой и разнообразный каталог.

Компания работает как с частными покупателями, так и с профессиональной аудиторией. Для дизайнеров предусмотрен отдельный раздел с подбором освещения под проекты; на сайте заявлено более 65 брендов и более 50 000 товаров. 

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

Этап 1. Маркетинговое исследование

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

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

Результат: сформирована основа для проектирования будущего интернет-магазина.

Этап 2. Проектирование и прототипирование

На основании исследования разработали техническое задание и прототипы основных страниц.

Отдельно продумали структуру каталога, карточку товара, фильтрацию, сравнение, избранное, корзину и оформление заказа.

Большое внимание уделили навигации: при большом количестве товаров пользователь должен быстро переходить от общей категории к конкретной модели.

Результат: готовые прототипы и ТЗ, по которым команда могла переходить к дизайну и разработке.

Этап 3. Фирменный стиль и дизайн

В рамках проекта разработали логотип и визуальную концепцию сайта.

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

Отдельно проработали мобильную версию.

Результат: утвержденные дизайн-макеты и визуальная система проекта.

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

Перенесли дизайн в рабочий интерфейс и адаптировали его под разные размеры экранов.

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

Результат: адаптивная версия интернет-магазина.

Этап 5. Разработка на 1С-Битрикс

Техническую часть проекта реализовали на 1С-Битрикс.

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

Основной объем разработки пришелся на интернет-магазин: каталог, фильтры, карточки товаров, сравнение, корзину и оформление заказа.

Результат: рабочая CMS и функциональная основа интернет-магазина.

Этап 6. Каталог и инструменты выбора

Для Люмерона каталог является центральной частью сайта. Поэтому разработали несколько инструментов, которые помогают покупателю работать с большим ассортиментом.

Реализовали:

• каталог товаров;
• фильтрацию по параметрам;
• сравнение товаров;
• добавление в избранное;
• подбор товара по фотографии;
• подробные карточки товаров.

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

Этап 7. Корзина, заказ, оплата и доставка

Следующим этапом собрали полноценный сценарий покупки.

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

Покупатель получает возможность пройти весь путь внутри интернет-магазина — от выбора товара до оформления покупки.

На действующем сайте Люмерона также предусмотрена оплата банковской картой при оформлении заказа и различные варианты доставки по Москве, Санкт-Петербургу и регионам