Интернет-магазин авторских детских книг Sayvi: интеграции для Украины и Испании``
Услуги: UX/UI-дизайн, разработка на Next.js и Laravel, адаптивная вёрстка, системные интеграции
Sayvi Studio построен вокруг авторов, их опыта переезда из Украины и собственных историй, поэтому магазин должен был продавать книги и творческие товары без потери эмоциональной основы бренда.
Украина и Испания требовали отдельных локальных сценариев, доменов и внешних сервисов, хотя пользователи взаимодействуют с одним брендом и общей продуктовой системой.
Отдельные клиентские контуры не должны были превратиться в два независимых проекта с дублированием данных, бизнес-логики и администрирования.
Каталог, корзину, быстрый заказ, оформление покупки и личный кабинет нужно было связать в последовательный сценарий независимо от локальной версии сайта.
Главная страница раскрывает историю семьи, авторов и проектов, а каталог переводит пользователя к конкретным книгам, наборам и другим товарам без перехода на отдельный ресурс.
Украинское и испанское направления разместили на отдельных доменах, чтобы каждый рынок получил собственный клиентский контур и локальные сценарии работы.
Каталог, пользовательские данные, заказы и основная бизнес-логика работают через одну серверную систему вместо двух независимых backend-решений.
Для украинского контура подключили Checkbox и учётную систему 1С/BAS, а испанская версия получила отдельный набор внешних интеграций в соответствии с локальной работой бизнеса.
Пользователь может пройти стандартный маршрут через корзину и поэтапное оформление заказа или воспользоваться отдельным сценарием быстрого заказа.
Профиль, история заказов, список желаний и адреса вынесены в отдельные разделы, чтобы повторные взаимодействия не начинались каждый раз с нуля.
Семейную атмосферу бренда передали без типичной «детской» перегрузки
- Большие фотографии семьи стали основой ключевых имиджевых экранов
- Диагональные геометрические формы повторяются в фонах и фотокомпозициях
- Голубые, графитовые и светлые плоскости формируют основной контраст страниц
- Коралловые и фиолетовые акценты выделяют отдельные надписи и основные действия
Крупные заголовки объединили с короткими текстовыми блоками и значительными отступами между секциями. Нейтральная типографика не конкурирует с яркими обложками и фотографиями, поэтому даже насыщенные эмоциональным контентом страницы сохраняют лёгкую и упорядоченную подачу.
Верхнюю навигацию собрали вокруг основных сценариев магазина
- Логотип отделён от основного меню
- Магазин, информационные страницы и проекты собраны в одном горизонтальном ряду
- Поиск, язык, избранное, корзина и профиль сгруппированы справа
- Счётчик товаров вынесен непосредственно на иконку корзины
Одинаковая структура шапки повторяется на главной, в каталоге, на корпоративных и сервисных страницах. Переход между разными частями сайта не меняет привычное расположение основных элементов навигации.
Футер разделили по роли информации
- Описание бренда и социальные сети вынесены в отдельную левую зону
- Каталог получил собственную навигационную колонку
- Корпоративные страницы собраны в отдельном блоке «Студия»
- Условия покупки и контакты объединены в секции поддержки
Каталог разделили на зону фильтров и регулярную товарную сетку
-
Категории вынесли в отдельный горизонтальный ряд
Книги, раскраски, игрушки, творческие наборы и другие группы представлены компактными кнопками над основным каталогом.
-
Фильтры занимают постоянную левую колонку
Категорию, возраст, страну, цену и производителя собрали в отдельной вертикальной панели, не смешивая их с товарами.
-
Основную часть страницы построили на трёхколоночной сетке
Карточки имеют одинаковую ширину и стабильные промежутки, поэтому длинный каталог сохраняет ровный визуальный ритм.
-
Сортировку и пагинацию вынесли за пределы товарных карточек
Переключатель порядка расположен над сеткой, а навигация между страницами — после последнего ряда товаров.
Товарная карточка ведёт взгляд от статуса книги к действию покупки
- Статусы предложения собрали в верхнем углу Метки «Бестселлер», «Новинка» и «Акция» расположены над обложкой, а кнопку добавления в избранное вынесли на противоположную сторону.
- Обложка занимает главную визуальную плоскость Изображение книги разместили в центре светлого поля и отделили от текстовой информации достаточным свободным пространством.
- Название, рейтинг и цену выстроили в вертикальную последовательность После обложки пользователь видит бренд и название издания, оценку с количеством отзывов, а ниже — актуальную стоимость.
- Варианты покупки закрепили в нижней части карточки Отдельно предусмотрели быстрый заказ в один клик и стандартное добавление товара в корзину.
В UI kit показаны разные состояния карточки после взаимодействия с товаром: зона покупки меняется на управление количеством, тогда как обложка, название и ценовая часть остаются на своих местах. Это сохраняет знакомую структуру карточки даже после добавления книги в заказ.
Оформление покупки разделили на быстрый и полный сценарии
-
Корзина открывается поверх текущей страницы
Боковая панель показывает выбранные товары, количество, скидку, итоговую сумму и два дальнейших действия без перехода из каталога.
-
Быстрый заказ свели к трём контактным полям
В модальном окне оставили имя, телефон и email, чтобы отдельный сценарий не повторял полную форму checkout.
-
Полное оформление разделили на четыре последовательных шага
Контакты, доставка, оплата и подтверждение отображены в верхнем индикаторе, где пользователь видит текущий этап и следующие шаги.
-
Состав заказа оставили видимым рядом с формой
Товары, доставка, скидка и общая сумма собраны в отдельной правой панели, поэтому итог покупки не исчезает во время заполнения данных.
Страницу о бренде построили как последовательную историю из разных форматов контента
- После первого экрана разместили отдельный стори-блок Большой текст о пути семьи поставили рядом с фотокомпозицией, отделив его от краткой презентации бренда на первом экране.
- Ценности вынесли в самостоятельную горизонтальную секцию Четыре принципа бренда собрали в один ряд между личной историей и знакомством с командой.
- Команду представили через персональные карточки Для каждого участника предусмотрели фотографию, имя, роль, короткий текст и ссылку на социальную сеть.
- Видео и социальный контент завершают основной рассказ Отдельная презентация серии Lily переходит в блок с материалами Instagram, YouTube и TikTok.
Самую плотную текстовую часть сосредоточили в начале истории бренда, а дальше страница постепенно переходит к более коротким и более визуальным форматам. Такая смена информационной плотности задаёт темп просмотра и не заставляет пользователя читать одинаково большие массивы текста от первого до последнего экрана.
За это время реализовали frontend на Next.js, backend на Laravel, e-commerce-функциональность и локальную интеграционную логику.
Украинскую часть платформы связали с Checkbox и учётной системой 1С/BAS.
Пользователь последовательно проходит контактные данные, доставку, оплату и подтверждение покупки.
Заказ можно оформить через полный checkout или оставить контакты в сокращённой форме быстрой покупки.
На сайте представлены материалы из Instagram, YouTube и TikTok.
Новости, проекты и события и материалы из социальных сетей расширяют сайт за пределы непосредственной продажи товаров.
// От семейного бизнеса к e-commerce-платформе для двух рынков
Sayvi Studio вырос из личной истории семьи, которая переехала из Украины в Испанию и превратила собственный опыт в авторские детские книги и творческие проекты. Из-за этого обычная модель интернет-магазина здесь не работала: покупателю важно понять, кто создаёт эти книги, откуда происходят их сюжеты и почему вокруг них сформировался отдельный бренд. Поэтому коммерческую часть не отделяли от истории авторов — знакомство с Sayvi Studio естественно переходит в выбор и покупку изданий.
Международная модель продаж поставила другую задачу: украинский и испанский рынки требовали разных локальных условий, но создавать два самостоятельных магазина означало бы дублировать бизнес-логику, данные и дальнейшее управление платформой. Поэтому клиентские версии разнесли по отдельным доменам, а центральную часть системы оставили общей. Next.js отвечает за локальные frontend-контуры, а Laravel сосредоточил основную серверную логику в одном backend.
На границе между общей платформой и локальными рынками работает интеграционный слой. Украинский контур связали с Checkbox и 1С/BAS, для Испании использовали отдельный набор внешних сервисов. Такая архитектура отделила то, что зависит от страны, от общей логики магазина: бренд, каталог и управление продуктом остались едиными, а локальные коммерческие процессы получили собственные инструменты.
UX построили так, чтобы эта техническая сложность оставалась незаметной для покупателя. Пользователь работает с привычным e-commerce-сценарием: находит нужное издание, выбирает способ оформления и контролирует состав покупки. Для тех, кто уже определился с товаром, предусмотрели более короткий маршрут быстрого заказа, а полное оформление оставили для сценариев, где нужны доставка, оплата и другие данные. Разная серверная логика двух рынков не меняет принцип взаимодействия с самим магазином.
Отдельной задачей стало сохранить связь с покупателем после первого заказа. Sayvi Studio развивается через новые книги, серии, творческие проекты, события и контент семьи, поэтому сайт работает не только в момент транзакции. Личный кабинет, список желаний и история заказов поддерживают повторные покупки, а новости, проекты и социальный контент возвращают пользователя к бренду между ними.
В итоге Sayvi Studio объединил две разные по природе системы: эмоциональный семейный бренд и международный e-commerce. Общий Laravel-backend удерживает ядро платформы, Next.js формирует локальные клиентские версии, а отдельные интеграционные контуры адаптируют продажи к конкретному рынку. Для Kliox этот кейс показывает разработку под ключ, где техническая архитектура поддержала международную модель продаж и одновременно сохранила очень личный характер бренда.
// Решения для международного e-commerce и управления каталогом
Модуль отображает цены в нескольких валютах одновременно с автоматическим обновлением курса НБУ или частного банка — покупатель выбирает удобную валюту и оплачивает в гривнах по актуальному курсу
Модуль резервирует остаток автоматически при оформлении заказа, синхронизирует с 1С и несколькими складами в реальном времени и уведомляет менеджера, когда пора пополнять запасы
Умный поиск с исправлением ошибок, синонимами, морфологией и автоподсказками — покупатель находит нужный товар за 2–3 секунды вместо блуждания по каталогу
