Інтернет-магазин авторських дитячих книг Sayvi: інтеграції для України та Іспанії
Послуги: UX/UI-дизайн, розробка на Next.js і Laravel, адаптивна верстка, системні інтеграції
Sayvi Studio побудований навколо авторів, їхнього досвіду переїзду з України та власних історій, тому магазин мав продавати книги й творчі товари без втрати емоційної основи бренду.
Україна та Іспанія потребували окремих локальних сценаріїв, доменів і зовнішніх сервісів, хоча користувачі взаємодіють з одним брендом і спільною продуктовою системою.
Окремі клієнтські контури не мали перетворитися на два незалежні проєкти з дублюванням даних, бізнес-логіки та адміністрування.
Каталог, кошик, швидке замовлення, оформлення покупки та особистий кабінет потрібно було зв’язати в послідовний сценарій незалежно від локальної версії сайту.
Головна сторінка розкриває історію сім’ї, авторів і проєктів, а каталог переводить користувача до конкретних книг, наборів та інших товарів без переходу на окремий ресурс.
Український та іспанський напрями розмістили на окремих доменах, щоб кожен ринок отримав власний клієнтський контур і локальні сценарії роботи.
Каталог, користувацькі дані, замовлення та основна бізнес-логіка працюють через одну серверну систему замість двох незалежних backend-рішень.
Для українського контуру підключили Checkbox та облікову систему 1С/BAS, а іспанська версія отримала окремий набір зовнішніх інтеграцій відповідно до локальної роботи бізнесу.
Користувач може пройти стандартний маршрут через кошик і поетапне оформлення замовлення або скористатися окремим сценарієм швидкого замовлення.
Профіль, історія замовлень, список бажань та адреси винесені в окремі розділи, щоб повторні взаємодії не починалися щоразу з нуля.
Сімейну атмосферу бренду передали без типового «дитячого» перевантаження
- Великі фотографії родини стали основою ключових іміджевих екранів
- Діагональні геометричні форми повторюються у фонах і фотокомпозиціях
- Блакитні, графітові та світлі площини формують основний контраст сторінок
- Коралові й фіолетові акценти виділяють окремі написи та основні дії
Великі заголовки поєднали з короткими текстовими блоками та значними відступами між секціями. Нейтральна типографіка не конкурує з яскравими обкладинками й фотографіями, тому навіть насичені емоційним контентом сторінки зберігають легку й упорядковану подачу.
Верхню навігацію зібрали навколо основних сценаріїв магазину
- Логотип відокремлений від основного меню
- Магазин, інформаційні сторінки та проєкти зібрані в одному горизонтальному рядку
- Пошук, мова, обране, кошик і профіль згруповані праворуч
- Лічильник товарів винесений безпосередньо на іконку кошика
Однакова структура шапки повторюється на головній, у каталозі, на корпоративних і сервісних сторінках. Перехід між різними частинами сайту не змінює звичне розташування основних елементів навігації.
Футер розділили за роллю інформації
- Опис бренду та соціальні мережі винесені в окрему ліву зону
- Каталог отримав власну навігаційну колонку
- Корпоративні сторінки зібрані в окремому блоці «Студія»
- Умови покупки та контакти об’єднані в секції підтримки
Каталог розділили на зону фільтрів і регулярну товарну сітку
-
Категорії винесли в окремий горизонтальний ряд
Книги, розмальовки, іграшки, творчі набори та інші групи представлені компактними кнопками над основним каталогом.
-
Фільтри займають постійну ліву колонку
Категорію, вік, країну, ціну та виробника зібрали в окремій вертикальній панелі, не змішуючи їх із товарами.
-
Основну частину сторінки побудували на трьохколонковій сітці
Картки мають однакову ширину та стабільні проміжки, тому довгий каталог зберігає рівний візуальний ритм.
-
Сортування та пагінацію винесли за межі товарних карток
Перемикач порядку розташований над сіткою, а навігація між сторінками — після останнього ряду товарів.
Товарна картка веде погляд від статусу книги до дії покупки
- Статуси пропозиції зібрали у верхньому куті Мітки «Бестселер», «Новинка» та «Акція» розташовані над обкладинкою, а кнопку додавання в обране винесли на протилежний бік.
- Обкладинка займає головну візуальну площину Зображення книги розмістили в центрі світлого поля й відокремили від текстової інформації достатнім вільним простором.
- Назву, рейтинг і ціну вибудували у вертикальну послідовність Після обкладинки користувач бачить бренд і назву видання, оцінку з кількістю відгуків, а нижче — актуальну вартість.
- Варіанти покупки закріпили в нижній частині картки Окремо передбачили швидке замовлення в один клік і стандартне додавання товару до кошика.
У UI kit показані різні стани картки після взаємодії з товаром: зона покупки змінюється на керування кількістю, тоді як обкладинка, назва та цінова частина залишаються на своїх місцях. Це зберігає знайому структуру картки навіть після додавання книги до замовлення.
Оформлення покупки розділили на швидкий і повний сценарії
-
Кошик відкривається поверх поточної сторінки
Бічна панель показує вибрані товари, кількість, знижку, підсумкову суму та дві подальші дії без переходу з каталогу.
-
Швидке замовлення звели до трьох контактних полів
У модальному вікні залишили ім’я, телефон та email, щоб окремий сценарій не повторював повну форму checkout.
-
Повне оформлення поділили на чотири послідовні кроки
Контакти, доставка, оплата та підтвердження відображені у верхньому індикаторі, де користувач бачить поточний етап і наступні кроки.
-
Склад замовлення залишили видимим поруч із формою
Товари, доставка, знижка та загальна сума зібрані в окремій правій панелі, тому підсумок покупки не зникає під час заповнення даних.
Сторінку про бренд побудували як послідовну історію з різних форматів контенту
- Після першого екрана розмістили окремий сторі-блок Великий текст про шлях родини поставили поруч із фотокомпозицією, відділивши його від короткої презентації бренду на першому екрані.
- Цінності винесли в самостійну горизонтальну секцію Чотири принципи бренду зібрали в один ряд між особистою історією та знайомством із командою.
- Команду представили через персональні картки Для кожного учасника передбачили фотографію, ім’я, роль, короткий текст і посилання на соціальну мережу.
- Відео та соціальний контент завершують основну розповідь Окрема презентація серії Lily переходить у блок із матеріалами Instagram, YouTube і TikTok.
Найщільнішу текстову частину зосередили на початку історії бренду, а далі сторінка поступово переходить до коротших і більш візуальних форматів. Така зміна інформаційної щільності задає темп перегляду й не змушує користувача читати однаково великі масиви тексту від першого до останнього екрана.
Checkout послідовно проводить користувача через контактні дані, доставку, оплату та підтвердження покупки.
Покупець може пройти стандартний маршрут через кошик і 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 секунди замість блукання по каталогу
