Вернуться к списку Вернуться к кейсам
Кейс сайта

Интернет-магазин цветов orsk-buket.ru

Разработка интернет-магазина цветов с доставкой в Орске: умный фильтр роз, гибкое оформление заказа, мобильная версия и интеграция с шестью офлайн-магазинами.

Доставка цветов в Орске — это не просто интернет-магазин, а полноценная платформа для заказа букетов с круглосуточной доставкой. Сеть из шести магазинов, сотни позиций в каталоге, сезонные акции, блог, отзывы — и всё это должно работать быстро, понятно и без барьеров для покупателя.

Проект orsk-buket.ru — это разработка интернет-магазина с нуля: от дизайн-макетов в Pixso до готового сайта с корзиной, оформлением заказа и адаптивной мобильной версией.

О клиенте

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

Заказчик — Виктор, владелец сети. Запрос сформулировал чётко: «сделать удобную и простую мобильную версию», «быстрый заказ из карточки товара», «лёгкий переход в корзину», «фильтр как на goldapple.ru».

Главная страница — категории цветов, хиты продаж, акции и отзывы на первом экране

С чем пришли: пять задач

Перед началом разработки зафиксировали ключевые требования, собранные из обсуждений с заказчиком:

  1. Перегруженная шапка. Телефоны, обратный звонок и адрес создавали визуальный шум. Адрес решили вообще не показывать — самовывоза нет, и покупатели «прут пешком, не вчитываясь».

  2. Сложная навигация в каталоге роз. Сотни позиций, десятки оттенков и сортов. Нужен фильтр, который не заставляет покупателя думать: выбрал цвет, количество, цену — и сразу видишь результат.

  3. Длинный путь от карточки товара до заказа. Заказчик хотел, чтобы кнопка «В корзину» и быстрый заказ были доступны сразу, без прокрутки.

  4. Разные сценарии оформления. Доставка в обычные дни, доставка в праздники, самовывоз. Для каждого — свои поля и подсказки. Плюс возможность не знать адрес получателя — тогда магазин сам свяжется и договорится о встрече.

  5. Мобильная версия. Клиент подчеркнул: мобильная версия должна быть простой и удобной. Не урезанная копия десктопа, а самостоятельный интерфейс, заточенный под большой палец.

Решение 1. Архитектура каталога и навигация

Каталог построили вокруг реальных пользовательских сценариев. Покупатель приходит либо за конкретным цветком («Розы», «Цветы»), либо за поводом («8 Марта», «Подарки»), либо за форматом («Букеты», «Авторские букеты»).

Меню сделали двухуровневым: первый уровень — основные разделы (Розы, Цветы, Букеты, Подарки, Акции), второй — подкатегории и фильтры. В шапке оставили только нужное: логотип, телефон, иконки избранного и корзины. Обратный звонок сократили до иконки телефонной трубки.

Для каждого товара — плашка с типом предложения: «новинка», «хит», «букет дня», «скидка», «цена дня». Красная плашка для скидок — отдельное пожелание заказчика: «пусть % будет красная плашка».

Меню каталога — вся структура разделов в одном выпадающем меню

Решение 2. Умный фильтр роз

Розы — основной продукт. В каталоге сотни позиций: красные, белые, оранжевые, пионовидные, кустовые, премиум, от 15 до 101 штуки в букете. Искать без фильтра — гиблое дело.

Сделали фильтр в боковой панели: цвет, сорт, количество роз в букете, цена (четыре диапазона: до 2500, 2500–3500, 3500–5000, свыше 5000 ₽). Сортировка по популярности и цене. На мобильной версии фильтр открывается поверх каталога и показывает счётчик выбранных параметров.

Фильтр спроектирован по образу goldapple.ru — заказчик explicitly попросил такой подход. Все параметры применяются мгновенно, без перезагрузки страницы. Количество найденных позиций видно сразу.

Каталог роз — фильтр по цвету, сорту, количеству и цене

Решение 3. Карточка товара и быстрый заказ

Карточка товара содержит всё, что нужно для принятия решения: фотографии, полный состав букета (вплоть до количества стеблей каждого цветка), цена со скидкой, отзывы с рейтингом.

Кнопка «В корзину» и быстрый заказ — на виду, без прокрутки. Под составом — предупреждение об упаковке: «Упаковка не входит в комплект и оплачивается отдельно, уточняйте у оператора».

Справа — блок «Дополнительно к букету»: воздушные шары, мягкие игрушки, открытки, сладости. Покупатель может собрать полноценный подарок не уходя со страницы товара.

Блок «Вы смотрели» и «Возможно вас заинтересует» повышают глубину просмотра и средний чек.

Карточка товара — состав букета, отзывы, быстрый заказ и дополнительные подарки

Решение 4. Оформление заказа с гибкой логикой

Форма оформления заказа учитывает реальные пользовательские сценарии:

  • Доставка в обычные дни — стандартный набор полей: адрес, дата, время, получатель.
  • Доставка в праздники — расширенная форма с учётом повышенной нагрузки.
  • Самовывоз — упрощённая форма без адреса доставки.

Если покупатель не знает точный адрес получателя, он может оставить только имя и телефон — магазин сам свяжется и договорится о встрече. Отдельная галочка «Не знаю адрес получателя» активирует этот сценарий.

Способов оплаты — шесть: наличные курьеру, банковская карта (Visa, MasterCard, Maestro), Qiwi, Яндекс Деньги, WebMoney, банковский перевод. Для карт — менеджер высылает ссылку на оплату.

Бесплатная услуга «Фото букета перед доставкой» — гарантия качества: покупатель видит готовый букет до того, как его повезут.

Оформление заказа — адрес, дата, получатель и способ оплаты на одном экране

Решение 5. Мобильная версия

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

Главная страница на мобильном сохраняет ту же структуру, что и на десктопе: категории, акции, хиты — но перестраивается под вертикальную прокрутку. Корзина, оформление, карточка товара — все ключевые сценарии доступны без горизонтального скролла и pinch-to-zoom.

Главная — мобильная версия 320 px: категории и хиты под большой палец

Каталог — мобильная версия: сортировка, фильтры и карточки товаров на телефоне

Карточка товара — мобильная: состав, отзывы и кнопка «В корзину» всегда под рукой

Решение 6. Отзывы, блог и контроль качества

Система отзывов с рейтингом (4.7 из 5), фотографиями букетов от клиентов и ответами магазина. Каждый отзыв можно лайкнуть или написать ответ.

Блог — контентный раздел со статьями о цветах, уходе за букетами и праздничных подборках. Каждая статья открывается в отдельной странице с похожими записями.

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

Отзывы покупателей — рейтинг 4.7 из 5, фото букетов от клиентов и ответы магазина

Итоги проекта

Параметр Результат
Страниц 14 уникальных шаблонов (главная, каталог, карточка товара, корзина, оформление, блог, отзывы, контакты, о компании, доставка, акции, контроль качества, адреса, поиск)
Адаптивность Три разрешения: 1920 (десктоп), 1024 (планшет), 320 (мобильный)
Структура каталога 7 основных разделов, двухуровневое меню, 12 подкатегорий роз
Фильтр 4 группы параметров (цвет, сорт, количество, цена), мгновенное применение
Способы оплаты 6 (наличные, карта, Qiwi, Яндекс Деньги, WebMoney, банковский перевод)
Сценарии оформления 3 (обычная доставка, праздничная, самовывоз)
Отзывы Рейтинг 4.7/5, фото покупателей, ответы магазина
Мобильная версия Самостоятельный интерфейс, заточенный под палец, без горизонтального скролла
SEO 10+ информационных страниц, блог, микроразметка

Типичные ошибки в похожих проектах

  1. Плоская структура каталога. Когда все категории в одном списке — покупатель теряется. Двухуровневое меню и группировка роз по цветам/сортам решают эту проблему.

  2. Фильтр «для галочки». Формально висит, но не помогает. Покупатель не должен думать о параметрах — фильтр должен подсказывать: «Красные розы: 15 шт. от 2500 ₽».

  3. Карточка товара — длинная простыня. Состав букета, отзывы, допы — всё важно, но кнопка «В корзину» должна быть видна без прокрутки. Иначе теряются импульсные покупки.

  4. Мобильная версия как afterthought. Урезанный десктоп на телефоне — это не адаптив. Мобильная версия должна проектироваться отдельно, с учётом большого пальца и вертикальной прокрутки.

  5. Одна жёсткая форма оформления. Не все покупатели знают адрес получателя. Гибкая логика (доставка/самовывоз, обычный день/праздник) повышает конверсию в заказ.

  6. Нет фото перед доставкой. Цветы — товар с высокой вариативностью. Бесплатное фото букета перед отправкой снимает тревожность покупателя и снижает количество возвратов.

Заключение

orsk-buket.ru — пример того, как интернет-магазин цветов должен работать в 2025 году: быстрый каталог с умным фильтром, карточка товара с полным составом и отзывами, гибкое оформление заказа и полноценная мобильная версия.

Проект показывает, что даже при разделении ролей (дизайн-макеты со стороны заказчика, разработка на стороне S-WEBS24) результат получается цельным. Ключевой фактор успеха — внимание к реальным сценариям покупателя, а не к абстрактному «удобству интерфейса».